Security News
npm Updates Search Experience with New Objective Sorting Options
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
react-devtools-core
Advanced tools
The react-devtools-core package provides the core functionality of React Developer Tools, which are used to inspect and debug React component hierarchies in the Chrome Developer Tools. It can be integrated into other environments, such as custom browsers, editors, or embedded inside apps.
Standalone React DevTools
This code snippet demonstrates how to connect to the React DevTools from a standalone environment. It is useful when you want to debug React components within an environment that is not a web browser.
const { connectToDevTools } = require('react-devtools-core');
connectToDevTools({ host: 'localhost', port: 8097 });
Custom Integration
This code snippet shows how to start a React DevTools server. This can be used to integrate React DevTools into an environment where you have control over the server, such as an Electron app or a custom browser.
const { Server } = require('react-devtools-core');
const server = new Server({ port: 8097 });
server.on('ready', () => console.log('DevTools server started on port 8097.'));
server.start();
This package provides tools for debugging application's state changes. While react-devtools-core is focused on React component hierarchies, redux-devtools-extension is focused on Redux state management.
Similar to react-devtools-core, this package is used for debugging React applications. However, it is specifically tailored for applications using MobX for state management, as opposed to React's context or Redux.
Vue Devtools is for Vue.js applications what react-devtools-core is for React applications. It allows developers to inspect and debug Vue component hierarchies.
react-devtools-core
A standalone React DevTools implementation.
This is a low-level package. If you're looking for the Electron app you can run, use react-devtools
package instead.
react-devtools-core
This is similar requiring the react-devtools
package, but provides several configurable options. Unlike react-devtools
, requiring react-devtools-core
doesn't connect immediately but instead exports a function:
const { connectToDevTools } = require("react-devtools-core");
connectToDevTools(config);
Run connectToDevTools()
in the same context as React to set up a connection to DevTools.
Be sure to run this function before importing e.g. react
, react-dom
, react-native
.
The config
object may contain:
host: string
(defaults to "localhost") - Websocket will connect to this host.port: number
(defaults to 8097
) - Websocket will connect to this port.useHttps: boolean
(defaults to false
) - Websocket should use a secure protocol (wss).websocket: Websocket
- Custom websocket to use. Overrides host
and port
settings if provided.resolveRNStyle: (style: number) => ?Object
- Used by the React Native style plug-in.retryConnectionDelay: number
(defaults to 2000
) - Milliseconds delay to wait between retrying a failed Websocket connection.isAppActive: () => boolean
- If provided, DevTools will poll this method and wait until it returns true before connecting to React.react-devtools-core/standalone
Renders the DevTools interface into a DOM node.
require("react-devtools-core/standalone")
.setContentDOMNode(document.getElementById("container"))
.setStatusListener(status => {
// This callback is optional...
})
.startServer(port);
Renders DevTools interface into a DOM node over SSL using a custom host name (Default is localhost).
const host = 'dev.server.com';
const options = {
key: fs.readFileSync('test/fixtures/keys/agent2-key.pem'),
cert: fs.readFileSync('test/fixtures/keys/agent2-cert.pem')
};
require("react-devtools-core/standalone")
.setContentDOMNode(document.getElementById("container"))
.setStatusListener(status => {
// This callback is optional...
})
.startServer(port, host, options);
Reference the react-devtools
package for a complete integration example.
Watch for changes made to the backend entry point and rebuild:
yarn start:backend
Watch for changes made to the standalone UI entry point and rebuild:
yarn start:standalone
FAQs
Use react-devtools outside of the browser
We found that react-devtools-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
npm has a revamped search experience with new, more transparent sorting options—Relevance, Downloads, Dependents, and Publish Date.
Security News
A supply chain attack has been detected in versions 1.95.6 and 1.95.7 of the popular @solana/web3.js library.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.