Introduction
As web developers, especially those in the front-end arena, we practically live inside our web browsers, constantly tweaking, inspecting, and fine-tuning our code. It's the digital playground where our ideas come to life, and as engineers, we're always on the lookout for ways to streamline our workflow. That's where keyboard shortcuts and nifty methods come to the rescue!
So, let’s explore some cool and oh-so-handy tricks I've picked up using Chrome Dev Tools.
Referencing DOM Nodes ($0 - $4)
Ever wished you could keep track of the DOM elements you've been poking and prodding? Well, guess what, you totally can! Chrome Dev Tools lets you store references to the last five DOM nodes you've inspected, and they've got fancy labels: $0, $1, $2, $3, and $4.
But wait, there's more. You can also store these references in variables and do some serious node manipulation:
const p = $0
// contains <p>...</p>
p.offsetHeight
// 60
p.classList
// ['my-p-class']
Reference a Last Inspected React Element
Now, if you're deep into React development, you're in for a treat. With React Dev Tools, you can snag the reference to the last inspected React element using $r. It's like having access to your virtual DOM.
With this reference, you can dive into the element's props and methods like a pro.
Get Keys or Values of an Object
Chrome Dev Tools has your back when it comes to dealing with objects. They've whipped up some nifty shortcuts for Object.keys() and Object.values().
Here's the lowdown:
const myObject = { name: 'Dead Code', twitter: '@imdeadcode' };
keys(myObject); // ["name", "twitter"]
values(myObject); // ["Dead Code", "@imdeadcode"]
Handy, right? Especially when you're navigating through nested objects in API responses. Just remember, these shortcuts are console-exclusive; don't try to sneak them into your scripts—they won't have it.
$_ Reference the Last Expression
Ever wish you could grab the result of the last thing you did in the console? Well, now you can with $_.
Behold:
4 + 5; // 9
$_ + 1; // 10
It's a real time-saver when you're tinkering with functions or diving deep into complex data structures.
Shortcut for document.querySelector
If you're a jQuery whiz (or even if you're not), you'll love this one. $() is your shortcut to document.querySelector(). It snags you the first DOM element that matches your CSS selector, just like old times.
For example:
const firstTitle = console.log($('h3').innerText);
And if you ever get lost, you can always right-click the element and hit "Reveal in Elements Panel" to find it in the DOM tree.
Shortcut for document.querySelectorAll
If you're dealing with multiple elements, $$(selector) is your go-to shortcut for document.querySelectorAll(). It returns an array of all the matching elements, making your life a whole lot easier.
Check it out:
const titles = $$('h3');
for (let i = 0; i < titles.length; i++) {
console.log(titles[i].innerText);
}
Quick heads up: If you're using jQuery and it's also using $, you might have a showdown on your hands!
Copy from the Console
Sometimes, you need to grab stuff from the console and paste it elsewhere. copy() is your new best friend. It takes an object and turns it into a copy-paste-ready string.
copy($('img').src);
copy($('h1').innerText);
// Get data from local storage
copy(localStorage.getItem('todos'));
Now you can paste the info anywhere you like. Pro tip: When testing APIs and your token is chilling in localStorage, copy that token and use it with tools like Postman for seamless requests.
Beautify Your Code { }
We all love a good JavaScript minifier, but sometimes minified code is like reading hieroglyphics. That's where Pretty Print swoops in to save the day, making your code human-friendly again!
Go to Sources, then pick a JS file with minified code in the left bar, and then click on the { } to prettify the code:
Chrome Dev Tools has loads more tricks up its sleeve. Feel free to drop a comment and share your favorite features or how you use the ones I've mentioned to conquer your coding challenges.
Honestly, I can't imagine a world of web development without Chrome Dev Tools. Happy hacking, everyone! 🚀