DevTools recap

Which features of DevTools matter as you grow your developer skills?

drawing pencils in a jar Photo by Debby Hudson on Unsplash

This is an opinionated walkthrough of the most important Chrome DevTools features and when you should learn about them.

Agenda

✅ Must know

If you've just started with FrontEnd development I recommend learning about:

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.

3) Console

The console let's you view logs, errors & even run code. It also has a couple of handy features:

Chrome's handy console features

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

Navigate between source files

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.

Device emulation for testing website responsiveness

👌 Should know

If you want to start working on more "real" project than you should know about:

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! 😡

3) Audits

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.

Auditing a website in Chrome

Sensors

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.

Emualting GeoLocation in Chrome

🥂 Good to know

For apps that push the boundary of performance or accessibility:

1) Performance

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.

Shipping lots of code, especially JavaScript, is costly so let's be more responsible towards our users and split it up.

Coverage report of the DevDrive website

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! 🍪

PWA debugging in Chrome

4) Accessibility

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.

Accessibility debugging in Chrome

🤓 Nerd material

Finally, total NERD material 🤓 Thinks I never used but made me go: "Wow, that's cool! 🔥"

1) Workspaces

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! ❤

Use chrome as an IDE with workspaces

2) Animations

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 :)

Debug animations in Chrome

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. 😂

Secret experiments in Chrome

Cheers! 🥂

Portrait of Pava
hey there!

I am Pava, a front end developer, speaker and trainer located in Iasi, Romania. If you enjoyed this, maybe we can work together?