在 chrome 开发者控制台中显示文件名而不是块

Posted 2023-02-21

【中文标题】在 chrome 开发者控制台中显示文件名而不是块

【英文标题】：Show file names instead of chunks in chrome developer console

【发布时间】：2021-12-19 16:58:24

【问题描述】：

当我的 react 17 应用程序出现错误时，chrome 开发者控制台会向块文件路径显示错误，而不是包含错误组件的实际源文件。是否可以显示真实文件路径而不是块？我已经检查过，所有文件都生成了一个源映射。

样本错误

index.js:1 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at tr
    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73
    at TableRow (http://localhost:3000/static/js/vendors~main.chunk.js:42348:84)
    at thead
    at http://localhost:3000/static/js/vendors~main.chunk.js:1363:73
    at TableHead (http://localhost:3000/static/js/vendors~main.chunk.js:41463:84)
    at HeadTable (http://localhost:3000/static/js/4.chunk.js:504:21)
    at table
    ......

预期结果示例

index.js:1 Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
    at tr
    at ./src/components/Table.tsx:1363:73
    ......

【问题讨论】：

您正在使用 CRA 吗？

是的，所以最好不用react-scripts eject来解决这个问题@

如果您将 CRA 全新安装到新目录中，您是否还有这种行为？您是否向 CRA 添加了任何高级配置？最后，使用新的 CRA，我在 Chrome 开发工具中看到了警告和错误的相对路径。

【参考方案1】：

在 React 的错误边界页面上查看此部分：Component Stack Traces

这是一个简短的段落，介绍了使用 this babel plugin 获得所需输出的结果和说明。

【参考方案2】：

在开发中，如果您在 Chrome 浏览器或 Firefox 中使用 React Development Tool，您将能够查看您的应用及其所有组件的源代码。

如果你想查看你的 React Redux 状态，我也推荐React Redux Development Tool。