Remove React DevTools Download console log on install

[RichardLitt]

I have React DevTools downloaded and enabled as a Chrome extension, version 0.13.1. I am using the react npm package, version 0.12.2, in a Chrome extension that is browserified.

Every time I open my console, the console log: "Download the React DevTools for a better development experience: http://fb.me/react-devtools" is there.

What can I do to remove this?

Update from maintainers: see solution in #3877 (comment).

[RichardLitt]

I don't see a React tab in my Chrome Dev tools, also, so I'm not quite sure how to access the dev tools at all to be honest. Here is what I see in my Chrome settings:

[zpao]

If you browserify with NODE_ENV=production, then you'll get the prod version, which doesn't have that message. You probably want to do that for your extension users anyway.

As to actually debugging, I'm not sure the best way about this. The DevTools are expecting to be inspecting the browser window, which is why they aren't playing nicely together (devtools set a global on the browser window, but React is looking for it in the context of it's execution environment, which isn't the browser window).

We might have to just close this but a quick cc of @sebmarkbage to see if he has any other comments.

[RichardLitt]

Alright, I run it in production mode now. But now I can't use the React Developer Tools at all. So... I guess the extension just doesn't work at all for cases like mine?

[sebmarkbage]

What do you mean? You can't use the React Developer Tools to debug the extension? What kind of extension is it? Did you use the chrome://inspect tools to open the extension?

It may not be possible to use React DevTools to debug extensions because of how we insert a global flag into pages to find the React instance.

[sebmarkbage]

I think it should work if you have global React or a global require that is able to require('react') from global scope.

[sebmarkbage]

Btw, any reason you're stuck at React 0.12.2 and not upgraded to 0.13 yet?

[RichardLitt]

Maybe I'm doing something wrong: What I mean is that I don't see the 'React' nav item in the Console. I'm not sure I ever have, come to think of it. I certainly don't know, and didn't when I got that warning I mentioned above. I'm not sure what kind of extension types there are; mine is a chrome extension that uses a browser_action to inject an iFrame or to reload a PDF in a URL inside a PDF.js environment. Yes, I used chrome://inspect - no dice.

I have a global require('react'), I believe.

I've got some issues in some other dependencies that mean I'm just using npm-shrinkwrap, and haven't updated a few modules. No other reason besides that. I could update it now.

[RichardLitt]

I should be clearer about this: I've never gotten React Developer Tools to work that I can recall, and I keep getting a warning about using it which I wanted to turn off, which is why I made this issue.

Is there any progress on this?

I'm using webpack, es6, babel, React 0.13.3 with NODE_ENV=production set and still see the message in console.

react-devtools not installed since it is production mode

[gaearon]

@appshore Just using NODE_ENV is not enough during compilation; you need to actually define it in your code. One way to do this is to use DefinePlugin in Webpack.

  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]

@gaearon Thank you for the tip. Works fine!

[sophiebits]

(Please note that you should not use NODE_ENV=production during development as it silences many helpful warnings.)

[CacheControl]

If you set window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = {}, it will also silence the warning. This seems preferable to using NODE_ENV=production, which may have other consequences.

[alexoviedo999]

I was able to make the extension work by requiring react in my gulpfile. I'm sure it would work the same in the webpack file: var React = require('react');