The tools we use to author web pages have significantly evolved from the past, and it can be easy to overlook new features.

In this post, I'll talk about some of my favorite lesser-known features, and also how you can keep up-to-date with new features.

The debugger and profiler have great documentation, so I'm not going to discuss them here.

I mostly use Chrome DevTools, but Firefox Developer Edition is also great. I'll include a few Firefox tips in here too, so more people are encouraged to test in Firefox :)

The console

In the console, there's lot of utilities that aren't easy to find:

• $0 - the Element you have selected in the inspector. $1 refers to the previous node selected. This works all the way up to $4.
• $_ - the return value of the last command you executed in the console (just like Bash).
• copy($_) - Copies any string (or stringifiable object) to the clipboard. You can substitute anything in place of $_ here.
• $/$$ - document.querySelector/document.querySelectorAll respectively. If the webpage you're inspecting includes jQuery, it may override this.
• Ctrl+L clears the console (just like Bash).

I recommended reviewing the docs, they're short and document everything: docs.

The console object has a lot of cool helpers, which I use a lot when writing code. I personally use console.group('my-group-name') and console.groupEnd('my-group-name') a lot when logging multiple things across various functions.

Some others are console.dir, console.table, but you might find a few more in the docs.

Keyboard shortcuts

If you want to share a screenshot with someone, but need to redact some data, you can press "H" when selecting an element. This will add visibility: hidden !important; to an element. This will preserve the layout, but only visually hide the element. You can also press "Backspace" if you'd like to delete the element entirely.

Press "F8" to manually trigger a debugger. Cmd+\ also works, but I use this shortcut to open 1Password. JavaScript execution, along with the UI thread, halts. Now, you can check local state in the debugger.

Press F1 (Fn+F1 on Mac) to access advanced settings. I use this frequently to add a new device preset.

When editing a numeric CSS value, use Shift+Arrow, or Alt+Arrow to manipulate values more precisely.

The network tab

If you choose expanded rows, you can see the Gzipped size compared to the actual size. This is great for a quick sanity check.

You can right click a row, and click "Copy as cURL" to repeat the same request in your terminal. This is great if you need to quickly tweak a few HTTP headers before retrying the request. No need for extra tools like Postman.

Testing errors is important, and DevTools makes this really easy. You can enable request blocking, and type in patterns of URLs to block. This is great for URLs that include unique identifiers, as you can just use a wildcard (*) in order to catch these too.

Firefox DevTools offers some really cool stuff here, such as editing and resending a request without having to invoke cURL.

The filtering section is quite powerful. I recommend reading the docs, but I frequently include filters like method:POST and -.css -.js -.svg to exclude requests that may not be applicable to me.

For large JSON responses, you can easily store responses as global variables that are accessible in the console.

The command palette

Just like your text editor, DevTools supports the command palette (Cmd+Shift+P on Mac). If you can't find something, type it in, and something will likely come up. I use this frequently to screenshot a specific node on a page.

Keeping up to date with new tools

After every major Chrome update, your console will show a "What's new" tab that discusses the latest features. It's easy to ignore and close, but I recommend reviewing it. Chrome developers publish a lot of articles on what changes from version to version. You can review the historical changes by navigating through the tabs on this page.

You can take this one step further by bookmarking the Chrome Platform Status page to find features that may be interesting to you.

I also recommend following @ChromeDevTools on Twitter. They're very responsive, and often ask the community what features they'd like.

Other thoughts

DevTools also has a symbiotic relationship with your web infrastructure. Updating your transpilation strategy to provide useful sourcemaps that DevTools can understand is important, and this can be difficult if you don't have a robust build pipeline. An article I wrote has some tidbits about web infrastructure, check it out here