undefined | Better HN

0 pointshairui6y ago0 comments

I hear this dev tools argument occasionally, but I don't really get it. The Firefox dev tools seem just as good to me. What am I missing?

0 comments

TimTheTinker6y ago

Oh man, where do I begin?

- workspaces. This allows updating live code (JS, CSS, and languages that compile to them) without refreshing. Also allows editing and saving source files in place from DevTools, including CSS changes in the element inspector. It effectively turns DevTools into its own IDE. You can open, edit, and save any file from the workspace, regardless of whether it’s been requested/loaded by the web app.

- breakpoints on much more than just a particular line of JS. Set JS breakpoints on particular DOM and page events (including pre-navigation), XHR/fetch requests with a matching URL, and other exotic things. Find out where in the code a particular action is originating.

- hover info during debugging: lots of extended info available, like which JS file this function is defined in, or direct access to variables in the lexical scope(s) of a function

- stack traces that span async invocation boundaries, even fetch/XHR call to response

I’m sure there are others, but those are the big ones for me.

com2kid6y ago

I debug in chrome daily and I didn't know it could do any of that.

I do however know that when working with my SPA compiled with webpack that the chrome debugger will try to open the giant chunk.js file and freeze chrome until I close the debugger and that everytime after the source tab is opened it'll freeze. Only fix is to open the debugger to another tab and then control-p to open another file.

Rather silly annoyance.

Source being reloaded on change is so-so reliable. Sometimes I have to close the debugger and reopen, sometimes refresh, and sometimes chrome thinks 2+ filed with the same name exist and starts setting breakpoints in the wrong version and nothing gets hit.

j / k navigate · click thread line to collapse