”Google Chrome might be the most used piece of software a front-end engineer uses, therefore It's useful to know ALL the ins and outs of the browser as an IDE
The Google Chrome DevTools are quite possibly the most important tool in a web developer’s toolset for delivering quality code. For most of us, it’s become part of our daily workflow, from testing to even borderline developing right in the comfort of the same browser that many of our end users use. With that said here are my favorite hidden workflow gems to help you get the most out of the Google Chrome DevTools. Best of all these are all out of the box with NO additional extensions, hopefully sparking your curiosity to wonder what else can DevTools do?
Let’s go do down the list and see how many you know!
1. The Search panel – “CTRL + SHIFT + S “, not the “Source” Panel:
Ever had the frustrating task of trying to find a rogue CSS class or js method? Maybe you’re looking for a method name called on a button? I’m sure we’ve all used the sources panel to try to and find items, however, did you know that chrome has a GLOBAL search (similar to what you might see in visual studio code)? Yes, that’s right, simply press “CTRL+SHIFT+S” to reveal an extremely powerful and fast search that should be used in everyone’s daily workflow.
Oddly enough this feature is a bit tucked away 😉 If you can’t find it go to the three dots in the top right of chrome dev tools and then look for “search”.
2. $0 to easily reference dom elements:
Have you ever want to target an element to potentially run JS code on it via the console? Want to save some time and focus more on the logic? Well Chrome dev tools will automatically reference the last selected element via the “$0” pointer.
Chrome actually keeps track of the last 5 elements 😉 so feel free to test $0,$1,$2,$3,$4 Check it out!
3. There’s a freaking Task Manager in Chrome
Yes, that’s right there’s a task manager inside Chrome. Ever have one tab that is running poorly? Or curious what THE HECK is slowing is sucking up all your PC resources? EASY check out this video 🙂
Simple go to “> More tools > Task Manager”
4. Right clicking network activity – WOW that’s a lot of options:
Have you ever been frustrated with an API’s response? Or maybe you might be curious about its contents. You can “right-click” the network activity items and copy the raw JSON, or even copy as a PowerShell CMD and more. There is a legitimate swiss army knife of tools that will come in handy for just about any job. Personally, I use the copy “response” all the time when I inspect JSON.
5. Pinned Expressions, allow you to always keep an eye on a value:
Expressions allow us to pin and watch variables right in the console. If you are familiar with watch functionality when debugging then you know just how incredibly useful this can be, however being that they are expressions they can have additional logic! This is a relatively new feature and I expect it to grow more in popularity the more developers learn about it. Just hit the eye and evaluate!
Read more here from the official google blog
6. Animations pane, don’t be afraid of it – be your own director
The animations pane is simply amazing, it feels as though I’m in a high-end video editor when I play with it. Why is it useful? You can actually work WITH your animations to polish them, or better yet understand WHY a CSS3 animation is buggy. Simply open the animations pane via the three dots in the top right of your DevTool “settings” and it will automatically start listening for animations.
All it takes to begin is to play with your site’s functionality and it will be recorded. From here you can replay, slow down, even reverse the animations FRAME-BY-FRAME.
It is highly recommended to read more documentation at the official google blog here.
7. There is a quick and easy “accessibility” tab in chrome:
Web accessibility is something I’ve personally seen getting more and more attention (especially at SPS), we as an industry still have a long ways to go but making the process easier for developers is important too. Of course, there are many tools for testing accessibility out on the web, but in a pinch did you know google dev tools have a little “accessibility“ tab? Simple highlight an element and see what metadata gets picked up!
8. Snippets, don’t overlook them:
I could write an entire blog post just regarding snippets – this is just supposed to be an overview but DO NOT overlook the chrome “Snippets” section in sources. It’s incredibly useful and there are supporting repos and sites that have “ready to run” snippets that will have you up and running in no time. Above in the screen recording, I’m running a snippet to give me EVERY color displayed on the current website. Once you get comfortable with making them just imagine all the possibilities for how snippets could aid in a workflow.
Take the example snippet above that logs out ALL colors on a webpage, want to know if your site is in style compliance? Well, know you can in a snap, just run the snippet!
It’s highly recommended to check out the curated selection of devtool snippets here
And for even more check out the official Google developer blog documentation here
9. Trying to find a specific event? How about this example, “Why does my button trigger twice?”
Speaking for myself I have been shamefully unaware of the power of the “Event Listener Breakpoints” panel within the sources tab. There is quite a lot of functionality to play with but let’s take one scenario to show how powerful they are. Want to hunt down an annoying repeating “click” function that gets triggered twice? Simply target the “click” event on the mouse and the next event that was subscribed will be automatically revealed in the debug tools waiting at a breakpoint for you to investigate!
I highly recommend this video to learn more!!
10. Dark Themes, Give your eyes a vacation
Lastly, you might have been wondering why is my Dev Tools so dark during this article? Well, there is a dark theme for those interested – I swapped to a dark mode theme and my eyes at the end of the day thank me for using it. To change the theme do the following:
- At the top right, tap More Settings Themes.
- Go to themes (it will launch in a new tab)
- Pick a cool theme, hit “Add to chrome”
There are MANY THEMES TO TRY – check them out here