Talk
Intermediate

DevTools tricks you’ll wonder how you coded without.

Approved

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.


None
https://developer.chrome.com/docs/devtools/
FOSS
Deveesh Shetty
Volunteer FOSS United Mangalore Chapter
Speaker Image
100 %
Approvability
3
Approvals
0
Rejections
0
Not Sure
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