16 OCTOBER 2018 DevTools recap

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

Photo byDebby HudsononUnsplash

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

Agenda

• Must know - features that help you from the base level
• Should know - helping you build "real life" apps
• Good to know - pushing the boundaries of performance or accessibility
• Nerd material - straight our NERD features!

✅ Must know

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

• elements & styles panels
• networking tab
• console
• 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.

3) Console

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, $4which 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
• audits
• sensors

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.

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.

🥂 Good to know

For apps that push the boundary of performance or accessibility:

• performance tab
• coverage view
• pwa debugging
• 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 tabwhich 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.

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 andService Workers sub tabs which make things super sweeet! 🍪

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.

🤓 Nerd material

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

• workspaces
• animations panel
• secret experiments

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

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

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