Faster Smarter JavaScript Debugging in Firefox DevTools

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by dlbucci on Friday May 17, 2019 @12:22AM (#19936252)

You know, I've been using Firefox Dev Edition since it was Firefox Aurora (or Beta, I guess?), and it's great to hear that they are improving the dev tools! But I have to ask this in the nicest way possible: does anyone else think the tools just don't work a lot of the time?

It's something I noticed especially when they switched to React. A few examples I frequently experience:

1) Stepping through TS frequently switches back to the source JS. 2) Breakpoints don't always go away, and sometimes a page reloads with an invisible breakpoint, that stops the code, but doesn't show up in the list of breakpoints, and doesn't seem to be removable. 3) Breakpoints don't always stop at the the right place. 4) After having the tools open for a while, the tab starts freezing for multiple seconds every few seconds (GC, according to the perf tab, so it's either my code or the dev tools)

This comes from a place of love, and I'll still always use FF over Chrome, but I really have to ask if anyone else experiences the same issues, or if it's perhaps my setup/code that causes the problems?

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by styfle on Friday May 17, 2019 @07:24AM (#19938456)

The first three bugs you listed are related to source maps. I haven’t used Firefox in a long time but I have experienced the same behavior in Chrome and VS Code when debugging TypeScript. It turns out, there was a bug in the loader that was generating source maps. Perhaps your issue is tooling and not the browser?

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by philliphaydon on Friday May 17, 2019 @01:49AM (#19936652)

I much prefer Firefox dev tools over chrome. The only time I use chrome is web socket stuff. Debugging css grids in Firefox (which I learned this year) is amazing.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by digitarald on Friday May 17, 2019 @01:41PM (#19941827)

fyi, we are picking up the websocket work this summer; so first parts might show up in 69, latest 70.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by vanilla_nut on Friday May 17, 2019 @05:05PM (#19943553)

That's wonderful to hear! Websockets have definitely been a pain point for me trying to use FF dev tools in the past.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by dhimes on Friday May 17, 2019 @08:36AM (#19938893)

Chrome also has CSS media rendering debug capabilities. I couldn't find these on FF.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by hcs on Friday May 17, 2019 @01:29AM (#19936593)

Bug reports are welcome, it may very well be something about your setup that hasn't been reported yet: https://bugzilla.mozilla.org/enter_bug.cgi?product=DevTools&...

(I'm a Mozilla dev but not involved with Devtools, though I know a few folks, happy to provide pointers if you need 'em)

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by chupasaurus on Friday May 17, 2019 @02:40AM (#19936873)

They are handling bugs through Github issues too, everything is under DevTools org (https://github.com/firefox-devtools)

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by digitarald on Friday May 17, 2019 @01:26PM (#19941676)

Article author here. We are monitoring both, but are recently managing all our work in bugzilla.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by starik36 on Friday May 17, 2019 @01:16AM (#19936533)

I've experienced the same. Sometimes inexplicable things occur in the debugger and I have to switch to Chrome.

The superior layout of the tools + handy way to quickly locate events keep me coming back.

Hopefully, the tools improve in v67.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by kaycebasques on Friday May 17, 2019 @01:53AM (#19936669)

> superior layout of the tools

Which bits?

> handy way to quickly locate events

Are you referring to how FF shows `event` next to DOM nodes?

(I am reconnoitering for Chrome DevTools so don’t answer if you view us as the storm troopers)

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by starik36 on Friday May 17, 2019 @02:38AM (#19936862)

Note the 3 pane layout vs Chrome's 2 pane. I can see more at a glance and more effective use of the monitor - plus I can see the Box Model (or Flex model) without having to scroll down. https://i.imgur.com/Ts3Ygk5.png

And yes, referring to the event bubble next to the element.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by digitarald on Friday May 17, 2019 @01:40PM (#19941815)

Article author here: You are describing a lot of issues that should be fixed. If you could try out 68 for a bit, you can help us confirm.

I will aim for another post going into more of the issues and how we fixed them and sharing some more frustrating breakage developers might have experienced and how we improved it.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by Vinnl on Friday May 17, 2019 @02:24AM (#19936793)

Your comments echo my sentiments exactly, but I do think this update is mainly about resolving these points. They've done a lot of work in recent years on a revamp of the foundations of the DevTools, and I think they're starting to pay off now.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by phreack on Friday May 17, 2019 @08:02AM (#19938672)

I actually have the opposite problem. For some reason, debugging JS with IntelliJ (where I'm most productive) doesn't work nicely on FF so I have to keep a Chrome tab open, and it's just unusable since it's determined to open a tab on Webpack's bundled file which is enormous and lags for like 10 seconds on each page reload. FF is most wonderful in comparison when I have to debug in the browser.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by digitarald on Friday May 17, 2019 @01:33PM (#19941747)

IntelliJ uses different adapters for Firefox and Chrome, so they might have side effects. We also touched a lot of our protocol APIs when adding column breakpoints, so I will reach out to see if we can improve.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by ptasker on Friday May 17, 2019 @12:12PM (#19940928)

Yup, I also tried to use the debugging tools in the new FF Dev Edition with a larger React codebase and it's a bit buggy for sure.

[ Parent | on HN ]

Re:Faster Smarter JavaScript Debugging in Firefox DevTools by digitarald on Friday May 17, 2019 @01:43PM (#19941852)

Was this with 68? If so, could you share specific around what felt buggy.

[ Parent | on HN ]