{"id":11688,"library":"react-devtools","title":"React DevTools Standalone","description":"The `react-devtools` package provides a standalone desktop application for debugging React applications that operate outside of conventional browser environments, such as React Native mobile apps, embedded webviews, or when debugging within browsers like Safari that lack direct extension support. This tool allows developers to inspect component hierarchies, monitor prop and state changes, and analyze rendering performance for any React-based UI. The current stable version for the standalone DevTools is 7.0.1, although related React ecosystem packages like `eslint-plugin-react-hooks` and the core React library (v19.x) receive more frequent updates. Its key differentiator is offering a consistent, dedicated debugging experience across various non-browser platforms where traditional browser DevTools extensions are not applicable or insufficient, connecting to the target application via a local server.","status":"active","version":"7.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/facebook/react","tags":["javascript"],"install":[{"cmd":"npm install react-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add react-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-devtools","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary interaction is running the `react-devtools` command directly in your terminal to launch the GUI application.","wrong":"import { DevTools } from 'react-devtools'","symbol":"Standalone CLI Tool","correct":"react-devtools"},{"note":"This is a side-effect import that should be the very first import in your application's entry point (e.g., `index.js`) to establish a connection to the running standalone DevTools. It does not export any symbols for programmatic use.","wrong":"const DevToolsClient = require('react-devtools');","symbol":"Client Connection Script (ESM)","correct":"import 'react-devtools';"},{"note":"For HTML-based applications (e.g., Safari, IFrames), embed this script tag as the very first script in the `` section of your page to enable connection. This script *must* be removed before deploying to production.","wrong":"","symbol":"Client Connection Script (HTML)","correct":""}],"quickstart":{"code":"npm install -g react-devtools\nreact-devtools\n\n// For React Native (0.43+) debugging, if not using a local simulator, \n// ensure port forwarding from device to host:\nadb reverse tcp:8097 tcp:8097\n\n// For web/iframe debugging, add this as the very first script in your HTML :\n// \n// (Remember to remove this line for production builds!)\n\n// Alternatively, if react-devtools is a project dependency:\nnpm install --save-dev react-devtools\nnpx react-devtools &\n// In your application's main entry file (e.g., src/index.js), add as the first line:\n// import 'react-devtools';\n// (Also remove this import for production builds!)\n","lang":"javascript","description":"Demonstrates global installation, launching the standalone DevTools app, and setting up client connections for React Native and web-based applications."},"warnings":[{"fix":"Ensure your `react-devtools` package version aligns with the major version of `react` and `react-dom` used in your application. Consult the official React documentation or release notes for specific compatibility information.","message":"React DevTools has compatibility requirements with the major version of React it is debugging (e.g., DevTools 7.x is designed for React 18/19). Using a significantly mismatched version can lead to connection failures, incorrect component introspection, or missing features.","severity":"breaking","affected_versions":"All versions"},{"fix":"Utilize build-time environment variables, conditional compilation, or Webpack configurations to ensure the DevTools client code is completely excluded from your production assets.","message":"The DevTools client connection script (either the `` is the very first script in `` or `import 'react-devtools';` is the first line in your entry file. For React Native, confirm `adb reverse tcp:8097 tcp:8097` has been executed if debugging on a physical device or remote emulator.","cause":"This error typically indicates that the standalone `react-devtools` application is not running, the client-side connection script is missing or misconfigured, or there is a network connectivity issue (e.g., port blocked, `adb reverse` not applied).","error":"Could not connect to React DevTools."},{"fix":"Start the `react-devtools` application in your terminal. If it's already running, ensure no other process is blocking port 8097 or that your browser isn't configured with proxies preventing localhost access.","cause":"When debugging a web application, this browser error means the client-side connection script tried to reach the DevTools server at `http://localhost:8097` but was refused, usually because the `react-devtools` command was not started or crashed.","error":"Failed to load resource: net::ERR_CONNECTION_REFUSED"},{"fix":"Install `react-devtools` as a development dependency: `npm install --save-dev react-devtools` or `yarn add --dev react-devtools`. If you prefer a global install, you'll need to use `npx react-devtools` to launch the tool and not rely on the `import` statement in your app code for connection.","cause":"This error occurs in a build process (e.g., Webpack, Vite) when your application code uses `import 'react-devtools';` but the `react-devtools` package is not listed as a dependency in your project's `package.json`.","error":"Module not found: Can't resolve 'react-devtools'"}],"ecosystem":"npm"}