Adding Chrome devtools React extension to Atom


React has a great extension to the Chrome devtools that makes debugging really convenient. It’d be great to get that extension working with Atom.


And to go a bit further it would be great to be able to install some other extensions as well, I think of CoffeeConsole for instance, as a lot of people were wondering how to test their coffeescript code in the context of Atom.


If it can’t be installed is there a way to remove the message from the console log that started appearing in 121?


The atom-shell repo has a guide to getting react dev tools loaded, its inside the docs folder


I installed the react dev tools, just to get rid of the message, but the message is still there. Where can I file an issue? Atom or Atom-Shell?

I know it shouldn’t be a big deal but I see it hundreds of times a day and it is driving me crazy. For a number of versions I took the trouble to find the message and comment it out but new versions come too often.

I would pay money to get rid of this advertisement just as I do for pandora and other services.


Hi @nelix you mean this right

Is that the only way to add chrome extensions to Atom?

In that page they mention…

atom-shell by opening the devtools in arbitray window,

… which means that it is not permanent? (i.e. will not survive an Atom restart or UI reload)


I agree with @mark_hahn that that message is quite annoying, and btw:

  1. what is react used for? (can’t see a reference at✓&q=react
  2. what is the impact of not having that extension installed? (i.e. what am I missing when using the DevTools?)


Hi @mark_hahn where did you made that change?

I.e. what needs to be commented


I just added this as an issue to Atom:


Just search for the error text.


In answer to the original question, which I think @dmnd was asking how to use the React dev-tools, not how to get rid of the message / advertisement, see also my “Solved! …” reply here: How can I add DevTools extensions to the Atom editor?

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