Added CHANGELOG and READMEs for DevTools v4 NPM packages (#16404) - #4
Open
Menkalian wants to merge 1 commit into
Open
Added CHANGELOG and READMEs for DevTools v4 NPM packages (#16404)
#4Menkalian wants to merge 1 commit into
Menkalian wants to merge 1 commit into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds comprehensive documentation for React DevTools v4 NPM packages by introducing new README and CHANGELOG files.
- Adds README files for
react-devtools,react-devtools-inline, andreact-devtools-corepackages - Includes a detailed CHANGELOG documenting the major changes and improvements in DevTools v4
- Provides installation instructions, usage examples, and API documentation for each package
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.
| File | Description |
|---|---|
| packages/react-devtools/README.md | Comprehensive user guide covering installation, usage with React Native and React DOM, and development setup |
| packages/react-devtools/CHANGELOG.md | Detailed changelog documenting v4.0.0 features including performance improvements, component filters, hooks support, and profiler enhancements |
| packages/react-devtools-inline/README.md | API documentation and usage examples for embedding DevTools in browser-based IDEs with both sandboxed and non-sandboxed iframe configurations |
| packages/react-devtools-core/README.md | Low-level API documentation for standalone DevTools implementation with configurable connection options |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| 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: | ||
|
|
||
|  |
There was a problem hiding this comment.
Insecure HTTP URL used for external images. Consider using HTTPS to ensure secure content delivery.
|
|
||
| Then select a React component in React DevTools. There is a search box at the top that helps you find one by name. 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 was a problem hiding this comment.
Insecure HTTP URL used for external images. Consider using HTTPS to ensure secure content delivery.
|
|
||
| // React application can be injected into <iframe> at any time now... | ||
| // Note that this would need to be done via <script> tag injection, | ||
| // as setting the src of the <iframe> would load a new page (withou the injected backend). |
There was a problem hiding this comment.
Spelling error: "withou" should be "without".
Suggested change
| // as setting the src of the <iframe> would load a new page (withou the injected backend). | |
| // as setting the src of the <iframe> would load a new page (without the injected backend). |
| ```js | ||
| import { activate, initialize } from "react-devtools-inline/backend"; | ||
|
|
||
| // The DevTooks hook needs to be installed before React is even required! |
There was a problem hiding this comment.
Spelling error: "DevTooks" should be "DevTools".
Suggested change
| // The DevTooks hook needs to be installed before React is even required! | |
| // The DevTools hook needs to be installed before React is even required! |
| The `options` object may contain: | ||
| * `host: string` (defaults to "localhost") - Websocket will connect to this host. | ||
| * `port: number` (defaults to `8097`) - Websocket will connect to this port. | ||
| * `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided. |
There was a problem hiding this comment.
Spelling error: "websocked" should be "websocket".
Suggested change
| * `websocket: Websocket` - Custom websocked to use. Overrides `host` and `port` settings if provided. | |
| * `websocket: Websocket` - Custom websocket to use. Overrides `host` and `port` settings if provided. |
|
|
||
| It works both with React DOM and React Native. | ||
|
|
||
| <img src="http://i.imgur.com/IXeHiZD.png" width="600" alt="Screenshot of React DevTools running with React Native"> |
There was a problem hiding this comment.
Insecure HTTP URL used for an external image. Consider using HTTPS to ensure secure content delivery: https://i.imgur.com/IXeHiZD.png.
|
|
||
| You can open the [in-app developer menu](https://facebook.github.io/react-native/docs/debugging.html#accessing-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: | ||
|
|
||
|  |
There was a problem hiding this comment.
Insecure HTTP URL used for external images. Consider using HTTPS to ensure secure content delivery.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.