如何debugging在es6 / es7中编写的node.js后端?

我想直接debugginges7源代码。 我发现只有一个工作方式来debugging已经发生的es5代码,但这是非常不方便的。 我尝试了babel-node --inspect my_es7_file.js ,但它不起作用。 此外babel-node-debug也不起作用。 有我想要debugging的代码示例:

 import path from 'path'; const run = async filename => { console.log('filename', filename); await new Promise(resolve => setTimeout(resolve, 100)); debugger; await new Promise(resolve => setTimeout(resolve, 100)); const newPath = path.resolve(__dirname, filename); console.log('newPath', newPath); return newPath; } run('hello.js').then(process.exit); 

这个代码运行良好,当我运行它使用babel节点

UPD我不喜欢Webstorm和VS Code。 我想在Atom中编写代码并在chrome开发工具中进行debugging。

要做到这一点,你需要有Babel制作源地图( --source-maps标志)。 举例来说,如果你在本地安装了babel-cli

 npm install --save-dev babel-cli

然后你在package.jsonbuild立一个构build脚本,也许把所有的脚本放到src并编译成dest

 {
   “name”:“blah”,
   “版本”:“0.0.0”,
   “description”:“”,
   “main”:“index.js”,
   “脚本”:{
     “build”:“babel src -d dest --source-maps”
   },
   “作者”:“”,
   “牌照”:“等等”,
   “依赖关系”:{},
   “devDependencies”:{
     “babel-cli”:“〜6.24.1”
   }
 }

那么如果你有,比如src/test.js ,你可以用npm run build构build它:

 npm运行构build

…然后你可以通过debugging它

 node --inspect --debug-brk dest / test.js

(假设Node v6.3.0或更高版本,内置了检查器。之前,您需要使用node-inspector或类似工具。)

这会给你一个URL粘贴到Chrome来启动debugging器,并停在第一行(这是--debug-brk部分),所以你不必debugger; 在你的代码中。

再说一遍:关键的一点是--source-maps ,然后把它集成到你的构build脚本(gulp,grunt,npm本身,不pipe你想要的)。


重新评论:

即使使用源地图,它也不能与es6一起工作

是的,它确实:

src/test-es6.js

 const x = n => n * 2; console.log(x(2)); // 4 

使用上面的package.json和这个.babelrc (因为通过“使用ES6”,我把它想要把ES2015 +转换成ES5):

 {
   “预设”:[“es2015”]
 }

build立:

 $ npm运行构build

 > btemp@0.0.0 build / home / example
 > babel src -d dest --source-maps

 src / test-es6.js  - > dest / test-es6.js

结果dest/test-es6.js

 "use strict"; var x = function x(n) { return n * 2; }; console.log(x(2)); // 4 

运行:

 $ node --inspect --debug -brk dest / test-es6.js
debugging器在端口9229上侦听。
警告:这是一个实验性function,可以随时更改。
要开始debugging,请在Chrome中打开以下url:
    铬devtools://devtools/bundled/inspector.html实验=真v8only =真WS = 127.0.0.1:9229 / 8dd843bf-16d5-477f  -  BACF,f72e2dfd6bbc

去那个URL: 在这里输入图像描述

这是使用节点v7.7.2,但任何从v6.3.0及以上应该工作。

看起来有时候,它不会自动为你打开src文件(当我运行上面的代码时,它是为我做的;我只是再次尝试了几次,而不是)。 当它不,你可能会看到这样的:

运行es6-2

请注意“检测到源地图”通知。 如果是这样,只需展开左侧的文件树,导航到src ,然后select文件。 然后您可以debuggingES2015源代码。 我不知道为什么它有时无法自动打开文件。

我find了使用节点6.3.1版本和babel-node-debug的方法。 在此之前,我使用了节点7.10.0版本。 另外,不需要添加debugger; 进入源代码。 在运行babel-node-debug my_es6_script.js之后,可以直接在chrome dev工具中添加断点

我想这是目前唯一的解决scheme。

再次debugginges6 / es7 node.js代码,您需要使用节点6.3.1和babel-node-debug。