5 Chrome DevTools Utilities You Need to Know
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:
