Breakpoints and logpoints

Discover 5 different ways to debug your code beyond console.log - Discover the breakpoints, debugger statements, logpoints, conditional breakpoints, including pause at exceptions.
Chapters:
0:00 Introduction
0:18 Breakpoints
0:24 Cleaning up call stack
0:34 Live edit in the Scope pane
0:42 Live edit in the Console
0:52 debugger statement
1:02 Never pause here
1:18 Conditional breakpoints
1:56 Logpoints
2:25 Pause at exceptions
Resources:
Learn more → goo.gle/devtools-breakpoints
Demo → goo.gle/3mzWTmE
Questions? Tweet to us:
Jecelyn Yeen → goo.gle/jecfish
Chrome DevTools → goo.gle/chromedevtools
Catch more DevTools Tips → goo.gle/DevToolsTips
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#DevToolsTips

[@ChromeDevs]

Subscribe for the latest → goo.gle/ChromeDevs

[@user-hc4ci1yq1z]

the 'for loop' conditional breakpoint is mind blowing! it will save me a lot of time if i had to run a "huge" loop in my JS code next time. I wonder if this is a common feature if other types of programming languages.

[@bendtherules0]

"Never pause here" is a very innovative use for conditional breakpoints. I didn't know that breakpoint condition overrides debugger statements (many websites use debugger statements to make it harder to see this code).

[@RiccardoMares]

My preferred debugging trick is the "overrides" feature :)
I love it, because - as a SEO - I usually debug on sites where I can't edit the source code.
It's the best way to suggest modifications to devs who couldn't find them ;)

[@runthecode_]

Log points and conditional breakpoints are sick 🔥

[@sle6423]

Logpoints are my favorite, especially when debugging focus issues

[@krasimirk]

great explain. especially for the conditional breakpoints !

[@sagormajomder]

Great explanation! Thank you

[@barusuuu]

great and easy to following video, thanks!

[@StephenChapman]

As someone deeply interested in reverse engineering web apps, all these recent changes to the debugger are incredibly useful! Thank you for covering them!

[@jecjecfish]

Hey Stephen, I am curious to knw which new debugging features are helpful for you!

[@StephenChapman]

​@@jecjecfish Hey, Jecelyn! Conditional BPs are really a game-changer for me. That, and the ability to have header local overrides! As for debugging, anything that gets DevTools closer to the core functionality of, say, x64dbg, is a huge boon for me. I spend a lot of time debugging webapps and Electron apps these days (I come from a world of reversing win32 apps), so features like conditional breakpoints are incredibly useful for me!
If I had ONE single feature request, it would be the ability to have app-wide/side-wide memory scanning functionality for values (perhaps within the Memory tab). I imagine this as perhaps taking a snapshot of the current state of the app first, then scanning all of it for a specified value. For instance, if I know there's a truncated float value of 9999 or a string value of 'jecjecfish', I'd specify that value for my search, then any results would be returned from wherever that value is found -- whether it's in the heap, the comment of a source file, the rendered HTML, a cookie, a query param from a request that happened, local/session storage -- anywhere!
I understand that's no small feat, and it's probably too edge-case of a feature to ever see, but it would save me so much time that I currently spend searching for certain values -- especially ones that reside in the heap where I seemingly cannot search the results for an exact value (say, 9999) irrespective of where it's instantiated (say, a class name of _0xbeefee).
Anyway, thank you so much for the videos you do and information you share! I'm a regular lurker, but all these new debugger features have me super-excited. =)

[@ariosetiawan173]

This really really useful Thanksssss

[@abdulkhader567]

OMG, conditional breakpoints, this is awesome.

[@MD-zn1jz]

How to use a helper function with a console log and see when the helper function was called but not when console log call inside helper?

[@christopherderrell8470]

Lol, love the shirt! 😂

[@user-gu5ts5nx8r]

very useful

[@eloka9015]

I feel like i'm never going to understand this.

[@veber88]

Im debuuging in the head. You all are wick by using developer tools to debug smth.

[@lllllllllIIIIIIIIIIl]

... What?

[@user-io4dy9vz5v]

thanks for not explaining anything

[@user-nd7wv4jy8g]

not helpful

[@iiiftttcc-by-sa4.o6224-]

00:36 ขอบคุณวีดีโอของคุณที่นำเสนอ google โครมให้ผู้คนเข้าใจผมได้เข้ามาชมวีดีโอของคุณแล้วคุณทำได้ดีมาก👍✨👈