调试 typescript，gulp 脚本等

debug-typescript.md

调试 Typescript

debugger 浏览器调试法

有两种调试方式。

一种在代码中写 debugger 断点。

task('help', cb => {
    debugger
    console.log();
    console.log(`Try ${yellow('gulp build')} or ${yellow('gulp publish')}.`);
    console.log(`All available commands can be found in ${red('package.json')}.`);
    console.log();
    cb();
});

然后使用 node 的 inspect-brk 选项开启调试。

$ node --inspect-brk ./node_modules/.bin/gulp help
Debugger listening on ws://127.0.0.1:9229/b2efd329-d4db-4fef-8d6b-430f89aa1fb4

打开 http://127.0.0.1:9229/json/list，可以看到如下信息：

[ {
  "description": "node.js instance",
  "devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:9229/b2efd329-d4db-4fef-8d6b-430f89aa1fb4",
  "devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:9229/b2efd329-d4db-4fef-8d6b-430f89aa1fb4",
  "faviconUrl": "https://nodejs.org/static/favicon.ico",
  "id": "b2efd329-d4db-4fef-8d6b-430f89aa1fb4",
  "title": "./node_modules/.bin/gulp",
  "type": "node",
  "url": "file:///Users/zengxiaohui/projects/personal/gulp-ts-demo/node_modules/gulp/bin/gulp.js",
  "webSocketDebuggerUrl": "ws://127.0.0.1:9229/b2efd329-d4db-4fef-8d6b-430f89aa1fb4"
} ]

复制 devtoolsFrontendUrl 字段在新窗口打开，即可进入调试模式。

vscode 调试法

第二种方式依赖 VSCode 的调试功能，更加简单。

首先，我们将待运行命令通过 npm scripts 来运行，注意需要加上 node --inspect-brk=9229，同时指定 gulp 的完整路径。

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",

    // 调试 typescript 编写的 gulp 脚本
    "debug-gulp": "node --inspect-brk=9229 ./node_modules/.bin/gulp help",

    // 调试 typescript 编写的普通文件
    "debug-ts": "node --inspect-brk=9229 ./node_modules/.bin/ts-node src/index.ts upload -p tsconfig.json"
  }
}

进入调试面板，点击 'Add Configuration...'，添加 'Launch via NPM'，配置如下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch via NPM",
            "runtimeExecutable": "npm",
            "runtimeArgs": [
                "run-script",
                "debug-gulp"
            ],
            "port": 9229
        }
    ]
}

接下来直接在编辑器中打断点，运行 Launch via NPM 即可。

另外，还可以运行时直接注入 ts-node，参见如下启动文件配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Current TS File",
      "type": "node",
      "request": "launch",
      "args": ["${file}"],
      "runtimeArgs": ["--nolazy", "-r", "ts-node/register"],
      "sourceMaps": true,
      "cwd": "${workspaceRoot}",
      "protocol": "inspector"
    },
    {
      "name": "Current TS Mocha File",
      "type": "node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/_mocha",
      "args": ["-r", "ts-node/register", "${file}"],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector"
    }
  ]
}