Adding Chrome devtools React extension to Atom


#1

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.


#2

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.


#3

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


#4

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


#5

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.


#6

Hi @nelix you mean this right https://github.com/atom/atom-shell/blob/master/docs/tutorial/devtools-extension.md

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)

Correct?

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 https://atom.io/docs/v0.169.0/search?utf8=✓&q=react
  2. what is the impact of not having that extension installed? (i.e. what am I missing when using the DevTools?)

#7

Hi @mark_hahn where did you made that change?

I.e. what needs to be commented


#8

I just added this as an issue to Atom: https://github.com/atom/atom/issues/4991


#9

Just search for the error text.


#10

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