[matthewvincent]

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.

[sebazzz]

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...

[kaycebasques]

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...

[sgruetter]

I agree. Whenever I have something strange going on with CSS Grid or Flexbox layouts, the issue is usually easier to find with Firefox than Chrome.

Let's see how the new JS debugger feels.

[kaycebasques]

Grid Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...

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

[fastball]

Can you not do that with every browser's dev tools?