7 ms·

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

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?

starik36 7y ago
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.
- kaycebasques 7y ago
  > 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)
  - starik36 7y ago
    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 https://i.imgur.com/Ts3Ygk5.png And yes, referring to the event bubble next to the element.
hcs 7y ago
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&component=General 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)
- chupasaurus 7y ago
  They are handling bugs through Github issues too, everything is under DevTools org (https://github.com/firefox-devtools https://github.com/firefox-devtools)
  - digitarald 7y ago
    Article author here. We are monitoring both, but are recently managing all our work in bugzilla.
philliphaydon 7y ago
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.
- dhimes 7y ago
  Chrome also has CSS media rendering debug capabilities. I couldn't find these on FF.
- digitarald 7y ago
  fyi, we are picking up the websocket work this summer; so first parts might show up in 69, latest 70.
  - vanilla_nut 7y ago
    That's wonderful to hear! Websockets have definitely been a pain point for me trying to use FF dev tools in the past.
Vinnl 7y ago
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.
styfle 7y ago
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?
phreack 7y ago
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.
- digitarald 7y ago
  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.
ptasker 7y ago
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.
- digitarald 7y ago
  Was this with 68? If so, could you share specific around what felt buggy.
digitarald 7y ago
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.

starik36 7y ago

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.

kaycebasques 7y ago
> 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)
- starik36 7y ago
  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 https://i.imgur.com/Ts3Ygk5.png And yes, referring to the event bubble next to the element.

hcs 7y ago

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&component=General 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)

chupasaurus 7y ago
They are handling bugs through Github issues too, everything is under DevTools org (https://github.com/firefox-devtools https://github.com/firefox-devtools)
- digitarald 7y ago
  Article author here. We are monitoring both, but are recently managing all our work in bugzilla.

philliphaydon 7y ago

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.

dhimes 7y ago
Chrome also has CSS media rendering debug capabilities. I couldn't find these on FF.
digitarald 7y ago
fyi, we are picking up the websocket work this summer; so first parts might show up in 69, latest 70.
- vanilla_nut 7y ago
  That's wonderful to hear! Websockets have definitely been a pain point for me trying to use FF dev tools in the past.

Vinnl 7y ago

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.

styfle 7y ago

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?

phreack 7y ago

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.

digitarald 7y ago
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.

ptasker 7y ago

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.

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

digitarald 7y ago

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.