Wednesday, May 20, 2015

Chrome Developer Tools Tips and Tricks

In the last ALT.NET meetup @Shay Friedman talked about “Chrome Developer Tools Tips & Tricks”. All the audience, myself included were amazed from the features that Shay has shown that neither of us knew.

The Tips & Tricks:

1. Functions navigation in JavaScript source file:

You’re all familiar with this window:

clip_image002

Some of you might know that if you hit Ctrl + P you can open a JS source file from your workspace. However did you know that if you hit Ctrl + Shift + P you can navigate to a function which is included in the opened file!

clip_image004

No more endless scrolling!

2. Style search

This window is also pretty common.

clip_image006

We scroll down in order to figure out which Style messes our element’s css. However did you notice that you can Search (!!!) for a style property or value???

clip_image007

clip_image009

3. Color picker

This is a color property.

clip_image011

Usually in order to change a color you will double-click the area and manually write the new color. However if you click on the colored box itself you will get a color picker dialog!

clip_image013

And if you move the cursor over the page you could even pick a color!!!

clip_image015

4. Disable Cache and reload cache

You remember that time tried your best to hit F5 to refresh the page but had no luck? And then you realized that your cache wasn’t disabled. First and foremost disable it. However if for some reason you still think that your changes are not loaded to the browser you can right click the refresh icon (while the developer tools is open) and try the Hard Reload or the Empty cache and Hard reload it. That should do it.

clip_image017

5. Filtering the network files

If you click on the filter icon in the network tab you could filter all the request’s files by a wanted file type. Hold Ctrl and you can multi select the file types

clip_image019

6. Black box script in Call Stack

When you debug your app and hit a break point you’ll sometimes want to check the call stack window to see previous calls.

clip_image021

Since I use angular this call stack has a lot of angular’s calls which I couldn’t care less about them. However, if I right-click on the angular script file I can select it as a Blackbox script.

clip_image022

And now I won’t see its calls in the call stack window J

clip_image023

If you don’t know some of those features you don’t need to feel embarrassed. Google uses tons of UX best practices in all its products in order to reveal all the available features, but not in Chrome. Here I think they actually tried to hide some of those features. J

If you have more tricks and tips then feel free to comment

No comments:

Post a Comment