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:
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:
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:
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.
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.
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:
Now, whenever the applyUgly method is called dev tools will tell us in the console.
Whenever we want to stop watching the method, we just call unmonitor.
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.
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.
- Chrome DevTools is a robust set of tools to help today’s developers be more productive.
- Some of these tools are only available for use in the console and not from your scripts.
- $ and $$ are shortcuts for document.querySelector() and document.querySelectorAll() respectively.
- The inspect() function will jump you to any DOM element in the elements tab that you can target with a CSS selector.
- 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.
- The keys() and values() functions allow you to query the objects on your page for the information they contain.
- 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.