diff --git a/docs/assets/ReactDevToolsInspector.gif b/docs/assets/ReactDevToolsInspector.gif index c3540bee79c..90cb8fa024d 100644 Binary files a/docs/assets/ReactDevToolsInspector.gif and b/docs/assets/ReactDevToolsInspector.gif differ diff --git a/docs/next/debugging.html b/docs/next/debugging.html index b9ac5e9eb9c..ae10c68521c 100644 --- a/docs/next/debugging.html +++ b/docs/next/debugging.html @@ -90,11 +90,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

-

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

+

Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

React DevTools Inspector Integration

-

You can choose "Hide Inspector" in the same menu to exit this mode.

+

You can choose "Toggle Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.

diff --git a/docs/next/debugging/index.html b/docs/next/debugging/index.html index b9ac5e9eb9c..ae10c68521c 100644 --- a/docs/next/debugging/index.html +++ b/docs/next/debugging/index.html @@ -90,11 +90,11 @@ YellowBox.ignoreWarnings(['Warning: ...']);

Note: if you prefer to avoid global installations, you can add react-devtools as a project dependency. Add the react-devtools package to your project using npm install --save-dev react-devtools, then add "react-devtools": "react-devtools" to the scripts section in your package.json, and then run npm run react-devtools from your project folder to open the DevTools.

Integration with React Native Inspector

-

Open the in-app developer menu and choose "Show Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

+

Open the in-app developer menu and choose "Toggle Inspector". It will bring up an overlay that lets you tap on any UI element and see information about it:

React Native Inspector

However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools:

React DevTools Inspector Integration

-

You can choose "Hide Inspector" in the same menu to exit this mode.

+

You can choose "Toggle Inspector" in the same menu to exit this mode.

Inspecting Component Instances

When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.

First, follow the instructions for debugging in Chrome to open the Chrome console.