If your app is inside an iframe, a Chrome extension, React Native, or in another unusual environment, try the standalone version instead. The Debug view is inspectable with DevTools because it doesn't use an iframe. Then press Fork (if it's not your pen), and then choose Change View > Debug. If your app is inside of CodePen, make sure you are registered. You can test this on the React website or by inspecting Facebook. When the page loads, the devtools sets a global named _REACT_DEVTOOLS_GLOBAL_HOOK_, then React communicates with that hook during initialization. The React tab won't show up if the site doesn't use React, or if React can't communicate with the devtools. Or you could develop with a local HTTP server like serve. You can find it by opening Settings > Extensions: 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. If you need to customize host, port, or other settings, see the react-devtools-core package instead. Advancedīy default DevTools listen to port 8097 on localhost. If you use Webpack and have control over its configuration, you could alternatively add 'react-devtools' as the first item in the entry array of the development-only configuration, and then you wouldn’t need to deal either with tags or import statements. Make sure to remove the import before deploying to production, as it carries a large DevTools client with it. It is important that this import comes before any other imports in your app (especially before react-dom). If you install react-devtools as a project dependency, you may also replace the suggested above with a JavaScript import ( import 'react-devtools'). Don’t forget to remove it before deploying to production! This will ensure the developer tools are connected. Run react-devtools from the terminal to launch the standalone DevTools app: to debug apps in Safari or inside of an iframe). The standalone shell can also be useful with React DOM (e.g. As soon as you select it, it will be available as $r in the Chrome console, letting you inspect its props, state, and instance properties. There is a search box at the top that helps you find one by name. Then select a React component in React DevTools. Make sure that the dropdown in the top left corner of the Chrome console says debuggerWorker.js. When debugging JavaScript in Chrome, you can inspect the props and state of the React components in the browser console.įirst, follow the instructions for debugging in Chrome to open the Chrome console. You can choose "Hide Inspector" in the same menu to exit this mode. In this mode, clicking on something in the simulator will bring up the relevant components in the DevTools: However, when react-devtools is running, Inspector will enter a special collapsed mode, and instead use the DevTools as primary UI. It will bring up an overlay that lets you tap on any UI element and see information about it: You can open the in-app developer menu and choose "Show Inspector". (If this doesn't happen automatically, try reloading the React Native app.) Integration with React Native Inspector If you're using React Native 0.43 or higher, it should connect to your simulator within a few seconds.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |