Published on
· 3 min read

React Developer Tools 使用小记

Authors
  • avatar
    Name
    Aven Ji
    Twitter
Table of Contents

1. 组件树观察

  • 在 Components 面板可以查看完整的组件层级结构。
  • 选中任意组件节点后，你可以：
    • 实时查看与编辑 props / state：修改后会立即触发组件重新渲染，无需回到代码或频繁 console.log。
    • 查看组件当前挂载的 hooks（如 useState、useEffect 等）及其状态。

还可以查看组件的 render 方法。如果点进去发现它引用了某个组件库（例如源码是类似 button.js 这样的文件），此时可以继续查看 render，并沿着调用链向上溯源，找到真正的业务实现位置。

提示：确保选中的是 组件最外层节点（显示组件名的那一层），否则只能看到生成的原生 DOM 节点信息。

2. 源码定位（Source Maps）

启用 source map 后，DevTools 可以把运行中的组件精确映射到源码文件及行号，极大提升调试效率。

  1. 正确点击位置：
  • 需要选中显示组件名的那一层（最外层组件节点），才能跳转到对应的 .tsx 源文件。
  • 如果点到中间的 DOM 元素（例如 button 标签），只能跳到按钮组件的源码，而不是你定义的业务组件位置。
  1. 跳转到源码
    • 在右侧面板点击 View source（小文件图标）。
    • 浏览器会在 Sources 面板打开类似下方的路径：
//# sourceURL=rsc://React/Server/webpack-internal:///(rsc)/./components/HeroSection.tsx?90
//# sourceMappingURL=http://localhost:3000/__nextjs_source-map?filename=webpack-internal%3A%2F%2F%2F%28rsc%29%2F.%2Fcomponents%2FHeroSection.tsx
  1. 在 VS Code 快速打开
    • 复制 webpack-internal:///(rsc)/./components/HeroSection.tsx 之后的相对路径： components/HeroSection.tsx
    • 在 VS Code 中按 Cmd+P，粘贴路径并回车，即可跳转到准确位置。
    • 如果路径前还有 webpack://<app-name>/ 前缀，可删除这部分后再粘贴。

小贴士：

  • 确保构建工具（Webpack／Vite 等）开启了 devtool:"source-map" 或等效配置。
  • 在大型项目中，使用 Ctrl+Shift+F（全局搜索）也能快速定位对应文件。

借助以上技巧，可以在浏览器和编辑器之间无缝切换，快速定位问题并验证修改，大幅提升 React 开发调试效率。