Skip to content

Instantly share code, notes, and snippets.

@gbroques

gbroques/react-developer-tools.md

Last active August 16, 2021 15:00
Show Gist options
  • Save gbroques/2a3b3031a8030da4f777d0cb6bef47fa to your computer and use it in GitHub Desktop.
Save gbroques/2a3b3031a8030da4f777d0cb6bef47fa to your computer and use it in GitHub Desktop.
Download ZIP
React Developer Tools
Raw
react-developer-tools.md

React Developer Tools

Installation

Tabs

After installation, you will get two new tabs in your Chrome DevTools:

  1. ⚛️ Components
  2. ⚛️ Profiler

Tips

  • $r in the Console tab references currently selected component in the ⚛️ Components tab.
  • Pin React Developer Tools next to the URL bar in Chrome.
    • The icon changes from blue to red to denote production and development mode respectively.
  • Enable Dark theme.
    • Click settings icon (cog wheel) from the Components or Profiler tab
    • Select General tab
    • Select Dark from Theme dropdown menu
  • Consider checking Highlight updates when components render. for visualizing re-renders.

Interactive Tutorial

Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment