Babel 是现代前端开发中必不可少的一个工具，它可以将最新的 ECMAScript 语法转换为兼容性更好的 JavaScript 代码。编译生成的代码对于我们开发和调试来说起到了重要的作用，但当遇到问题时，我们也需要了解如何去调试这些代码。
调试生成的代码
在开发过程中，我们通常会使用 Babel 将最新的 ECMAScript 语法转换为相应的兼容性更好的 JavaScript 代码。Babel 支持不同的环境，如 Node.js、浏览器等。这个过程中，经常会遇到一些转换错误，我们需要知道如何调试这些生成的代码。
1. 使用 source map
Babel 可以生成 source map，这样我们就可以在浏览器中调试源代码而不是转换后的代码。source map 是一种映射文件，可以将编译生成的代码映射回原始的源代码。可以在 Babel 的配置文件（.babelrc）中启用 source map，示例代码如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------- -----
-------------- --------
--------- --
---------- -- ------ --- ------
---------- -----
-
-
--
------------- ----
-如果你使用的是 Webpack，你可以添加以下配置到你的 Webpack 配置文件：
module.exports = {
devtool: '#source-map'
}2. 在生成的代码中添加调试语句
除了使用 source map 外，我们也可以在生成的代码中添加调试语句。在需要调试的代码行上添加 debugger; 语句，然后在浏览器中打开调试器，即可在这个位置停止并调试代码。
function foo() {
const bar = 'bar';
debugger;
console.log(bar);
};
foo();这个代码段中，当调用 foo() 函数时，调试器会在 debugger; 语句处停止并等待调试。
3. 使用 Chrome 插件
除了使用源码映射和调试语句外，我们还可以使用一些插件来帮助我们调试编译生成的代码。
比如，在 Chrome 浏览器中有一个名为 BabelJS 的插件，它可以将编译生成的代码转换为原始的源代码来调试。
除了 BabelJS 插件外，还有许多其他的插件可以用来调试编译生成的代码，你可以根据自己的需要进行搜索和使用。
总结
在前端开发中，Babel 是一个非常重要的工具，它能够帮助我们将最新的 ECMAScript 语法转换为兼容性更好的代码。在使用 Babel 时，我们也应该了解如何调试编译生成的代码，这样可以更快地发现问题并解决。
本文介绍了一些在调试生成的代码时使用的技巧，如使用 source map、在生成的代码中添加调试语句和使用 Chrome 插件。这些技巧对于前端开发人员在调试编译生成的代码时将会非常有用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460b87e968c7c53b025af24