How I Use Chrome Developer Tools v.1

Published in

The Dirty Coder

4 min readAug 9, 2016

As a developer you may spend a lot of your time reading through your code in your code editor of choice. But I’ll bet that if you spend any amount of time debugging your code you spend a significant amount of time in Chrome’s developer tools. Here are the pieces that I find most useful.

This will not be and exhaustive tutorial on all the functionality of Chrome’s developer tools but more of a “this is how I use them” kind of post.

The Network tab

This tab is pretty much indispensable. It allows me to see all the network calls that are being made. Or check to see if the call that I expect to be made is being made. For example: You just implemented some widget to call make a GET request some API and return you back some JSON data. You could use the network tab to make sure that request is being returned successfully and you are getting back a 200 response. You could also check the response tab to see what is being returned.

This is extremely helpful when you are trying to figure out if your call is returning what you expect. This will also help you to visualize the format in which your content is being returned so that you can properly handle it.

You can also use this tab to look at the data that you are posting to an endpoint. For example say you have to post some information from a form to an endpoint. You can use the Header tab and look at your form data as it posts. Super helpful!

Console

This is the tab that most javascript developers are probably the most familiar with. It’s what you are going to use to log out all your variables that you want to know the value of at runtime. It’s also going to show you errors or warnings in your code. It will catch syntax errors, browser response code errors, and sometimes display warnings that your Framework or library of choice chooses to display.

It’s also a wonderful tool to just evaluate your javascript in. If you are curious about if you can something evaluates to true, i.e.

var one = 1;
one == "1"
true
one === "1"
false

I use it for this purpose all the time. It’s much more convenient than opening an editor and running a file or opening a REPL.

Elements

The elements panel show the entire DOM tree as the web browser sees it. You can use this tab to navigate through the structure of your code and verify that elements are nested correctly.

This is also where I do most of my CSS debugging. If I’m having an issue targeting a specific element when developing I will use this tab to inspect that specific element and look in the styles panel to the right and see which styles are being applied to that element.

Selected element with styles panel on the right

You can also force element states which is extremely useful to see what your button looks like when it’s in hover or clicked state. You can do this by clicking on the little :hov text in the styles panel and clicking on the desired state from the panel.

David Connor's collection of button hover effects. — David Connor’s collection of button hover effects.

One really cool thing is that Chrome has a color palette tool that allows you to select your web safe color and hex code from the color picker.

Chrome's color picker tool — Chrome’s color picker tool

Resources

Here are some great resources that helped me when researching for this post.

Next Steps

I’m going to write a follow up to that will go into some of the other tabs that I use.

Timeline
Profiles
Resources
Sources

Chrome’s Dev tools are extremely powerful and has some really cool and empowering features and this post has barely scratched the surface. I would love to hear what others peoples favorite tools are!