firejune / electron-react-devtools Goto Github PK

React DevTools Extension for Electron

JavaScript 99.70% HTML 0.29% Makefile 0.01%

electron-react-devtools's Introduction

React DevTools Extension for Electron

Unfortunately, React DevTools is not working with Electron(<=v1.2.0). Because not implemented chrome.runtime* APIs and not support Background Pages in Electron. So I fix the source of "React DevTools" for Electron.

Installing

npm install --save-dev electron-react-devtools
or
npm install --save-dev firejune/electron-react-devtools

You will still see the React DevTools message('Download the React DevTools and ...') in Console tab.

Then execute the following from the Console tab of your running Electron app's developer tools:

require('electron-react-devtools').install()

And than refresh or restart the renderer process, you can see a React tab added.

To hack on the plugin

run npm install
run npm run build in this directory
run webpack or webpack --watch in this directory
Go to chrome://extensions, check "developer mode", and click "Load unpacked extension", and select this directory
Hack away!

Generally, changes to the UI will auto-propagate if you have webpack --watch on (close devtools and re-open them). If you change the background script or injector, you might have to reload the extension from the extensions page.

Insulating the environment

React Devtools has part of the code (the backend + agent) running in the same javascript context as the inspected page, which makes the code vulnerable to environmental inconsistencies. For example, the backend uses the es6 Map class and normally expects it to be available in the global scope. If a user script has overridden this, the backend breaks.

To prevent this, the content script src/GlobalHook.js, which runs before any user js, saves the native values we depend on to the __REACT_DEVTOOLS_GLOBAL_HOOK__ global. These are:

Set
Map
WeakMap
Object.create

Then in webpack.backend.js, these saved values are substituted for the globally referenced name (e.g. Map gets replaced with window.__REACT_DEVTOOLS_GLOBAL_HOOK__.nativeMap).

Fixing document.create

React Native sets document.createElement to null in order to convince js libs that they are not running in a browser environment while debug in chrome is enabled.

To deal with this, src/inject.js calls document.constructor.prototype.createElement when it needs to create a <script> tag.

electron-react-devtools's People

Contributors

Stargazers

Watchers

Forkers

unional digideskio jbondeson linjunc

electron-react-devtools's Issues

Please Update package.json homepage to its correct link (this repo)

Currently the homepage is redirected to 401 error .

https://github.com/firejune/electron-react-devtools/blob/master/package.json#L28

React tab not showing

Hello,

I've installed successfully:

Installing React DevTools from /Users/crucial/code/idmx/playsplom/node_modules/electron-react-devtools

But I still don't see any React tab. I've tried restarting the app a few times.

Electron 0.37.6 -- maybe I need to move to 1 ?

I installed from your repo:

github:firejune/electron-react-devtools

Though I see you are working on it right now (commits 5 minutes ago)

Thank you for your work !

React 16 Support

electron-react-devtools dosn't work with React 16. Following error is thrown in console -

warning.js:33 Warning: The installed version of React DevTools is too old and will not work with the current version of React. Please update React DevTools. https://fb.me/react-devtools

Electron-React-Devtools does not minify with React's NPM Build command

When the npm run build command is run to build the production React app (to later be used by ElectronJS, of course), the following error message outputs:

Creating an optimized production build...
Failed to compile.

Failed to minify the code from this file:

        ./node_modules/electron-react-devtools/api.js:4

Can't get this working

It seems to install ok from the console but the React tab does not appear in my devtools

Using Electron 1.0.2 and React 15.0.1. Also using Webpack and Babel in my build if that makes a difference.

Error when using latest react 16.6 and electron 3

I get an error when using react 16.6 and electron 3.0.6

React Devtools still active in a production build.

Thanks for the package, I find it essential for development !

I am using electron-prebuilt 1.2.3. Maybe I can move to the upstream react-devtools now ?

The problem:

For some reason when I make a production release, electron-react-devtools is still activating and there is still a React tab.

But it fails and throws an error because the devDependencies are not included with the production build and so react-developer-tools fails to import portfinder.

module.js:440 Uncaught Error: Cannot find module 'portfinder'

This is somehow being injected by electron-react-devtools, but to be honest I can't understand why.

I installed as per instructions with require('electron-react-devtools').install();

Where did it install to ? How do I uninstall it ? I flushed the electron-prebuilt dist cache, but it is still there.

I do NOT do this anymore:

// in development.
  if (process.env.NODE_ENV !== 'production') {
    require('electron-react-devtools').inject()
  }

as I am on 1.2.3. So I am not even requireing it at all and definitely not injecting.

Thank you for your help !

Examples

Hi, thanks for this library!
Could you add an example to README.md that you can simply add

require('electron-react-devtools').install()

to index.jsx, and not in google chrome

firejune / electron-react-devtools Goto Github PK

electron-react-devtools's Introduction

React DevTools Extension for Electron

Installing

To hack on the plugin

Insulating the environment

Fixing document.create

electron-react-devtools's People

Contributors

Stargazers

Watchers

Forkers

electron-react-devtools's Issues

Recommend Projects

Recommend Topics

Recommend Org