踩坑：vscode中jest的调试配置

接触到facebook的jest测试框架，本来打算写写demo试试水，怎料按着jest debug文档的demo在vscode配置launch一直无法connect，于是在解决问题的同时，顺带补习了下相关知识。

node v8内核本身支持

node本身支持debug模式，只需在代码中加入debugger；即可在命令行中以命令的形式调试。

node-inspector插件提供第三方界面支持

该插件底层使用websocket（全双工通信），拥有了远程调试的基础，对外提供基础协议（Chrome Debugging Protcol），内部对node debug 协议进行转化，减少了第三方debug软件的开发成本，chrome浏览器等均通过该插件来与node环境通信。

2016年5月份 node新增内置v8_inspector

老的node_inspector插件解决了第三方软件到node debugger模块的通信差异，第三方软件只需要关心chrome定义的新的通信协议即可（但同时有两种协议共存，插件主要负责两种协议的转换，通信）。

而随着node的发展，自身简化协议，支持websocket连接已成必然，node推出内置模块v8_inspector，解决了这方面的问题。（协议也同时进行了修改）

版本支持:

• Node.js 6.3+
• Chrome 55+

有几点需要注意

由于node6.3+内置了v8_inspector，会有一些坑。

--debug、--debug-brk这两个参数只会启动Debugger监听模式，不会进入命令行调试模式，而且前者会运行完所有代码，通常可用于事件调试，后者会在进入时中断，方便从头开始调试

• node6.x使用node debug
• node8.x废弃node debug、--debug、--debug-brk
• node8.x使用node inspect、--inspect、--inspect-brk

体现在vscode上，就是"protocol": "legacy"（v6.3-）和"protocol": "inspector"（v6.3+）的区别

vscode中jest调试的坑

node版本

根据jest官方给出两种调试方式，通过命令行运行node --inspect-brk node_modules/.bin/jest --runInBand，launch.json配置如下。

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Attach",
      "port": 9229
    }
  ]
}

上述方式一直无法成功连接，最终排查出问题是node版本的原因，我使用的是v8.1.3，后升级到最新8.9.4就可以了，具体原因后面再研究下。

inspect自动添加端口

使用jest官方的第二种方式配置了下launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Jest Tests",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/.bin/jest",
        "--runInBand"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

但是一直无法连接，而用第一种方式又没问题，找了半天原因，后来仔细看命令行，终于发现问题所在。

下面是vscode官方文档里的一段。

If you specify a debug port via the port attribute, VS Code will not automatically add the –inspect-brk=nnnn attribute because the debug port is typically specified by the npm script or other tool as well.

大致意思就是如果没有配置port，vscode会自动指定一个websocket端口，关键的地方来了。

node --inspect-brk /Users/xing/Documents/test/atest/node_modules/.bin/jest --runInBand --inspect-brk=31174

自动生成的这段命令中，实际给node的参数是--inspect-brk,node会以默认9229端口开启websocket，而vscode自动配置的端口被传入了jest命令中，并默认去尝试连接这个随机端口，结果就是个坑！

解决办法很简单，在launch.json加上"port":"9229"即可:-D

参考

• node-debug结合vscode 原理解析
• 最新Node.js调试大法 — v8_inspector
  
• 浅谈Node Inspector 代理实现
• https://juejin.im/entry/59e9585bf265da430c10f058
• Jest · Delightful JavaScript Testing
• Node.js Debugging in VS Code