Chrome DevTools debugging tips and tricks: inspecting elements, live expressions & code breakpoints

Learn how to debug your web app effectively with Chrome DevTools. Inspect and modify components, create watch expressions to monitor runtime values, and debug TypeScript sources directly in your browser.

Shortcuts:
0:00 - Intro
0:36 - How to open Chrome DevTools
1:09 - Inspecting an element and accessing it through the console
1:58 - Use live expressions to monitor runtime values
3:05 - Debugging source files (TypeScript/JavaScript)
3:40 - Changing values while debugging
3:46 - Debug controls

[BernardLeech]

A quick way to open your file on a mac: In devtools, CMD + P to open the file search input. Then type your file name and choose from the list. Similar to how VSCode does it.

[Japhu]

But how do I find out where to set my breakpoint?
I have a UI app infront of me and I want to debug a specific button but that code base has hundred thousands line of code and I don't know where to set the br

[PrashantKumar-endv]

Hi marcus, when I inspect on google chrome in my system I don't see that red dot breakpoint, instead there is a rectangular blue breakpoint, is this because of chrome version or different type of breakpoint shown here...?

[bamboo]

So you';re basically telling people how to inspect a web page?