How can I add DevTools extensions to the Atom editor?


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 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

Which leads me to think I’m missing something. Is there a way to load devtools extensions from, 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


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


Gist is to add something like the snip below to your Atom init.js. Note I just had to rename from - 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')
// NOTE: your directory will be different.  see
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

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));