|
1 | | -# React Developer Tools [](https://travis-ci.org/facebook/react-devtools) |
| 1 | +#### This project has migrated to [github.com/facebook/react](https://github.com/facebook/react) |
2 | 2 |
|
3 | | -React Developer Tools lets you inspect the React component hierarchy, including component props and state. |
| 3 | +The source code for the v3 of the extension can be found in the [`v3` branch](https://github.com/facebook/react-devtools/tree/v3). |
4 | 4 |
|
5 | | -It exists both as a browser extension (for [Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) and [Firefox](https://addons.mozilla.org/firefox/addon/react-devtools/)), and as a [standalone app](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools) (works with other environments including Safari, IE, and React Native). |
| 5 | +To build the v3 browser extension from source: |
| 6 | +```sh |
| 7 | +git checkout v3 |
6 | 8 |
|
7 | | - |
8 | | - |
9 | | -## Installation |
10 | | - |
11 | | -### Pre-packaged |
12 | | - |
13 | | -The official extensions represent the current stable release. |
14 | | - |
15 | | -- [Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) |
16 | | -- [Firefox extension](https://addons.mozilla.org/firefox/addon/react-devtools/) |
17 | | -- [Standalone app (Safari, React Native, etc)](https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md) |
18 | | - |
19 | | -Opera users can [enable Chrome extensions](https://addons.opera.com/extensions/details/download-chrome-extension-9/) and then install the [Chrome extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). |
20 | | - |
21 | | -## Usage |
22 | | - |
23 | | -The extension icon will light up on the websites using React: |
24 | | - |
25 | | -<img src="http://i.imgur.com/3tuhIgm.png" alt="Extension icon becomes active" width="500"> |
26 | | - |
27 | | -On such websites, you will see a tab called React in Chrome Developer Tools: |
28 | | - |
29 | | -<img src="http://i.imgur.com/jYieRqi.png" alt="React tab in DevTools" width="500"> |
30 | | - |
31 | | -A quick way to bring up the DevTools is to right-click on the page and press Inspect. |
32 | | - |
33 | | -### Tree View |
34 | | - |
35 | | -- Arrow keys or hjkl for navigation |
36 | | -- Right click a component to show in elements pane, scroll into view, show |
37 | | - source, etc. |
38 | | -- Differently-colored collapser means the component has state/context |
39 | | - |
40 | | - |
41 | | - |
42 | | -### Side Pane |
43 | | - |
44 | | -- Right-click to store as global variable |
45 | | -- Updates are highlighted |
46 | | - |
47 | | - |
48 | | - |
49 | | -### Search Bar |
50 | | - |
51 | | -- Use the search bar to find components by name |
52 | | - |
53 | | - |
54 | | - |
55 | | -### Handy Tips |
56 | | - |
57 | | -#### Finding Component by a DOM Node |
58 | | - |
59 | | -If you inspect a React element on the page using the regular **Elements** tab, then switch over to the **React** tab, that element will be automatically selected in the React tree. |
60 | | - |
61 | | -#### Finding DOM Node by a Component |
62 | | - |
63 | | -You can right-click any React element in the **React** tab, and choose "Find the DOM node". This will bring you to the corresponding DOM node in the **Elements** tab. |
64 | | - |
65 | | -#### Displaying Element Source |
66 | | - |
67 | | -You may include the [transform-react-jsx-source](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx-source) Babel plugin to see the source file and line number of React elements. This information appears in the bottom of the right panel when available. Don't forget to disable it in production! (Tip: if you use [Create React App](https://github.com/facebookincubator/create-react-app) it is already enabled in development.) |
68 | | - |
69 | | -#### Usage with React Native and Safari |
70 | | - |
71 | | -There is a [standalone version](https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md) that works with other environments such as React Native and Safari. |
72 | | - |
73 | | -## FAQ |
74 | | - |
75 | | -### The React Tab Doesn't Show Up |
76 | | - |
77 | | -**If you are running your app from a local `file://` URL**, don't forget to check "Allow access to file URLs" on the Chrome Extensions settings page. You can find it by opening Settings > Extensions: |
78 | | - |
79 | | - |
80 | | - |
81 | | -Or you could develop with a local HTTP server [like `serve`](https://www.npmjs.com/package/serve). |
82 | | - |
83 | | -**The React tab won't show up if the site doesn't use React**, or if React can't communicate with the devtools. When the page loads, the devtools sets a global named `__REACT_DEVTOOLS_GLOBAL_HOOK__`, then React communicates with that hook during initialization. You can test this on the [React website](http://facebook.github.io/react/) or by inspecting [Facebook](https://www.facebook.com/). |
84 | | - |
85 | | -**If your app is inside of CodePen**, make sure you are registered. Then press Fork (if it's not your pen), and then choose Change View > Debug. The Debug view is inspectable with DevTools because it doesn't use an iframe. |
86 | | - |
87 | | -**If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment**, try [the standalone version instead](https://github.com/facebook/react-devtools/tree/master/packages/react-devtools). Chrome apps are currently not inspectable. |
88 | | - |
89 | | -**If you still have issues** please [report them](https://github.com/facebook/react-devtools/issues/new). Don't forget to specify your OS, browser version, extension version, and the exact instructions to reproduce the issue with a screenshot. |
90 | | - |
91 | | -### Does "Highlight Updates" trace renders? |
92 | | - |
93 | | -With React 15 and earlier, "Highlight Updates" had false positives and highlighted more components than were actually re-rendering. |
94 | | - |
95 | | -Since React 16, it correctly highlights only components that were re-rendered. |
96 | | - |
97 | | -## Contributing |
98 | | - |
99 | | -For changes that don't directly involve Chrome/Firefox/etc. APIs, there is a |
100 | | -"plain" shell that just renders the devtools into an html page along with a |
101 | | -TodoMVC test app. This is by far the quickest way to develop. Check out |
102 | | -[the Readme.md](/shells/plain) in `/shells/plain` for info. |
103 | | - |
104 | | -For other shells (Chrome, Firefox, etc.), see the respective directories in `/shells`. |
105 | | - |
106 | | -For a list of good contribution opportunities, check the [good first bug](https://github.com/facebook/react-devtools/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+bug%22) label. We're happy to answer any questions on those issues! |
107 | | - |
108 | | -To read more about the community and guidelines for submitting pull requests, |
109 | | -please read the [Contributing document](CONTRIBUTING.md). |
110 | | - |
111 | | -## Debugging (in Chrome) |
112 | | - |
113 | | -What to do if the extension breaks. |
114 | | - |
115 | | -- check the error console of devtools. Part of React Devtools runs scripts in |
116 | | - the context of your page, and is vulnerable to misbehaving polyfills. |
117 | | -- open devtools out into a new window, and then hit the shortcut to open |
118 | | - devtools again (cmd+option+j or ctrl+shift+j). This is the "debug |
119 | | - devtools" debugger. Check the console there for errors. |
120 | | -- open `chrome://extensions`, find react devtools, and click "background page" |
121 | | - under "Inspected views". You might find the errors there. |
| 9 | +# Install dependencies and build the unpacked extension |
| 10 | +yarn install |
| 11 | +yarn build:extension |
122 | 12 |
|
| 13 | +# Follow the on-screen instructions to complete installation |
| 14 | +``` |
0 commit comments