如何用 react-devtools-shell 测试工具验证对 react-devtools-inline 的本地修改【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react修改了react-devtools-inline的源码后需要在一个真实的浏览器环境里确认改动生效而不能只看单元测试。React 仓库为此提供了一个本地测试工具 react-devtools-shell它的定位是 Harness for testing local changes to thereact-devtools-inlineandreact-devtools-sharedpackages即在浏览器中以内联inlined方式运行 DevTools UI配合一个 React 测试应用来观察你的改动。完整的操作路径是先在仓库根目录构建 DevTools 依赖的本地包再让react-devtools-inline进入 watch 模式持续重建然后启动 shell 的本地服务器最后打开 http://localhost:8080/ 查看效果。下面按这个顺序说明每一步。准备条件开始之前需要确认两点你持有的是 React 仓库react 主仓库的一份本地源码并且已用yarn安装过仓库依赖环境满足 Node yarn仓库使用cross-env等跨平台脚本。一个必须了解的前提DevTools包括react-devtools-inline的 UI依赖若干仅存在于 experimental 发布渠道的实验性 API因此本地开发时需要reactexperimental与react-domexperimental。这也是为什么下面的依赖构建步骤固定使用--release-channelexperimental而不是普通的 stable 构建产物见 react-devtools-inline 的 Local development 一节。构建 DevTools 依赖的本地包react-devtools-inline依赖 workspace 内若干本地版本的 npm 包需要先构建或下载否则 watch 构建无从谈起。两条路径任选其一从源码构建推荐主路径。在仓库根目录执行yarn build-for-devtools该命令定义在根目录 package.json实际内容为cross-env yarn build react/index,react/jsx,react/compiler-runtime,react-dom/index,react-dom/client,react-dom/unstable_testing,react-dom/test-utils,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --typeNODE --release-channelexperimental即按 experimental 渠道构建上面列出的这些包产物落在build/oss-experimental/。从 CI 下载可选分支。如果不想本地构建也可以取 CI 上最新的构建产物cd scripts/release/ yarn ./download-experimental-build.js --commitmain--commitmain表示下载 main 分支的最新构建换成其他 commit 标识即可取对应的构建。启动 react-devtools-inline 的 watch 模式依赖准备好后让react-devtools-inline监听源码变化并自动重建。react-devtools-inline的 package.json 中定义了cross-env NODE_ENVdevelopment webpack --config webpack.config.js --watch在对应目录下执行即可cd packages/react-devtools-inline yarn start这个进程需要保持运行。它把react-devtools-inline重新打包并持续输出构建产物shell 里 DevTools 引用的正是这个包的本地版本而不是已发布到 npm 的版本。之后你对react-devtools-inline源码做的任何修改都会由 watch 进程自动重新构建。运行 react-devtools-shell 测试工具shell 的 README 明确说明这个测试工具应该与react-devtools-inline的本地开发进程并行运行即上面一步的 watch 必须先处于运行状态。然后cd packages/react-devtools-shell yarn startyarn start对应的脚本是 cross-env NODE_ENVdevelopment node ./webpack-server.js。webpack-server.js 会做两件事以 development 模式用 webpack 编译 shell 自身入口包括./src/app/index.js、./src/app/devtools.js等见 webpack-server.js 的 entry 定义并把react、react-dom等别名指向build/oss-experimental/下的本地构建产物启动 webpack-dev-server主页面服务在8080 端口webpack-server.js配置了hot: true、open: true浏览器会自动打开另有一个服务于 e2e regression 页面的 8181 端口实例。编译完成后终端会打印Compiled successfully.来自 constants.js。在浏览器中验证修改按 shell README 的说明两个进程都就绪后在浏览器打开http://localhost:8080/即可看到内嵌了 DevTools 的测试工具页面。这个页面index.html的结构是#targetiframe 中注入 React 测试应用同时安装 DevTools backend#devtools区域渲染 DevTools 前端 UI页面顶部有Unmount test app按钮以及 Layout 切换Left/Right Split、Top/Bottom Split。页面加载的dist/app-devtools.js由 src/app/devtools.js 编译而来其中直接 import 了本地包的入口import { activate as activateBackend, initialize as initializeBackend, } from react-devtools-inline/backend; import {initialize as initializeFrontend} from react-devtools-inline/frontend;所以验证方式很直接修改react-devtools-inline源码 → watch 进程重新构建 → shell 侧的 webpack-dev-server 带 HMRhot: true重新编译并在浏览器中生效 → 在 http://localhost:8080/ 页面上观察 DevTools 的行为是否如你预期。如果需要跑自动化或回归场景shell 首页右上角提供了入口链接见 index.html/multi.html— 同页多个 DevTools 实例/e2e.html— e2e tests/e2e-regression.html— e2e regression tests/perf-regression.html— perf regression tests。这些页面各自的 devtools 入口同样 import 自react-devtools-inline的 backend/frontend例如 src/e2e/devtools.js、src/multi/devtools.js因此可以用来验证你在不同集成形态下的改动。限制与注意事项experimental 渠道是硬性前提。文档明确说明 DevTools UI 依赖仅 experimental 渠道可用的 API如果build/oss-experimental/下没有产物即跳过了第一步shell 编译时别指向的本地包会缺失。两个进程缺一不可。shell 的 README 把先按react-devtools-inlineREADME 的 local development 一节跑起来再运行 shell写成了固定顺序watch 进程停止后你对 inline 的修改不会再体现到页面上。用旧版 React 做对照是可选操作。webpack-server.js支持REACT_VERSION环境变量设置后会被semver.coerce处理React 18 以下使用ReactDOM.render而非createRoot且 React 相关别名改指向build-regression/node_moduleswebpack-server.js。只有需要验证 DevTools 对旧版本 React 的兼容表现时才使用它默认流程不需要。修改验证完成后结束方式为直接停掉两个yarn start进程即可本流程不涉及删除文件或修改全局环境。react-devtools-inlineREADME 的 Local development 一节最后也指回了这条路径To test package changes, refer to thereact-devtools-shellREADME即 shell 就是该包官方给出的变更验证入口。【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何用 react-devtools-shell 测试工具验证对 react-devtools-inline 的本地修改【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react修改了react-devtools-inline的源码后需要在一个真实的浏览器环境里确认改动生效而不能只看单元测试。React 仓库为此提供了一个本地测试工具 react-devtools-shell它的定位是 Harness for testing local changes to thereact-devtools-inlineandreact-devtools-sharedpackages即在浏览器中以内联inlined方式运行 DevTools UI配合一个 React 测试应用来观察你的改动。完整的操作路径是先在仓库根目录构建 DevTools 依赖的本地包再让react-devtools-inline进入 watch 模式持续重建然后启动 shell 的本地服务器最后打开 http://localhost:8080/ 查看效果。下面按这个顺序说明每一步。准备条件开始之前需要确认两点你持有的是 React 仓库react 主仓库的一份本地源码并且已用yarn安装过仓库依赖环境满足 Node yarn仓库使用cross-env等跨平台脚本。一个必须了解的前提DevTools包括react-devtools-inline的 UI依赖若干仅存在于 experimental 发布渠道的实验性 API因此本地开发时需要reactexperimental与react-domexperimental。这也是为什么下面的依赖构建步骤固定使用--release-channelexperimental而不是普通的 stable 构建产物见 react-devtools-inline 的 Local development 一节。构建 DevTools 依赖的本地包react-devtools-inline依赖 workspace 内若干本地版本的 npm 包需要先构建或下载否则 watch 构建无从谈起。两条路径任选其一从源码构建推荐主路径。在仓库根目录执行yarn build-for-devtools该命令定义在根目录 package.json实际内容为cross-env yarn build react/index,react/jsx,react/compiler-runtime,react-dom/index,react-dom/client,react-dom/unstable_testing,react-dom/test-utils,react-is,react-debug-tools,scheduler,react-test-renderer,react-refresh,react-art --typeNODE --release-channelexperimental即按 experimental 渠道构建上面列出的这些包产物落在build/oss-experimental/。从 CI 下载可选分支。如果不想本地构建也可以取 CI 上最新的构建产物cd scripts/release/ yarn ./download-experimental-build.js --commitmain--commitmain表示下载 main 分支的最新构建换成其他 commit 标识即可取对应的构建。启动 react-devtools-inline 的 watch 模式依赖准备好后让react-devtools-inline监听源码变化并自动重建。react-devtools-inline的 package.json 中定义了cross-env NODE_ENVdevelopment webpack --config webpack.config.js --watch在对应目录下执行即可cd packages/react-devtools-inline yarn start这个进程需要保持运行。它把react-devtools-inline重新打包并持续输出构建产物shell 里 DevTools 引用的正是这个包的本地版本而不是已发布到 npm 的版本。之后你对react-devtools-inline源码做的任何修改都会由 watch 进程自动重新构建。运行 react-devtools-shell 测试工具shell 的 README 明确说明这个测试工具应该与react-devtools-inline的本地开发进程并行运行即上面一步的 watch 必须先处于运行状态。然后cd packages/react-devtools-shell yarn startyarn start对应的脚本是 cross-env NODE_ENVdevelopment node ./webpack-server.js。webpack-server.js 会做两件事以 development 模式用 webpack 编译 shell 自身入口包括./src/app/index.js、./src/app/devtools.js等见 webpack-server.js 的 entry 定义并把react、react-dom等别名指向build/oss-experimental/下的本地构建产物启动 webpack-dev-server主页面服务在8080 端口webpack-server.js配置了hot: true、open: true浏览器会自动打开另有一个服务于 e2e regression 页面的 8181 端口实例。编译完成后终端会打印Compiled successfully.来自 constants.js。在浏览器中验证修改按 shell README 的说明两个进程都就绪后在浏览器打开http://localhost:8080/即可看到内嵌了 DevTools 的测试工具页面。这个页面index.html的结构是#targetiframe 中注入 React 测试应用同时安装 DevTools backend#devtools区域渲染 DevTools 前端 UI页面顶部有Unmount test app按钮以及 Layout 切换Left/Right Split、Top/Bottom Split。页面加载的dist/app-devtools.js由 src/app/devtools.js 编译而来其中直接 import 了本地包的入口import { activate as activateBackend, initialize as initializeBackend, } from react-devtools-inline/backend; import {initialize as initializeFrontend} from react-devtools-inline/frontend;所以验证方式很直接修改react-devtools-inline源码 → watch 进程重新构建 → shell 侧的 webpack-dev-server 带 HMRhot: true重新编译并在浏览器中生效 → 在 http://localhost:8080/ 页面上观察 DevTools 的行为是否如你预期。如果需要跑自动化或回归场景shell 首页右上角提供了入口链接见 index.html/multi.html— 同页多个 DevTools 实例/e2e.html— e2e tests/e2e-regression.html— e2e regression tests/perf-regression.html— perf regression tests。这些页面各自的 devtools 入口同样 import 自react-devtools-inline的 backend/frontend例如 src/e2e/devtools.js、src/multi/devtools.js因此可以用来验证你在不同集成形态下的改动。限制与注意事项experimental 渠道是硬性前提。文档明确说明 DevTools UI 依赖仅 experimental 渠道可用的 API如果build/oss-experimental/下没有产物即跳过了第一步shell 编译时别指向的本地包会缺失。两个进程缺一不可。shell 的 README 把先按react-devtools-inlineREADME 的 local development 一节跑起来再运行 shell写成了固定顺序watch 进程停止后你对 inline 的修改不会再体现到页面上。用旧版 React 做对照是可选操作。webpack-server.js支持REACT_VERSION环境变量设置后会被semver.coerce处理React 18 以下使用ReactDOM.render而非createRoot且 React 相关别名改指向build-regression/node_moduleswebpack-server.js。只有需要验证 DevTools 对旧版本 React 的兼容表现时才使用它默认流程不需要。修改验证完成后结束方式为直接停掉两个yarn start进程即可本流程不涉及删除文件或修改全局环境。react-devtools-inlineREADME 的 Local development 一节最后也指回了这条路径To test package changes, refer to thereact-devtools-shellREADME即 shell 就是该包官方给出的变更验证入口。【免费下载链接】reactThe library for web and native user interfaces.项目地址: https://gitcode.com/GitHub_Trending/re/react创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
空间)
