React 是一款非常流行的前端框架，它可以极大地提升我们开发 Web 应用的效率，但有时我们会碰到一些问题，比如在 Chrome 上调试 React 转 ES5 代码时无法调试的问题。这篇文章将介绍如何解决这个问题，并给出相关的示例代码。
问题描述
在使用 React 进行开发时，我们会用到像 webpack、gulp 等构建工具，这些工具会把我们编写的 ES6 或 TypeScript 代码转换为 ES5 代码，以便支持更多的浏览器。但是，当我们在 Chrome 上调试这些转换后的代码时，有时会发现无法进行调试，出现如下的情况：
从上图中可以看到，我们得到的并不是我们期望的真实代码，而是转换后的代码，这使得调试变得异常困难。
解决方案
为了解决这个问题，我们需要对我们的构建工具进行一些调整来确保我们得到的代码可以被 Chrome 正确地解析。
在这里，我们以 webpack 为例进行说明。
修改 webpack 配置
首先，我们需要将 webpack 的 devtool 配置项从默认的 eval 改为 source-map：
// webpack.config.js module.exports = { // ... devtool: 'source-map' };
然后，在我们的应用代码中，我们需要做一些修改以便 webpack 生成正确的 sourcemap 信息：
-- -------------------- ---- ------- -- -------- ------ ----- ---- -------- ------ -------- ---- ------------ -- --- ----- ---------------- --- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----- --- ------- --------------- - -------- - ------ ----------- ------------- - - -------------------- --- ---------------------------------展开代码
在上面的代码中，我们加入了一行注释 //# sourceMappingURL=...，这是为了告诉 webpack 在生成代码时，使用正确的 sourcemap 信息。
调试应用
经过上述调整后，我们重新运行 webpack，然后打开我们的应用，并在 Chrome 的 Developer Tools 中按下 F12 键以打开调试工具，我们可以看到如下的效果：
此时，我们可以正确地看到我们编写的代码，而非编译后的代码。这样就可以非常方便地进行调试了。
结语
本文介绍了如何解决在 Chrome 上调试 React 转 ES5 代码时无法调试的问题，提供了详细的解决方案，并配以相关的示例代码。希望这篇文章对您有所帮助，能让您在开发过程中更加高效地进行调试工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b70e5a306f20b3a63a8dc3
