Advanced Frontend Debugging with DevTools Beyond Console.log by Trung Vo
As a web developer, you're no stranger to the browser and the trusty console.log in your debugging process. But did you know that browser DevTools offer a wealth of features beyond the basics? In this talk, we'll uncover the untapped potential of DevTools, exploring powerful tricks and lesser-known tools that can revolutionise your debugging experience. From debugging hidden elements to leveraging Visual Coverage, Animation Timeline, Performance panels, Web Vitals metrics and beyond, you'll discover features that simplify your workflow and boost your productivity. Many of us miss out on essential DevTools features simply because we assume they're common knowledge. This talk is your chance to gain a fresh perspective. Think of it as an information buffet—I'll present a variety of tools, and you can pick what suits your needs. Let's dive in with an open mind and transform the way you work with DevTools!
Links and resources
https://trungvose.com/jsbkk24
0:00 | Introduction and DevTools Overview
2:50 | Exploring Chrome DevTools History
4:30 | Basic DevTools Navigation and Shortcuts
6:01 | Speaker Introduction and Background
7:08 | Speaker's Company: Ascenda
7:33 | Console: The Most Accessible DevTools Tool
9:13 | Logpoints: Console Logging Without Code Changes
12:49 | Changing Program Behavior On-the-Fly with Conditional Breakpoints
17:34 | Understanding console.dir for DOM Objects
18:54 | Measuring Execution Time with console.time and console.timeEnd
21:50 | console.table and Other Console Utilities
22:08 | DOM Element Selection Shortcuts: $, $$, $0
24:18 | Styling Console Output with CSS
26:21 | Understanding and Clearing Cache in DevTools
33:08 | Snippets: Storing and Reusing Code in DevTools
35:48 | Understanding Console Messages with AI Assistance
39:25 | Wrap Up and Q&A
--------------------------------------------
Event: JavaScript Bangkok 2.0.0
https://javascriptbangkok.com/
Organized by: Software Developer Community
https://javascriptbangkok.com
--------------------------------------------
Recorded by LiveTubeX and published by Creatorsgarten.
https://www.livetubex.com/
Website:
https://creatorsgarten.org
Facebook:
/ creatorsgarten
Please consider supporting us by subscribing to the channel, and follow upcoming events via our Facebook pages.
For reuse of this video under a more permissive license please get in touch with us. The speakers retain the copyright for their performances.
[email protected]
Want to read the full transcript or spotted an error? Visit our site where you can report inaccuracies in subtitles or help improve video metadata.
https://grtn.org/v/jsbkk2/devtools