3 ms·

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 hove

• fastball 7y ago
  Can you not do that with every browser's dev tools?
• sgruetter 7y ago
  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 7y ago
    Grid Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto... Flexbox Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
• sebazzz 7y ago
  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_Inspector/How_to/Examine_and_edit_CSS#Track_changes https://developer.mozilla.org/en-US/docs/Tools/Page_Inspecto...
  • kaycebasques 7y ago
    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#changes https://developers.google.com/web/updates/2018/01/devtools#c...