Debugging modern web applications

Developers use frameworks, multiple languages, and libraries to build their web applications. Browsers only see the resulting JS+HTML+CSS outputs though. Learn how Chrome DevTools is having their back and let them debug the web applications reliably, connecting both worlds, meeting developers where they are.
Resources:
Deeper insights on Authored/Deployed view and ignore lists → goo.gle/modern-web-debugging
Deeper insights on source maps → goo.gle/devtools-source-maps
and → goo.gle/source-maps
Deeper insights on breakpoints in Chrome DevTools → goo.gle/devtools-breakpoints
Deeper insights on the DevTools Recorder → goo.gle/devtools-recorder
All Chrome DevTools RFCs → goo.gle/devtools-rfcs
Report a Chrome DevTools bug → goo.gle/devtools-report-issue
Speaker: Michael Hablich
Watch more:
Watch all the Technical Sessions from Google I/O 2023 → goo.gle/IO23_sessions
Watch more Web Sessions → goo.gle/IO23_web
All Google I/O 2023 Sessions → goo.gle/IO23_all
Subscribe to Google Chrome Developers → goo.gle/ChromeDevs
#GoogleIO

[@ChromeDevs]

Chrome developers are waiting for your questions. Don't forget to leave them down below! 👇👇🏻👇🏿👇🏽 👇🏾👇🏼

[@babub9617]

Hi, is there a way to move breakpoints in Sources tab, when I update the code in editor, the line position changes and thus previously created breakpoint no longer point to the line I wanted and have to create a new one every single time, is there at least an easy way like dragging the breakpoint to the desired line or changing line number of breakpoint.
Dragging the breakpoint would be much useful.
And it would be useful to display contents of breakpoint when hovering them, it would be much easier to find breakpoints especially logpoints and conditional breakpoints than clicking in the breakpoints section .
Thank you.

[@sarahlight9743]

Could you please give tips to track all event listener fire by js and jquery for specific element @Ch

[@14w1ski113d]

I still kind of wish that debugging would work better in VSCode but this authored view and ignore lists are actually pretty sweet.

[@avi12]

My issue with debugging web apps is that I cannot debug them from my IDE, specifically WebStorm, if they're not in plain JavaScript

[@CirTap]

agree. it's a pita to setup and the ports are always messed up. if you have a local dev-server running the browser launches with the IDE/Chrome debug port to connect to webstorm, but no page is served 'cos the dev-(web-)server is listening to another port to server the damn stuff in the first place :)
it's just a hassle and always needs manual intervention for the URL and ports etc,
only works with Chrome/Edge anyway and can't debug WebKit or Firefox if there are errors with them :(
The latter is Mozilla's fault tho using a different debug protocol. IDE support for Firefox just suxx.

[@eluddite889]

If there ever was something we needed a tutorial for. Debugging in visual studio is way easier than debugging a TS app. It works half the time LOL.

[@patricknelson]

Worth noting: Debugging in Vite is bliss.

[@zenpool]

React server components gonna make this more complicated because the code you wrote doesn’t run on browser 😂

[@CirTap]

not just React, everthing that's recompiled doesn't work that simple, even with source maps, server or client;
guess you need to connect to Node's debug port then for any SSR (haven't tried yet)

[@patricknelson]

Sometimes the icon doesn’t always show but that’s usually easy to remedy. IIRC that’s in the Remote Debugging menu.

[@ilyayy]

Please push Recorder to Chromium

[@ilyayy]

Thank you! 🙌

[@sakesun]

There's something in the world that you don't mind to pay for even it's free.