javascript - 如何调试用 es6/es7 编写的 node.js 后端？

Question

我想直接调试es7源码。我找到了唯一一种调试已经泄露的 es5 代码的方法，但它非常不方便。我尝试了 babel-node --inspect my_es7_file.js，但它不起作用。此外 babel-node-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);

这段代码在我使用 babel-node 运行时运行良好

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

Answer 1

为此，您需要让 Babel 生成源 map (--source-maps 标志)。例如，如果你在本地安装了 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:

{  "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:

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.)

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; in your code.

Again: The key bit is --source-maps, integrate it into your build script (gulp, grunt, npm itself, whatever) however you want.

---

Re your comment:

it doesn't work with es6 even with source-maps

Yes, it does:

src/test-es6.js:

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

使用上面的 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-mapssrc/test-es6.js -> dest/test-es6.js

Contents of the resulting 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.jsDebugger 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

转到该 URL:

这是使用 Node v7.7.2，但是 v6.3.0 及更高版本的任何东西都应该可以工作。

有时，它似乎不会自动为您打开 src 文件(当我运行上面的代码时，它为我打开了；我只是再试了几次，但没有打开) ).如果没有，您可能会看到:

注意“检测到源映射”通知。如果是这样，只需展开左侧的文件树，导航到 src，然后选择文件。然后您可以调试 ES2015 源代码。我不知道为什么它有时无法自动为您打开文件。