Which features of DevTools matter as you grow your developer skills?
This is an opinionated walkthrough of the most important Chrome DevTools features and when you should learn about them.
✅ Must know
If you've just started with FrontEnd development I recommend learning about:
- elements & styles panels
- networking tab
- sources panel
- device emulation
1) Elements & styles panels
The elements & styles panel is great for seeing & editing the Elements into which the HTML gets transformed. The styles one shows the entire style cascade for a selected element, which helps in fixing selector priority bugs like:
Why is my paragraph red instead of blue?
2) Networking tab
Knowing how to inspect the network is a valuable skill right from the beginning. True, you might not do API request from the get-go but, it will help you fix bugs like:
Why isn't my CSS being applied?
Probably it's a typo in the path which means you'll see the related 404 error.
The console let's you view logs, errors & even run code. It also has a couple of handy features:
- 2 shorthand methods $ and $$ which work like querySelector and querySelectorAll
- 5 variables called $0, $1, $2, $3, $4 which reference the last 5 selected DOM elements
4) Sources panel
The sources panel let's you easily debug the app and thus you'll find bugs much faster than the `let's log everything` method! Plus you can navigate between files just like in an IDE with Ctrl/Command + P
5) Device emulation
And finally device emulation. It's no secret that responsive websites are a must in today's world so with this tool we can more easily test the looks and feel of our apps.
👌 Should know
If you want to start working on more "real" project than you should know about:
- application panel
- node & remote debugging
1) Application panel
The application panel has a lot of stuff but what's important at this level are all the ways of storing data client side: Session/Local storage, Cookies & IndexedDB. You'll definitely need them for authentication or for persisting data in case of offline use via Service Workers.
Get familiar with them!
2) Node & remote debugging
Back to debugging but now we're going to the next level. Did you know you can debug node.js code right in the browser? And even remote devices (aka: Android Phones/Tablets) .
Before knowing this I would debug on mobile by using alerts and let me tell you, it SUCKS! 😡
The audits panel is of great help for giving you a second opinion on your website. It used to be a separate extension but now it's right there in DevTools so it's easier than ever to see where you lack behind and improve upon their feedback.
Chrome can also mock the Geo Location information for you, in case you have a feature that needs to be tested as if you're in a different part of the world.
🥂 Good to know
For apps that push the boundary of performance or accessibility:
- performance tab
- coverage view
- pwa debugging
The performance tab is pretty damn scary at first but gets better with time 😂
In short, it captures a very special recording of our app regarding FPS, CPU, Network waterfall, Memory allocation and even a detailed step-by-step of what the browser does at each moment.
Although the audits tab might show a lack in performance, it's the performance tab which helps you actually pin point the problem and fix it.
2) Code coverage
The coverage panel shows how much of the code we ship is actually ran by our users.
3) Progressive Web Apps
PWAs bring a ton of possibilities to our apps and thus we need different ways of debugging/testing those. Thankfully in the application tab Chrome has a Manifest and Service Workers sub tabs which make things super sweeet! 🍪
Finally accessibility! To be honest only a couple of days ago I installed my very first screen reader to see the Web from the other side, so I'm not really that knowledgeable. But I'll share what I do know so far and that's the accessibility panel Chrome provides.
🤓 Nerd material
Finally, total NERD material 🤓 Thinks I never used but made me go: "Wow, that's cool! 🔥"
- animations panel
- secret experiments
Workspaces are about allowing us to use Chrome as an IDE. Just drag-and-drop a folder into the sources panel, edit it in browser and Chrome will persist the changes on disk.
No, really! ❤
If you're into complex animations, than check out the panel dedicated for them. It has a nice UI for visually editing them. I personally never used it but still, pretty cool :)
3) Secret experiments
And finally, the secret experiements! 🤓 These are upcoming DevTool features which we can use right now, although at our own risk because they're not totally stable.
PS: press Shift 6-7 times and a bunch of UBER TOP SECRET experiements will appear. 😂