React 调试难题：如何显示组件 JS 文件，轻松定位问题

如何调试 React 应用程序：显示组件 JS 文件

问题：仅显示 Bundle.js

在调试 React 应用程序时，你可能会发现 Chrome 开发者工具仅显示 bundle.js，而不是正常的组件 JS 文件。这使得调试特定组件变得困难。

原因：代码打包

这种情况发生的原因是 React 使用打包工具将应用程序的所有 JS 文件捆绑到一个文件（bundle.js）中，以提高性能。

解决方法

有几种方法可以解决此问题：

1. 使用 Source Maps

Source maps 允许 Chrome 将捆绑代码映射回原始源文件，使你可以像调试正常组件 JS 文件一样调试代码。在构建过程中启用 source maps。

2. 使用 Chrome 扩展

Source Map Explorer 和 Redux DevTools 等扩展程序可以帮助调试捆绑 JS 代码。

3. 在本地运行

在本地运行应用程序，而不将其部署到生产环境，可以让你调试未打包的代码。

4. 使用 React 开发工具

React 开发工具 扩展程序提供工具来调试 React 应用程序，包括查看组件层次结构和检查 props。

推荐方法

最佳方法取决于你的情况：

• 生产环境：启用 source maps 或使用 Chrome 扩展
• 开发环境：在本地运行或使用 React 开发工具

常见问题解答

1. Source maps 只能在开发环境中使用吗？

否，也可以在生产环境中使用，但可能会降低应用程序性能。

2. 是否有其他调试 React 应用程序的方法？

是的，可以使用控制台中的 console.log() 或 console.table 来打印数据。

3. 如何知道 source maps 是否正在工作？

在 Chrome 开发者工具中，源文件选项卡下应该显示原始组件 JS 文件。

4. Redux DevTools 只能调试 Redux 应用程序吗？

否，它还可以用于调试非 Redux 应用程序。

5. 如何在 React 应用程序中设置 source maps？

具体的设置方法取决于你的构建工具，例如 Webpack 或 Rollup。参考他们的文档了解更多信息。