[英]How to debug node.js backend written in es6/es7?
I want to debug es7 source code directly. 我想直接调试es7源代码。 I found the only one working way to debug already transpired es5 code, but it is very inconvenient.
我找到了唯一一种调试已发生的es5代码的工作方式,但它非常不方便。 I tried
babel-node --inspect my_es7_file.js
, but it doesn't work. 我尝试了
babel-node --inspect my_es7_file.js
,但它不起作用。 Also babel-node-debug
doesn't work too. babel-node-debug
也不起作用。 There is my code example which I want to debug: 我想调试我的代码示例:
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);
this code works well when I run it using babel-node 当我使用babel-node运行它时,此代码运行良好
UPD I don't like Webstorm and VS Code. UPD我不喜欢Webstorm和VS Code。 I want to write code in Atom and debug it in chrome dev tools.
我想在Atom中编写代码并在chrome dev工具中调试它。
To do this, you need to have Babel produce source maps (the --source-maps
flag). 为此,您需要让Babel生成源映射(
--source-maps
标志)。 So for instance, if you have babel-cli
installed locally: 例如,如果您在本地安装了
babel-cli
:
npm install --save-dev babel-cli
And you set up a build script in your package.json
, perhaps taking all scripts in src
and compiling them to dest
: 你在
package.json
设置了一个构建脚本,也许在src
获取所有脚本并将它们编译为dest
:
{ "name": "blah", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "build": "babel src -d dest --source-maps" }, "author": "", "license": "blah", "dependencies": {}, "devDependencies": { "babel-cli": "~6.24.1" } }
Then if you have, say, src/test.js
, you'd build it with npm run build
: 然后,如果你有
src/test.js
,你可以使用npm run build
构建它:
npm run build
...and then you can debug it via ...然后你可以通过调试它
node --inspect --debug-brk dest/test.js
(That's assuming Node v6.3.0 or higher, which has inspector built in. Prior, you'd need to use node-inspector
or similar.) (这是假设Node v6.3.0或更高版本,其中内置了检查器。之前,您需要使用
node-inspector
或类似的。)
That will give you a URL to paste into Chrome to fire up the debugger, and will stop on the first line (that's the --debug-brk
part) so you don't have to hav debugger;
这将为您提供一个粘贴到Chrome以启动调试器的URL,并将停在第一行(即
--debug-brk
部分),因此您不必使用debugger;
in your code. 在你的代码中。
Again: The key bit is --source-maps
, integrate it into your build script (gulp, grunt, npm itself, whatever) however you want. 再次:关键位是
--source-maps
,将其集成到您的构建脚本(gulp,grunt,npm本身,无论如何),无论您想要什么。
Re your comment: 你的评论:
it doesn't work with es6 even with source-maps
即使使用源映射,它也无法与es6一起使用
Yes, it does: 是的,它确实:
src/test-es6.js
: src/test-es6.js
:
const x = n => n * 2;
console.log(x(2)); // 4
Using the package.json
above, and this .babelrc
(since by "with ES6" I take it you want to transpile ES2015+ to ES5): 使用上面的
package.json
和这个.babelrc
(因为“with ES6”我认为你需要将ES2015 +转换为ES5):
{ "presets": ["es2015"] }
Build: 建立:
$ npm run build > btemp@0.0.0 build /home/example > babel src -d dest --source-maps src/test-es6.js -> dest/test-es6.js
Contents of the resulting dest/test-es6.js
: 生成的
dest/test-es6.js
:
"use strict";
var x = function x(n) {
return n * 2;
};
console.log(x(2)); // 4
Running: 运行:
$ node --inspect --debug-brk dest/test-es6.js Debugger listening on port 9229. Warning: This is an experimental feature and could change at any time. To start debugging, open the following URL in Chrome: chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/8dd843bf-16d5-477f-bacf-f72e2dfd6bbc
This is using Node v7.7.2, but anything from v6.3.0 and up should work. 这是使用Node v7.7.2,但v6.3.0及更高版本中的任何内容都应该有效。
It would appear that sometimes, it doesn't automatically open the src
file for you (it did for me when I ran the above; I just tried again, several times, and it didnt'). 看起来有时,它不会自动为你打开
src
文件(当我运行上面的时候,它为我做了;我只是再次尝试,几次,它没有')。 When it doesn't, you may see this: 如果没有,你可能会看到:
Note the "Source Map detected" notice. 请注意“检测到源地图”通知。 If so, just expand the file tree on the left, navigate to
src
, and pick the file. 如果是这样,只需展开左侧的文件树,导航到
src
,然后选择文件。 You can then debug the ES2015 source. 然后,您可以调试ES2015源。 I don't know why it sometimes fails to open the file for you automatically.
我不知道为什么它有时无法自动为您打开文件。
I found the way to do that using node 6.3.1 version and babel-node-debug. 我找到了使用节点6.3.1版本和babel-node-debug的方法。 Before it, I used node 7.10.0 version.
在它之前,我使用了节点7.10.0版本。 Also, there is no need to add
debugger;
此外,无需添加
debugger;
into the source code. 进入源代码。 There is ability to add breakpoints directly in chrome dev tools, after running
babel-node-debug my_es6_script.js
在运行
babel-node-debug my_es6_script.js
后,可以直接在chrome dev工具中添加断点
I guess this is the only solution for this moment. 我想这是目前唯一的解决方案。
Again to debug es6/es7 node.js code, you need to use node 6.3.1 and babel-node-debug. 再次调试es6 / es7 node.js代码,需要使用节点6.3.1和babel-node-debug。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.