如何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.json
build立一个构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
文件(当我运行上面的代码时,它是为我做的;我只是再次尝试了几次,而不是)。 当它不,你可能会看到这样的:
请注意“检测到源地图”通知。 如果是这样,只需展开左侧的文件树,导航到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。