New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-devtools

Package Overview
Dependencies
Maintainers
5
Versions
158
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-devtools - npm Package Compare versions

Comparing version

3.6.1
to
4.0.0-alpha.0

41

app.js

@@ -1,20 +0,12 @@

/**
* Copyright (c) 2015-present, Facebook, Inc.
* All rights reserved.
*
* This source code is licensed under the BSD-style license found in the
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
'use strict';
// @flow
var app = require('electron').app; // Module to control application life.
var BrowserWindow = require('electron').BrowserWindow; // Module to create native browser window.
var path = require('path');
const { app, BrowserWindow } = require('electron'); // Module to create native browser window.
const { join } = require('path');
var mainWindow = null;
var argv = require('minimist')(process.argv.slice(2));
var projectRoots = argv._;
var defaultThemeName = argv.theme;
const argv = require('minimist')(process.argv.slice(2));
const projectRoots = argv._;
const defaultThemeName = argv.theme;
let mainWindow = null;
app.on('window-all-closed', function() {

@@ -26,3 +18,12 @@ app.quit();

// Create the browser window.
mainWindow = new BrowserWindow({width: 800, height: 600, icon: path.join(__dirname, 'icons/icon128.png')});
mainWindow = new BrowserWindow({
width: 800,
height: 600,
icon: join(__dirname, 'icons/icon128.png'),
frame: false,
//titleBarStyle: 'customButtonsOnHover',
webPreferences: {
nodeIntegration: true,
},
});

@@ -38,5 +39,7 @@ // and load the index.html of the app.

if (defaultThemeName) {
if (argv.theme) {
mainWindow.webContents.executeJavaScript(
'window.devtools.setDefaultThemeName(' + JSON.stringify(defaultThemeName) + ')'
'window.devtools.setDefaultThemeName(' +
JSON.stringify(defaultThemeName) +
')'
);

@@ -43,0 +46,0 @@ }

24

bin.js
#!/usr/bin/env node
var electron = require('electron');
var spawn = require('cross-spawn');
var argv = process.argv.slice(2);
var pkg = require('./package.json');
var updateNotifier = require('update-notifier');
// @flow
const electron = require('electron');
const spawn = require('cross-spawn');
const argv = process.argv.slice(2);
const pkg = require('./package.json');
const updateNotifier = require('update-notifier');
// notify if there's an update
updateNotifier({pkg}).notify({defer: false});
updateNotifier({ pkg }).notify({ defer: false });
var result = spawn.sync(
electron,
[require.resolve('./app')].concat(argv),
{stdio: 'ignore'}
);
const result = spawn.sync(electron, [require.resolve('./app')].concat(argv), {
stdio: 'ignore',
});
process.exit(result.status);

5

index.js

@@ -1,4 +0,7 @@

var {connectToDevTools} = require('react-devtools-core');
// @flow
const { connectToDevTools } = require('react-devtools-core/backend');
// Connect immediately with default options.
// If you need more control, use `react-devtools-core` directly instead of `react-devtools`.
connectToDevTools();

11

package.json
{
"name": "react-devtools",
"version": "3.6.1",
"version": "4.0.0-alpha.0",
"description": "Use react-devtools outside of the browser",
"license": "MIT",
"repository": {
"url": "https://github.com/facebook/react-devtools.git",
"url": "https://github.com/bvaughn/react-devtools-experimental.git",
"type": "git"

@@ -22,12 +23,10 @@ },

},
"author": "Jared Forsyth",
"license": "BSD-3-Clause",
"dependencies": {
"cross-spawn": "^5.0.1",
"electron": "^1.8.7",
"electron": "^5.0.0",
"ip": "^1.1.4",
"minimist": "^1.2.0",
"react-devtools-core": "^3.6.0",
"react-devtools-core": "4.0.0-alpha.0",
"update-notifier": "^2.1.0"
}
}

69

README.md
# `react-devtools`
If you need to debug a React page somewhere other than Chrome on desktop (a mobile browser, an embedded webview, Safari, etc), the `react-devtools` package is for you! It is also useful if your app is inside an iframe.
React DevTools is available as a built-in extension for Chrome and Firefox browsers. This package enables you to debug a React app elsewhere (e.g. a mobile browser, an embedded webview, Safari, inside an iframe).

@@ -9,21 +9,25 @@ It works both with React DOM and React Native.

## Usage with React Native
Install the `react-devtools` package globally:
with yarn:
```
## Installation
Install the `react-devtools` package. Because this is a development tool, a global install is often the most convenient:
```sh
# Yarn
yarn global add react-devtools
```
or with npm:
```
# NPM
npm install -g react-devtools
```
Now run `react-devtools` from the terminal to launch the standalone DevTools app:
If you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can do this by running:
```sh
yarn add --dev react-devtools
```
With NPM you can just use [NPX](https://www.npmjs.com/package/npx):
```sh
npx react-devtools
```
## Usage with React Native
Run `react-devtools` from the terminal to launch the standalone DevTools app:
```sh
react-devtools

@@ -33,4 +37,3 @@ ```

If you're not in a simulator then you also need to run the following in a command prompt:
```
```sh
adb reverse tcp:8097 tcp:8097

@@ -41,4 +44,2 @@ ```

> Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
### Integration with React Native Inspector

@@ -71,24 +72,10 @@

The standalone shell can also be useful with React DOM (for example, to debug apps in Safari, or inside an iframe).
The standalone shell can also be useful with React DOM (e.g. to debug apps in Safari or inside of an iframe).
Install the `react-devtools` package globally:
with yarn:
```
yarn global add react-devtools
```
or with npm:
```
npm install -g react-devtools
```
Now run `react-devtools` from the terminal to launch the standalone DevTools app:
```
Run `react-devtools` from the terminal to launch the standalone DevTools app:
```sh
react-devtools
```
Finally, add `<script src="http://localhost:8097"></script>` as the very first `<script>` tag in the `<head>` of your page when developing:
Add `<script src="http://localhost:8097"></script>` as the very first `<script>` tag in the `<head>` of your page when developing:

@@ -102,7 +89,4 @@ ```html

This will ensure the developer tools are connected.
**Don’t forget to remove it before deploying to production!**
This will ensure the developer tools are connected. **Don’t forget to remove it before deploying to production!**
>Note: if you prefer to avoid global installations, you can add `react-devtools` as a project dependency. With Yarn, you can run `yarn add --dev react-devtools`, and then run `yarn react-devtools` from your project folder to open the DevTools. With npm, you can run `npm install --save-dev react-devtools`, add `"react-devtools": "react-devtools"` to the `scripts` section in your `package.json`, and then run `npm run react-devtools` from your project folder to open the DevTools.
>If you install `react-devtools` as a project dependency, you may also replace the `<script>` suggested above with a JavaScript import (`import 'react-devtools'`). It is important that this import comes before any other imports in your app (especially before `react-dom`). Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. If you use Webpack and have control over its configuration, you could alternatively add `'react-devtools'` as the first item in the `entry` array of the development-only configuration, and then you wouldn’t need to deal either with `<script>` tags or `import` statements.

@@ -112,4 +96,3 @@

By default DevTools listen to port `8097` on `localhost`.
If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.
By default DevTools listen to port `8097` on `localhost`. If you need to customize host, port, or other settings, see the `react-devtools-core` package instead.

@@ -120,3 +103,3 @@ ## Developing

* Run `yarn start` in this folder
* Refresh the app after it has recompiled on change
* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes
* Refresh the app after it has recompiled a change
* For React Native, copy `react-devtools-core` to its `node_modules` to test your changes.
app.html

Sorry, the diff of this file is not supported yet