React Developer Tools is a tool that allows you to inspect a React tree, including the component hierarchy, props, state, and more. To get started, just open the Firefox devtools and switch to the "⚛️ Components" or "⚛️ Profiler" tab.
Premium users can view and search full source code, and see the source code differences
between two versions.
Upgrade to premium
manifest.json
{
"manifest_version": 3,
"name": "React Developer Tools",
"description": "Adds React debugging tools to the Firefox Developer Tools.\n\nCreated from revision d66fa02a30 on 9/26/2024.",
"version": "6.0.0",
"browser_specific_settings": {
"gecko": {
"id": "@react-devtools",
"strict_min_version": "128.0"
}
},
"icons": {
"16": "icons/16-production.png",
"32": "icons/32-production.png",
"48": "icons/48-production.png",
"128": "icons/128-production.png"
},
"action": {
"default_icon": {
"16": "icons/16-disabled.png",
"32": "icons/32-disabled.png",
"48": "icons/48-disabled.png",
"128": "icons/128-disabled.png"
},
"default_popup": "popups/disabled.html"
},
"devtools_page": "main.html",
"content_security_policy": {
"extension_pages": "script-src 'self'; object-src 'self'"
},
"web_accessible_resources": [
{
"resources": [
"main.html",
"panel.html",
"build/*.js",
"build/*.js.map"
],
"matches": [
"<all_urls>"
],
"extension_ids": []
}
],
"background": {
"scripts": [
"build/background.js"
]
},
"permissions": [
"scripting",
"storage",
"tabs"
],
"host_permissions": [
"<all_urls>"
],
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"build/prepareInjection.js"
],
"run_at": "document_start"
}
]
}