loading...

9 Tips and Tricks for Chrome Dev Tools

lssweatherhead profile image Laura Weatherhead ・4 min read

Chrome is increasingly not just a browser of choice, but also a powerful development tool in its own right. New features are regularly introduced, some of which fall more naturally into (my) development cycles than others.

Here are some of the features I make the best use of and think are worth a wee highlight:

1. Conditional Breakpoints

Adding breakpoints to the script sources is an incredibly helpful way to know what's going wrong (or right!) and where. Being able to add conditional breakpoints helps you to get to the root of a problem even quicker by specifying parameter criteria that you are interested in investigating further. Ideal!

Conditional breakpoints

Read more about conditional breakpoints here.

2. Watch variables

It is possible to interrogate variables in the sources window when a breakpoint is engaged. This looks a bit like this:

Variable

This is fine, but say you want to keep an eye on multiple variables at the same time or want to compare, or just remind yourself what they are (or should be), then it's possible to expand the watch panel on the right-hand side and add as many variables there as you'd like:

Watch panel

3. Stop Infinite Loops

If you have ever accidentally run a javascript function, realised a second too late and had to watch as your computer begins to grind to a halt as you feverishly try to force quit Chrome, then this one is for you...

Hit pause script, and then...

Stop!

Read more about stopping infinite loops here.

4. Measure interactions

Ever wanted to know how long something takes on a website...?

  • How long after page load does someone play a video or click a button?
  • Where are the performance bottlenecks? How long does a script method take to run?

You can now use window.performance to trigger measurement starts and completions, and consequently extract the data.

onPageLoadOrMethodStart() {
    window.performance.mark('start');
    ...
}

onMethodCompletionOrCtaInteraction() {
    window.performance.mark('end');
    window.performance.measure('customMeasure', 'start', 'end');
}

retrieveData() {
    const customPerf = window.performance.getEntriesByName('customMeasure')[0].duration;
}

Handily, the data is also printed out in the performance window on the top panel, so you can see all measurements at a glance. Awesome!

Read more about measuring real world interactions using the User Timing API.

5. Pretty print minified files

Minified files in production are industry standard, and are to be expected, but sometimes it's handy to attach breakpoint or look into individual structures or methods. Make it readable - make it pretty! (bottom left-hand corner of the sources panel):

Pretty print

6. Monitor Events

Ever wondered why your event listeners weren't firing, or were firing at random times?

You can track page events and interactions using the console.

Try it now:

  1. Right click and "inspect" the search input bar at the top of the page
  2. Copy this into the console: monitorEvents($0, "key");
  3. Type something into the search input...

Read more about monitoring events here.

7. Export Requests Data

You've got a problem. Something looks weird, but you're not sure why. You've got heaps of network requests to sift through, the answer must be in there somewhere... You could really use a hand, wouldn't it be handy to share them with someone else?

You can!

You can download the requests as a HAR file, and send it to a colleague who can import it into their Chrome to cast an eye over the requests also. Simply right-click on any request and select Save as HAR with Content. Ta-da.

Read more about exporting requests data and how to analyze HAR files.

8. Enable dark theme (purely aesthetic...)

Open dev tools > go to Settings

Toggle it!

Dark theme

9. Chrome Extensions

There are also a load of really handy extensions for use with various frameworks and tools. Ones that I have found particularly useful are:

Discussion

pic
Editor guide
Collapse
chiangs profile image
Stephen E. Chiang

Didn't know about 2,3, & 4. Thanks! Augury for angular and redux devtools are also great!

Collapse
lssweatherhead profile image
Laura Weatherhead Author

Ahh awesome, I'll have to try Augury out next time I am tinkering in Angular - thanks! :)

Collapse
mvasigh profile image
Mehdi Vasigh

I didn't know all but 3 of those but these are extremely useful and handy! Just hope I remember them when I need them πŸ˜†

Thank you!

Collapse
lssweatherhead profile image
Laura Weatherhead Author

Haha, yes that’s always the cinch of it isn’t it - remembering them! Hope they come in useful for you :)

Collapse
grandemayta profile image
Gabriel Mayta

I never use performance feature, nice tips, very useful. Thanks

Collapse
lssweatherhead profile image
Laura Weatherhead Author

Thank you! Glad it might be of some use :)

Collapse
ramuta profile image
Matej Ramuta

Thanks for the number 8 ;)

Collapse
lssweatherhead profile image
Laura Weatherhead Author

Haha! No worries πŸ˜› thought I would just throw it on in there πŸ˜‡