Document how to self-diagnose unminified/development build results

[ngyikp]

Many new bug reports are related to the detection of unminified/development builds and surprised at the results. It would be great to have a document on how to self-diagnose this and confirm the results.

I made a demo test suite with various conditions: https://github.com/ngyikp/react-devtools-minification-diagnosis

Diagnosis:

1. Temporarily turn off JavaScript source maps or else you might see confusing results

   1. Top-right three grey dots on the inspector > Settings
   2. At the Sources section, untick "Enable JavaScript source maps"

2. Run window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers in the console

3. Ensure there is only one renderer, if there are more than one, then React is being loaded twice

   (I think there should be another bug report open to track this edge case) (bug opened, see Detect duplicate React and show a different message #700)

   

4. Expand the renderer and Mount, right-click _renderNewRootComponent and click Show Function Definition

   (instructions are slightly different for Fiber)

   

The ideal minified production build should look like this: (you should probably pretty print it)

[gaearon]

Great, I agree this is useful. Where do you think would be the best place to put it?

[chisler]

Hi @ngyikp,

Thank you for the guide! One may face confusing behavior.

For example, iamdustan.com uses React. DevTools say it's production.
However, one may be surprised following the guide by clicking "Show Function Definition":

Console	Source

Though, if we follow Dan's way from detectReactBuildType() we will see why DevTools think it's all good.

Console Input

rs = window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers
Object.keys(rs).map(key => Function.prototype.toString.call(rs[key].Mount._renderNewRootComponent))

Output

["function (e,t,n,r){c(t)?void 0:h("37"),y.ensureScrollValueMonitoring();var o=E(e,!1);j.batchedUpdates(s,o,t,n,r);var a=o._instance.rootID;return N[a]=o,o}"]

[ngyikp]

@gaearon
Hmm, perhaps on this doc: https://facebook.github.io/react/docs/optimizing-performance.html

Write something like:

It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.

A misconfigured build process that isn't minifying React properly can also cause the development mode warning to appear.

If you're still unsure about the production/development mode results, you can verify manually with instructions at [hxxps://github.com//issues/692 or some doc location]

@chisler
You have JavaScript source maps enabled, this is what I get when I disable source maps:

(that "Source Map detected" notice disappears when pretty-print is clicked, heh)

In this case, React Dev Tools is correct about production mode and Chrome devtools is being misleading, I'll update my first comment to mention disabling source maps temporarily.

[chisler]

Thanks for the good spot! It's great that guide is updated.

[bvaughn]

React DevTools has been rewritten and recently launched a new version 4 UI. The source code for this rewrite was done in a separate repository and now lives in the main React repo (github.com/facebook/react).

Because version 4 was a total rewrite, and all issues in this repository are related to the old version 3 of the extension, I am closing all issues in this repository. If you can still reproduce this issue, or believe this feature request is still relevant, please open a new issue in the React repo: https://github.com/facebook/react/issues/new?labels=Component:%20Developer%20Tools