Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Faster Smarter JavaScript Debugging in Firefox DevTools

hacks.mozilla.org

Post reply on HN
Print view View original

21–30 of 74 posts

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#21

Post by sebazzz »

waingake wrote: post #16

Correct me if I'm wrong, but web-socket debugging in FF isn't supported? I ran into this last night, Chrome shows me what requests are going over websockets, FF does not.

I have always found Fiddler to be far more useful when debugging web traffic. It runs independently of applications, tabs, etc and allows for easy re-invocation of requests. And you can also test error handling easily by overriding the request and sending back an invalid response.

Fiddler is not the most user-friendly (it appears to be a bit thrown together), but it is very useful if you know how to find the right knobs.

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#22

Post by sebazzz »

matthewvincent wrote: post #14

Firefox dev edition has been my go to lately, highly recommended if you do a lot of markup / css debugging. Being able to see outlines around elements as I hover / scan through the DOM easily doubles my speed.

I have found the CSS "changes" tab to be very useful. Just tweak the CSS and once you're satisfied you can just view a diff and use that to modify your code base [0]

[0]: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#23

Post by kaycebasques »

hahawhat222 wrote: post #2

Inline breakpoints and human-friendly variable names are gamechangers! Looks like FF is going above and beyond Chrome devtools with this update.

We (Chrome DevTools) have had inline breakpoints since at least January 2017: https://umaar.com/dev-tips/129-inline-breakpoints/

The human-friendly variable mapping is very interesting, though. We'd love feedback on how well it works out in the wild.

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#24

Post by kaycebasques »

mnm1 wrote: post #19

FF has had more solid console and debugging tools now for almost two years and it's one of the main reasons I switched completely from Chrome. It really is a superior, more reliable experience. And the console is light years beyond chrome. I definitely recommend it.

What makes you say that FF Console is lightyears beyond Chrome? (I write the Chrome DevTools docs)

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#25

Post by 0xDEEPFAC »

afturner wrote: post #6

I'm really liking this recent uptick in Google/Mozilla/Opera development/rivalry lately. It's good for consumers. If only things happened more quickly...

Really? I generally see the opposite these days with everything moving to chromium (Opera, Chrome, Safari, and even Edge now all use it). Its kind of like a creepy consolidation.

I would say though Firefox does remain a strong (if the last) holdout.

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#26

Post by kaycebasques »

sebazzz wrote: post #22
matthewvincent wrote: post #14

Firefox dev edition has been my go to lately, highly recommended if you do a lot of markup / css debugging. Being able to see outlines around elements as I hover / scan through the DOM easily doubles my speed.

I have found the CSS "changes" tab to be very useful. Just tweak the CSS and once you're satisfied you can just view a diff and use that to modify your code base [0] [0]: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

I like FF's diff format. For anyone who hasn't seen it, they give you the old code, followed by the new code:

    /* I think they also include URL info up here */
    h1 {
      /* background-color: blue; */
      background-color: grey;
    }
We (Chrome DevTools) have a Changes tab but no nice diff export like FF. https://developers.google.com/web/updates/2018/01/devtools#c...

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#27

Post by kaycebasques »

0xDEEPFAC wrote: post #25
afturner wrote: post #6

I'm really liking this recent uptick in Google/Mozilla/Opera development/rivalry lately. It's good for consumers. If only things happened more quickly...

Really? I generally see the opposite these days with everything moving to chromium (Opera, Chrome, Safari, and even Edge now all use it). Its kind of like a creepy consolidation. I would say though Firefox does remain a strong (if the last) holdout.

FF and Safari are both shipping some great stuff that we don't have in Chrome DevTools.

Canvas debugger: https://webkit.org/blog/8452/canvas-debugging/

Flexbox inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

Fonts tab: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#28

Post by starik36 »

dlbucci wrote: post #18

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 switc…

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.

Re: Faster Smarter JavaScript Debugging in Firefox DevTools

#29

Post by kaycebasques »

kaycebasques wrote: post #27
0xDEEPFAC wrote: post #25

Earlier quoted context omitted.

Really? I generally see the opposite these days with everything moving to chromium (Opera, Chrome, Safari, and even Edge now all use it). Its kind of like a creepy consolidation. I would say though Firefox does remain a strong (if the last) holdout.

FF and Safari are both shipping some great stuff that we don't have in Chrome DevTools. Canvas debugger: https://webkit.org/blog/8452/canvas-debugging/ Flexbox inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... Fonts tab: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

Also:

> everything moving to Chromium... [including] Safari

This is the opposite of true

Post reply on HN