Utilizing Chrome Developer Tools

When doing any kind of Front-End work, the tool that most developers spend an exceptionally large amount of time in are the Chrome Developer Tools, more so than any other similar tool in other browsers. With good reason too, they are both mature, and have a lot of features which the others lack, and it seems like every week a new update comes out with even more tools that you didn’t think you needed, until now. I’m no stranger to Chrome Developer Tools, and wanted to go into some detail about some of my favourite but not all that commonly known features that can really help you out with your own projects.

Remote Device Inspect

When you’re working on building or fixing a mobile feature you’re probably used to using the device toolbar to see the page at different breakpoints. While this works well most of the time, I’ve certainly had my share of mobile bugs which I can’t reproduce in the browser. I can however reproduce the issue on a real device. If you have an Android phone or tablet you’re able to use all of the Chrome Developer Tools on it with the help of the remote device inspection tools. All you need to do is turn on USB Debugging on your Android, plug in a USB cable to your computer, and look for the “Remote Devices” option located in the “More Tools” menu. You’ll be prompted to give permission to the computer on the device, but once done you’ll be able to see the phones browser on your computer, allowing you to search the markup structure, look at the CSS, and everything else Chrome Developer Tools has to offer. While doing this you can also use your phone and see how your changes in the developer tools affect the mobile experience.

Remote Device Screen

If you’re working on a local environment you can even setup port forwarding to allow your device to access localhost, meaning you can make this part of your development process before the site goes live. I find myself using this one a lot.

Remote Device Port ForwardingScreen

JavaScript Debugger

Chrome has some pretty in-depth JavaScript debugging tools built into the Sources tab, one of my favourites is debugger. If you’ve ever found yourself having problems with scope inside of an application this may be the tool for you. Inside of your application instead of putting console logs everywhere you may consider putting debugger instead, and then refreshing the page with the developer tools open. What happens is the runtime will stop at the exact spot you put debugger and will allow you to view the call stack and the scope of that part in the application.

const myName = 'Montezuma'

function introduceName(name) {
  debugger
  return `hello my name is ${name}`
}

introduceName(myName)

If you want to see what’s actually happening in a more complex function you can string multiple debugger statements together throughout your code, the runtime can be resumed once the initial one is hit, and then it will pause again on the next one.

JavaScript Debugger

Network Throttling

Chrome Developer Tools is able to simulate an internet connection for you inside of the Network tab. While this is a pretty commonly used, did you know you can create a custom profile to simulate a specific speed and network condition? To do this go to the Network tab, hit the thottle dropdown at the top, and then hit “Custom”. Inside of this menu you can enter a specific upload and download speed, and even latency.

Custom Network Settings

This can be good for debugging race conditions and seeing how your site will load in specific markets. When I lived in Alaska there were certain parts of the state which only have a maximum of 320k down with very high latencies, so seeing how sites loaded in these areas was good data to have and helped shape certain parts of the development process. Inside of the network tab there’s also a plephora of different filtering options that let you see specific content as it gets loaded, the source, and more. It can be overwhelming at times, but more data the better, right?

Audit

Something recently improved in Chrome is the Audit tab, which now has the Lighthouse extension built in. This tool allows you to audit your site to get a score based on some new baseline standards for Progressive Web Apps, accesability and load times. It will even give you suggestions on how to improve in these areas which can be helpful when making optimizations.

Chrome Audit

Of course you can always download the Chrome extension for this instead.

Settings

The Chrome Developer tools have a ton of additional options inside of the Settings menu. Some notable ones include the theme colour, panel layout, indentation settings, rulers, request blocking and more. Many of these come down to personal preference, but many have a legitimate use case when debugging issues.

Dev Tool Settings

Coverage Maps

Something I worked on recently is reducing the CSS size of a site so the stylesheet can also be utilized for AMP without the need to create a seperate version. The challenge of this refactor was figuring out which styles in the framework were needed and which were either duplicates or in general unused.

This job was made easier by the Coverage Map in Chrome. What it does is it analyzes CSS and JavaScript on the page and outputs which lines are used, and which are unused. It even gives a percentage read out of each.

Coverage Maps

You can access the Coverage Map part of Chrome in the “More Tools” menu. Once open you can click on the record button near the top to get a read out of the current page.

Closing Thoughts

There’s a ton of helpful things inside of Chrome Developer Tools which can make your life easier as a developer if utilized properly. While I mentioned only a few, there’s a ton I didn’t and I’d highly recommend clicking around in the menus to see what you can find. Other browsers have their own developer tools which are worth checking out too, especially if you’re aiming for cross compatability and maximum device support coverage.

If you have any questions feel free to reach out on Twitter or via e-mail. You can also leave a comment below (I just now got around to enabling them!)

Also, Merry Christmas!

  • Share

  • Share on Facebook
  • Tweet
  • Submit to Reddit
  • Share on LinkedIn
  • Send email

Comments 💬