5 Chrome DevTools Tips That Will Make Your Life Easier

Most of us know the Chrome basics — like how to inspect elements on the page — but there is much more hidden beneath the surface

Image by author

The Chrome DevTools is a web developer’s best friend and it has a ton of tricks and not-so-obvious features that not everyone is aware of.

Most developers know about the basics, like how to inspect elements on the page, but there is much more functionality hidden beneath its surface. The goal of this article is to demystify some of the most useful lesser-known features and show you what they can do for your development process.

Reference HTML elements

One of the lesser-known features of Chrome DevTools is the ability to reference HTML elements. This can be done in two easy steps:

1. Open the Chrome DevTools and navigate to the Elements view.
2. Right-click on the element you want to reference and choose Store as global variable.

Now you have the reference to the HTML element that you can access and inspect in your console.

Logpoints

Logpoints are a way of providing debug information to the console without having to resort to console.log(). I've been using Logpoints since I first heard about this feature, they allow me to clean up my codebase of the detritus of console.log statements.

You can add a new Logpoint by right-clicking any line in the sources tab of the DevTools and specifying an expression you’d like to log. When that line is executed, you’ll get its value in your console.

Live expressions

Live expression is a feature that shows the value of an expression as it changes. This is helpful for tracking down issues with costly expressions (like those used in animation) or those…