使用Chrome DevTools调试Jest测试遇问题：打开窗口后无法正常操作

我之前也碰到过一模一样的情况，明明打开了Node专用DevTools，但就是没法正常调试。其实问题出在测试脚本的配置和调试器的连接方式上，按下面的步骤来就能解决：

1. 给测试脚本添加调试标志 #

你当前的测试脚本没有开启Node的调试端口，DevTools自然没法连接上。修改package.json里的测试命令，加上--inspect-brk（或者--inspect）参数：

"test": "node --inspect-brk node_modules/jest/bin/jest.js --watch --silent"

• --inspect-brk会让Node在执行代码前先暂停，方便你附加调试器，适合从头开始调试；
• 如果不想一开始就暂停，用--inspect即可，调试器连接后会继续执行，直到碰到你设置的断点。

2. 正确连接到测试进程 #

运行npm test启动测试后，别直接点「Open dedicated DevTools for Node」，而是在chrome://inspect/#devices页面的「Remote Target」下，找到标注为node_modules/jest/bin/jest.js的进程，点击右侧的「Inspect」按钮。这样DevTools才会正确附加到你的测试运行进程上。

3. （可选）处理并行测试的问题 #

如果还是没法调试，大概率是Jest默认并行运行测试导致的——调试器没法同时处理多个进程。这时候需要加上--runInBand参数强制Jest串行执行测试：

"test": "node --inspect-brk node_modules/jest/bin/jest.js --watch --silent --runInBand"

4. 手动添加断点 #

为了更精准地调试，你可以在测试代码里手动加入debugger语句，比如：

describe('App component renders the todo correctly', () => {
  it('renders correctly', () => {
    debugger; // 调试器会自动停在这一行
    const rendered = renderer.create( <App /> );
    expect(rendered.toJSON()).toMatchSnapshot();
  });
});

这样当调试器附加成功后，会自动暂停在debugger语句处，你就可以一步步查看变量、单步执行代码了。

内容的提问来源于stack exchange，提问作者Bomber