5 Chrome DevTools Utilities You Need to Know

Alex Ritzcovan
Jan 13 · 4 min read
Photo by Zan on Unsplash

Google Chrome provides a robust set of tools built right into the browser affectionately called Chrome DevTools. These tools are updated all the time by the Chrome dev team so sometimes it pays to poke around on the DevTools site to see what’s new.

Some of the lesser-known features fall under the console utility API. That means that they are only available for use in the console within Chrome. You cannot use these features from your scripts.

Here are 5 of my favorite tools provided by the DevTools team.

1. $ and $$

These 2 guys are aliases. A single $ is a shortcut for document.querySelector() and a double $$ is a shortcut for document.querySelectorAll().

Let’s say we have a simple HTML document that looks like this:

our HTML doc

And lets further speculate that we wanted to select the first button from this document as well as a collection of all the buttons. Take a look at this:

$ and $$ in action!

Pretty cool right? and built right into Chrome. The single $ returns one element while the $$ returns the collection.

Please note that if you’re using a library like jQuery that will assign another value to $, that will overwrite the built-in functionality.

2. The inspect() function

This one can be used hand-in-hand with number 1. Let’s say that our HTML document is huge ( as many of them are ) and we would like to select a button in the HTML from the console. If we enter the following:

console tab — call inspect() function passing selector

As soon as we press enter, DevTools will switch from the Console tab to the Elements tab and highlight the HTML element that was selected.

elements tab highlighting selected element

You can see here that we have successfully selected the first button.

We can use the $$ shortcut with inspect() as well. It will display a list of matches in the console and we can click one to jump to it in the DOM.

Super handy!

3. monitor / unmonitor

If we want to track when a method is called on our page we can use the monitor() function. Take a look at the following code sample paying attention to the methods object.

I created this example using Vue.js but for our purposes that isn’t important. What I want to do is monitor when the applyUgly() method is called. To do that I enter the following in the console:

Let’s watch the applyUgly method

Now, whenever the applyUgly method is called dev tools will tell us in the console.

applyUgly method called

Whenever we want to stop watching the method, we just call unmonitor.

lets unmonitor applyUgly

4. keys/values

This one is useful for quickly seeing what an object is made up of. Let’s say we have the following simple object.

Using keys() and values() we can extract just that or we can display both the keys and values by calling the object directly as shown below.

different ways to get data from our object

5. table

Last but not least we have the table() function. Using the same object we used for number 4 above, if we pass it to table(), we get the following in the console.

Nice table representation of our object

Key takeaways

  1. Chrome DevTools is a robust set of tools to help today’s developers be more productive.
  2. Some of these tools are only available for use in the console and not from your scripts.
  3. $ and $$ are shortcuts for document.querySelector() and document.querySelectorAll() respectively.
  4. The inspect() function will jump you to any DOM element in the elements tab that you can target with a CSS selector.
  5. The monitor() and unmonitor() functions allow you to be alerted whenever a method is called by writing a message to the console. The message contains information about the arguments passed to the method.
  6. The keys() and values() functions allow you to query the objects on your page for the information they contain.
  7. The table() function provides a nice table representation of any object you pass to it.

As always, thanks for reading and please check out my other posts here on Medium.

DailyJS

JavaScript news and opinion.

Alex Ritzcovan

Written by

Senior software consultant, writer, husband, and father. I enjoy coding, photography, and sharing what I learn with others.

DailyJS

DailyJS

JavaScript news and opinion.

More From Medium

More from DailyJS

More from DailyJS

More from DailyJS

Samantha Ming
Feb 4 · 4 min read

411

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade