5 Frameworks tips

• Customize the way objects look in DevTools
  Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various parts of the Sources (or Debugger) tool when you debug JavaScript code. DevTools is the one that decid... Read more
  Categories:

  • personalization
  • frameworks

  Supported by:

  • edge
  • firefox
  • chrome
• Ignore JavaScript code to ease debugging
  Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that call each other. What's even worse is when a lot of this code isn't even yours. This can happen whe... Read more
  Categories:

  • javascript
  • frameworks

  Supported by:

  • edge
  • chrome
  • firefox
• Install or create extensions to customize DevTools
  There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may need very specific tools that aren't available by default. Thankfully, DevTools can be extended with... Read more
  Categories:

  • personalization
  • frameworks

  Supported by:

  • edge
  • firefox
  • chrome
  • safari
  • polypane
• Quickly reference React components in the console
  Zee shared a great tip on Twitter if you are working with React and have the React DevTools extension installed. You can use $r in the Console tool to reference the currently selected element in the R... Read more
  Categories:

  • console
  • productivity
  • frameworks

  Supported by:

  • edge
  • firefox
  • chrome
• Copy a CSS rule as CSS-in-JS format
  Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTools and paste it into your code. Indeed if the CSS you worked on in the Styles panel looks like this:... Read more
  Categories:

  • css
  • javascript
  • frameworks

  Supported by:

  • edge
  • chrome