BranchesTags

Repository files navigation

React Developer Tools Build Status

React Developer Tools is a system that allows you to inspect a React Renderer, including the Component hierarchy, props, state, and more.

There are shells for Chrome (adding it to the Chrome devtools), Firefox, Atom/Nuclide, and as a standalone Electron app.

Installation

Pre-packaged

The official extensions represent the current stable release.

If you inspect an element or launch the developer tools on a React page, you should see an extra tab called React in the inspector.

Check out For Hacking if you want to develop the Developer Tools or use a pre-prelease version.

Usage

Supporting tools

  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.

Tree View

  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context

Side Pane

  • Right-click to store as global variable
  • Updates are highlighted

For Hacking

For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a "plain" shell that just renders the devtools into an html page along with a TodoMVC test app. This is by far the quickest way to develop. Check out the Readme.md in /shells/plain for info.

For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.

FAQ

The React Tab Doesn't Show Up

The "React" tab won't show up if React can't communicate with the devtools. When the page loads, the devtools sets a global named __REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that hook during initialization.

(In React 0.11 and older, it was necessary to expose a global called React for the devtools to function.)

You can test this on the React website or by inspecting Facebook.

Currently iframes and Chrome apps/extensions are not inspectable.

Does "Trace React Updates" trace renders?

Yes, but it's also tracing if a component may render. In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5. Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false) This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating. The higher the rate of updates happening per second the more the color changes from blue to red.

ProTips

If you inspect a React element on the page using the regular Elements tab, then switch over to the React tab, that element will be automatically selected in the React tree.

Debugging (in Chrome)

What to do if the extension breaks.

  • check the error console of devtools. Part of React Devtools runs scripts in the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open devtools again (cmd+option+j or ctrl+shift+j). This is the "debug devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page" under "Inspected views". You might find the errors there.

Contributing

To read more about the community and guidelines for submitting pull requests, please read the Contributing document.

About

An extension that allows inspection of React component hierarchy in Chrome Developer Tools.

Resources

Readme
License

Contributing

Contributing
Activity
Custom properties

Stars

1 star

Watchers

18 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
React Developer Tools Build Status
React Developer Tools is a system that allows you to inspect a React Renderer,
including the Component hierarchy, props, state, and more.
There are shells for Chrome (adding it to the Chrome devtools), Firefox,
Atom/Nuclide, and as a standalone Electron app.
Installation
Pre-packaged
The official extensions represent the current stable release.
If you inspect an element or launch the developer tools on a React page, you
should see an extra tab called React in the inspector.
Check out For Hacking if you want to develop the Developer
Tools or use a pre-prelease version.
Usage
Supporting tools
  • The babel plugin transform-react-jsx-source is required if you want react devtools to tell you the source file & line number of created react elements. Its display is in the bottom of the right panel if the information is present.
Tree View
  • Arrow keys or hjkl for navigation
  • Right click a component to show in elements pane, scroll into view, show
source, etc.
  • Use the search bar to find components by name
  • A red collapser means the component has state/context
Side Pane
  • Right-click to store as global variable
  • Updates are highlighted
For Hacking
For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a
"plain" shell that just renders the devtools into an html page along with a
TodoMVC test app. This is by far the quickest way to develop. Check out
the Readme.md in /shells/plain for info.
For other shells (Chrome, Firefox, etc.), see the respective directories in /shells.
FAQ
The React Tab Doesn't Show Up
The "React" tab won't show up if React can't communicate with the
devtools. When the page loads, the devtools sets a global named
__REACT_DEVTOOLS_GLOBAL_HOOK__, then React communicates with that
hook during initialization.
(In React 0.11 and older, it was necessary to expose a global called React
for the devtools to function.)
You can test this on the React website
or by inspecting Facebook.
Currently iframes and Chrome apps/extensions are not inspectable.
Does "Trace React Updates" trace renders?
Yes, but it's also tracing if a component may render.
In order to fully understand what counts as an "update", you need to understand how shouldComponentUpdate works.

Here "Trace React Updates" will draw a border around every node but C4 and C5.
Why does it trace components that don't actually update? (via shouldComponentUpdate() -> false)
This is a limitation of the system used to track updates, and will hopefully change in the future. It doesn't, however, trace the children of components that opt out, as there's no possibility of them updating.
The higher the rate of updates happening per second the more the color changes from blue to red.
ProTips
If you inspect a React element on the page using the regular Elements tab,
then switch over to the React tab, that element will be automatically
selected in the React tree.
Debugging (in Chrome)
What to do if the extension breaks.
  • check the error console of devtools. Part of React Devtools runs scripts in
the context of your page, and is vulnerable to misbehaving polyfills.
  • open devtools out into a new window, and then hit the shortcut to open
devtools again (cmd+option+j or ctrl+shift+j). This is the "debug
devtools" debugger. Check the console there for errors.
  • open chrome://extensions, find react devtools, and click "background page"
under "Inspected views". You might find the errors there.
Contributing
To read more about the community and guidelines for submitting pull requests,
please read the Contributing document.
About
An extension that allows inspection of React component hierarchy in Chrome Developer Tools.
Resources
Readme
License
Contributing
Contributing
Activity
Custom properties
Stars
1 star
Watchers
18 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages