Talk Intermediate

DevTools tricks you’ll wonder how you coded without.

Approved

Session Description

I have been using browser developer tools for a long time, morely to inspect elements and to console log my code errors (I know, but it is what it is)

Recently I started messing around with browser developer tools and started exploring more and more of it, by reading docs or asking GenAI, and it is a gold mine. There are so many features and tools that I never thought existed, and they increased my productivity as a front-end developer by a good margin.

I would like to share these tricks with others, as I am pretty sure there might be a good chunk of the audience who will come across this for the first time as I did.

The features I will cover (the list might expand, but will cover it in time)

Layers tab, to manage complex layouts
CPU Performance Monitoring
Overview Network tab, Lighthouse tab, and Coverage tab
CSS Overview panel, and scroll-based fine-tuning of CSS values

P.S. Some more features I found while crafting this CFP XD.

References

https://developer.chrome.com/docs/devtools/

Session Categories

FOSS

Speakers

Deveesh Shetty

Volunteer FOSS United Mangalore Chapter

Reviews

Another nicely written CFP, Approved! Suggestion: I feel the speaker should replace Call Stack (pause/play javascript code / adding breakpoints in the scripts) and debugging should be explained to add more importance to the talk instead of CSS Overview/Scroll based fine thing. CSS is anyways just the use of some common sense and some debugging in devtools editor.

Reviewer #1 Approved

Reviewer #2 Approved

Although these topics should be well known by the senior frontend engineers but having this talk will be super beneficial for early career and mid level professionals (which usually is our audience(atleast in Delhi)! Approved.

Reviewer #3 Approved