Using React Devtools extension in Brave?

[willy-b]

(Warning: Electron newbie here)

Does anyone have instructions for getting the React Devtools extension working in Brave?

I followed instructions for installing it in Electron, via ready-made modules and manually, but ran into errors.
The main error was electron.remote.BrowserWindow object apparently missing the addDevToolsExtension method (assuming that's a version issue). I also hit Content Security Policy issues (see below).

For example,

Trying the electron-react-devtools module

Link: https://www.npmjs.com/package/electron-react-devtools

Steps:

1. Install electron-react-devtools via npm

  npm install --save-dev electron-react-devtools

2. Add electron-react-devtools inject step to a JS file run by electron's renderer thread
   In js/entry.js:

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

3. Run Brave, open Browser level devtools
4. Try to invoke electron-react-devtools in browser-level console

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

Desired result:
Should see 'React' tab appear in devtools.

Actual result:
Errors with Content Security Policy and electron.remote.BrowserWindow missing the addDevToolsExtension method.
Sample errors:
violates the following Content Security Policy directive: "script-src 'self' http://localhost:*"'
Uncaught TypeError: electron.remote.BrowserWindow.addDevToolsExtension is not a function

Full error traces:

> require('electron-react-devtools').install()
ERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:18 Installing React DevTools from /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools
ERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' http://localhost:*". Either the 'unsafe-inline' keyword, a hash ('sha256-twkHaPr6kFDMqbtJwwe7ZP36HfLKyMm/KYaZtjGmK0k='), or a nonce ('nonce-...') is required to enable inline execution.
ERROR: (anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1__webpack_require__ @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1Module._compile @ module.js:541Module._extensions..js @ module.js:550Module.load @ module.js:456tryModuleLoad @ module.js:415Module._load @ module.js:407Module.require @ module.js:466require @ internal/module.js:20exports.inject @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:9exports.install @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:19(anonymous function) @ VM238:1
ERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:21 Uncaught TypeError: electron.remote.BrowserWindow.addDevToolsExtension is not a function(…)exports.install @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/api.js:21(anonymous function) @ VM238:1
ERROR: /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1 Uncaught TypeError: Cannot set property 'prot' of undefined(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/electron-react-devtools/build/inject.js:1(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:138(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:52(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:269(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/async/lib/async.js:44(anonymous function) @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:106onListen @ /home/willy/projs/git/3rd/browser-laptop/node_modules/portfinder/lib/portfinder.js:35g @ events.js:286emitNone @ events.js:86emit @ events.js:185emitListeningNT @ net.js:1279_combinedTickCallback @ internal/process/next_tick.js:71_tickCallback @ internal/process/next_tick.js:98

[willy-b]

I see issue #253 answers when easy addons / extensions will be addressed, but I'll leave this issue since I suspect someone has been using React DevTools as React components are used , e.g. in the Ledger integration branch

[luixxiul]

@willy-b Sorry for closing that! :-(

[willy-b]

BrowserWindow.addDevToolsExtension disabled in Brave Electron?

If the BrowserWindow.addDevToolsExtension method is necessary, then rebuilding brave-electron locally should solve my problem (I am building now). This method seems to be disabled in Brave's prebuilt Electron from the brave/browser-laptop-releases repo (see below).

Obviously the other extensions don''t need this method. (But they're not DevTool extensions...?) They're loaded via process.emit('load-extension'', ...) in app/extensions.js. Maybe it is possible to load the React DevTools this way (no errors are produced by blindly trying) but all examples use BrowserWindow.addDevToolsExtension.

BrowserWindow object comparison

In Brave Electron prebuilts, BrowserWindow has no addDevToolsExtension method
e.g. 1.2.7R2:

# 1.2.7R2 from   brave-v1.2.7-linux-x64.zip
# from brave/browser-laptop-releases repo
# URL:  https://github.com/brave/browser-laptop-releases/raw/gh-pages/1.2.7R2/brave-v1.2.7-linux-x64.zip

$ ./brave --interactive
> var BrowserWindow = require('electron').BrowserWindow

> BrowserWindow
BrowserWindow
{ [Function: BrowserWindow]
  fromId: [Function],
  getAllWindows: [Function],
  getFocusedWindow: [Function],
  fromWebContents: [Function],
  fromDevToolsWebContents: [Function] }
# Note, does *NOT* have addDevToolsExtension method

Compared to the
Vanilla Electron prebuilt v1.2.6 , BrowserWindow which does have the addDevToolsExtension method:

# Vanilla Electron prebuilt v1.2.6
#
$ electron --version
v1.2.6
$ electron --interactive
> var BrowserWindow = require('electron').BrowserWindow

> BrowserWindow
BrowserWindow
{ [Function: BrowserWindow]
  fromId: [Function],
  getAllWindows: [Function],
  getFocusedWindow: [Function],
  fromWebContents: [Function],
  fromDevToolsWebContents: [Function],
  addDevToolsExtension: [Function],
  removeDevToolsExtension: [Function],
  getDevToolsExtensions: [Function] }
# Note, *DOES HAVE* addDevToolsExtension method

[willy-b]

The BrowserWindow.addDevToolsExtension functionality was disabled in commit 54e87 in brave/electron (brave/muon@54e871e#diff-8d85c651cb0fb8feef2c4694d52da2e3), which adds a return statement early in the chrome-extension module.

There were a lot of changes in this commit so I can't tell if disabling BrowserWindow.addDevToolsExtension was intentional.
Do you want this feature disabled? If it is re-enabled (I can submit PR to brave/electron to do so) we can have the full React DevTools.

Thanks!

[bbondy]

cc @bridiver but unlike Electron upstream we support extensions in general so no special case like this is needed I think. We could try to install the extensions like we do for pdfjs only in debug mode in this task.

[willy-b]

Thanks for looking at this @bbondy .

Having it installed in debug mode sounds like a great approach.

It is a DevTools extension so I don't think it can be installed in quite the same way as PDFJS, as the extension scripts will need access to the DevToolsAPI object. I need to experiment a bit to see if I can bring over some of what the addDevToolsExtension method did that Brave's extension method does not do yet.

Thanks!

[jonathansampson]

Tracking here: #8095.