2018年如何在Chrome中调试ES6代码？express项目调试遇阻

我之前也碰到过一模一样的情况！问题出在babel-node默认没有生成source map，Chrome没法把转译后的代码映射回你写的ES6源码，所以只能看到_babel_node.js。不用纠结废弃的babel-node-debug，用下面的方法就能搞定：

方法1：命令行直接指定source map #

修改你package.json里的scripts，加上--source-maps inline参数，同时别忘了指定你的入口文件（比如app.js或者server.js）：

"scripts": {
  "server-debug": "babel-node --inspect-brk --source-maps inline ./app.js"
}

启动npm run server-debug后，打开Chrome输入chrome://inspect，检查目标列表里有没有localhost:9229，点击inspect进入调试面板，就能在Sources里找到你自己的代码了（一般在file://路径下）。

方法2：通过Babel配置文件全局开启source map #

如果不想每次命令行加参数，可以在你的Babel配置文件（.babelrc或者babel.config.json）里添加sourceMaps配置：

{
  "presets": ["@babel/preset-env"], // 你的preset配置，根据实际情况调整
  "sourceMaps": "inline"
}

这样scripts里的命令可以简化成：

"scripts": {
  "server-debug": "babel-node --inspect-brk ./app.js"
}

同样启动调试后，Chrome就能正确映射到你的原始代码了。

额外提示 #

• 确保你的Babel版本是较新的，旧版本可能对source map的支持有问题；
• 如果调试时还是找不到代码，可以在Sources面板的左侧搜索你的文件名，快速定位。

内容的提问来源于stack exchange，提问作者nowox