As web developers, we use Chrome DevTools all the time. But do we really know how to use it? More than all the things others keep talking about? It is not about being the coolest guy in the room; it's about being more productive than ever. So you can enjoy your lunch better or spend more time with your family.
To get a reference of an element
Consider we want to reference the element below in the console.
In this case, it's more than easy to do:
document.querySelector('.SDkEP');
// or alternatively
document.getElementsByClassName('SDkEP')[0];
as the element have a unique class name SDkEP.
However, things get challenging when the page relies heavily on a Tailwind CSS-like framework.
There's no unique ID or class name, or a unique data-* attribute, as seen below.
Yes, we know that there should only be one <h1> element on a page. But how about the others? There are three ways to get a reference to an element.
First, we add ourselves a unique attribute to the element. It sounds perversely counterintuitive as we need to make sure no one else has the same identifier.
The second way is to copy the element's path, either JS path or XPath.
Copying the JS path will give us something like this:
document.querySelector("body > div > div > div.grid.min-h-dvh.grid-cols-1.grid-rows-\\[1fr_1px_auto_1px_auto\\].justify-center.pt-14\\.25.\\[--gutter-width\\:2\\.5rem\\].lg\\:grid-cols-\\[var\\(--gutter-width\\)_minmax\\(0\\,var\\(--breakpoint-2xl\\)\\)_var\\(--gutter-width\\)\\] > div.text-gray-950.dark\\:text-white > div > div:nth-child(2) > h1")
While copying the XPath will give us: /html/body/div/div/div[2]/div[2]/div/div[2]/h1. Which can be used in the console as follows:
document.evaluate("/html/body/div/div/div[2]/div[2]/div/div[2]/h1", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue
An easier way, the third one, is to reference it by using $0 selector while the element is being selected—the target element is getting highlighted in blue in the Elements panel.
Cool, right? There's one more option. Did you see Store as global variable in the right-click menu?
It'll throw away temp1 in the console which we can use to reference the element later. Storing another element will create a new variable named temp2 in the console and so on.
These functionalities are also available in the Firefox's Developer Tools, but under different names. Try to find them right away.
Shortcuts? There's a better one!
We love shortcuts. They are very helpful. But at the same time, memorizing them is not an easy thing. In addition, having a shortcut for everything is not effective, often making difficult.
Someone may suggest creating our own shortcuts. The problem is there are so many action names that start with specific letters; is it Ctrl+H, Alt+H or Ctrl+Shift+H? What about other actions that start with the same letter? We'll soon run out of combinations. Worse, most of the shortcuts aren't intuitive. Even worse, they aren't consistent across software, even if they're developed by the same company or developed in the same franchise group.
I don't think this is anything new to you, we called it Command Menu or Command Palette, which appears when you press Ctrl+Shift+P.
Here are my favorite commands:
- Disable/enable DOM word wrap
- Enable/disable fast/slow 3G throttling
- Go offline/online
- Collect garbage
- Emulate CSS prefers-color-scheme
- Emulate achromatiopsia or else
- Show frames per second (FPS) meter
Some commands can be found in the non-opened panel and others can only be accessed by going to Settings page, which takes time.
By the way, did you notice the > symbol after the Run label in the above screenshot? Pressing backspace button will give us access to all loaded resources of the web page, in which can also be found in the Sources panel.
Pretty useful, isn't it? In the next article of this series, we'll discover more useful tips on the way to become more productive.