9 Tips and Tricks for Chrome Dev Tools
Tags: webdev, productivity, javascript, showdev
Published: 2018-12-30 10:22:51

---
title: 9 Tips and Tricks for Chrome Dev Tools
published: true
description: How to get the best out of your development cycle
tags: webdev, productivity, javascript, showdev
---

[Chrome](https://developers.google.com/web/tools/chrome-devtools/) 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 breakpoint](https://thepracticaldev.s3.amazonaws.com/i/4o7spd5aolhy4y9vztd2.PNG) -->
![Conditional breakpoints](https://thepracticaldev.s3.amazonaws.com/i/zrwewe46jmx481wnvnxy.PNG)

Read more about [conditional breakpoints here.](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#conditional-loc)

# 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](https://thepracticaldev.s3.amazonaws.com/i/m485vscthxqsdn239c2s.PNG)

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](https://thepracticaldev.s3.amazonaws.com/i/u7klwv9h43watv8ryogn.PNG)

# 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!](https://thepracticaldev.s3.amazonaws.com/i/wzh7qn3g2jgcgi6pxiom.PNG)

Read more about [stopping infinite loops here.](https://developers.google.com/web/updates/2018/04/devtools#stop)

# 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.

```javascript
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](https://developers.google.com/web/updates/2018/08/devtools#bonus) using the [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/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](https://thepracticaldev.s3.amazonaws.com/i/0poyqpo2z63qi0xma1a9.PNG)

# 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](https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#monitorevents).

# 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](https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#save-as-har) and how to [analyze HAR files](https://toolbox.googleapps.com/apps/har_analyzer/).

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

Open dev tools > go to `Settings`

Toggle it!

![Dark theme](https://thepracticaldev.s3.amazonaws.com/i/kbydvc8jytswwp0nzgo4.PNG)

# 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:

- [VueJS dev tools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) (Really excellent user experience)
- [ReactJS dev tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
- [Google Analytics](https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna)