How can I add DevTools extensions to the Atom editor?


#1

I would like to be able to use devtools extensions like React Developer Tools to Atom in dev mode. How can I do that?

The official Electron documentation mentions a way to load devtools extensions in an Electron window, but I haven’t been able to apply it to Atom.

I’ve tried variations of the following code in the init.coffee script of my .atom folder, but they all fail with some variant of “This method you’re trying to access doesn’t exist”.

# Your init script
#

BrowserWindow = require('electron').remote.BrowserWindow
BrowserWindow.addDevToolsExtension("~/.config/chromium/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.2.1_0/")

Which leads me to think I’m missing something. Is there a way to load devtools extensions from init.coffee, or should I try so other method? Either way, which is the simplest way to proceed?


Secondary question: I’ve also found this npm package that provides a simplified way to load devtools extensions in Electron. Is it possible at all to use it in Atom? I don’t think you can add node modules to init.coffee.


#2

Hi @PoignardAzur, I have also been trying to get React dev-tools to work in Atom debugger. I think the first problem you are having is because of the ~/ in your path. Once you get past that you will probably get another error: Refused to load the script ‘chrome-extension://react-developer-tools/build/backend.js’ because it violates the following Content Security Policy directive: “script-src ‘self’ ‘unsafe-eval’”.

I’m using: bee@athena:~/projects/zulily/react-datum$ atom --version
Atom : 1.27.0
Electron: 1.7.11
Chrome : 58.0.3029.110
Node : 7.9.0


#3

Solved!
Gist is to add something like the snip below to your Atom init.js. Note I just had to rename from init.coffee - when I switch I switch hard and fast :slight_smile:). You can just remove the let and replace // with # to convert it to CoffeeScript without fear of shame from me.

let e = require('electron')
e.webFrame.registerURLSchemeAsPrivileged('chrome-extension')
// NOTE: your directory will be different.  see https://electronjs.org/docs/tutorial/devtools-extension
e.remote.BrowserWindow.addDevToolsExtension('/Users/Bee/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/3.2.1_0')

Note that you still need to refresh / reload the Atom instance when you first open the debugger:


Adding Chrome devtools React extension to Atom
#4

One more note, I also tried electron-devtools-installer with the snip below in init.js.

electron-devtools-installer would be a better solution as it will guarantee that you are up to date with the installed local version of the chrome devtool. As is, the working solution above will probably break as soon as a new version of the devtool is installed. I note that there is only one versioned sub directory in …/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/ on my machine :anguished:


//  DOESN'T WORK as of Atom 1.27.0 - throws a bunch of errors like "Cannot read property 'ended' of undefined"
// const { default: installExtension, REACT_DEVELOPER_TOOLS } = require('electron-devtools-installer');
// 
// installExtension(REACT_DEVELOPER_TOOLS)
//     .then((name) => console.log(`Added Extension:  ${name}`))
//     .catch((err) => console.log('An error occurred: ', err));