Debugging websites with Chrome developer tools

den 18 augusti 2017 av Dennie

Chrome developer tools has a great deal of features. And every new developer I met has almost shown me a new one. Here's a couple of our favorite features.

Everyone hates slow rendered sites and it’s quite easy to check how the site reacts even on a low speed connection in Chrome developer tools.
To ensure there is readable content even when the page is still loading, and not white text on white background for say, like 3 seconds on a 2G connected phone. You could then set important style properties directly in the header and then change them in the stylesheet.

Here is a way to simulate a low speed connection such as 2G, a custom speed or even offline state. I have never forgotten to turn it off :)

To manage presets, go to settings and select the throttling option in the left column

A quick way to set breakpoints in Chrome developer tools is to just right click the element, select “Break on” and then select what option you’d wish to set a breakpoint for.

And you might have experienced that annoying thing when the debugger steps into jquery or whatever external source… just add patterns under blackboxing in the settings pane.
Thrown exceptions in library code will not pause the debugger. Yay, right!?

Force element state to see hover, active, focus and visited state of links is a feature it took me a while to find, quite obvious it exists and not that hidden. I just missed it was there and maybe someone else have too.

Also, a function I missed for an embarrassing long time, how to filter the sources. (I know. Such obvious textbox)

A quicker way to see the actual style values for an element is just to switch over to “computed styles” in the right pane. Instead of scrolling down to see where the specific property was actually set.

There’s obviously a lot more to get from Chrome developer tools and a good way to keep yourself updated is to follow the "What's New In DevTools" for each release of Chrome. 

Happy debugging!