5 Chrome DevTools Utilities You Need to Know

Alex Ritzcovan
Jan 13, 2020 · 4 min read
Image for post
Image for post
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.

Image for post
Image for post

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:

Image for post
Image for post
$ 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:

Image for post
Image for post
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.

Image for post
Image for post
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:

Image for post
Image for post
Let’s watch the applyUgly method

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

Image for post
Image for post
applyUgly method called

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

Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
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.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store