首页 文章

VS Code调试器中的Jest Babel导致断点移动

提问于
浏览 次
30

我正在尝试使用babel，jest和vs代码调试一个简单的项目 . 当我设置一个断点然后开始调试时，我的断点跳了起来，不再是我开始时的位置 . 这里可以看到样品回购 - https://github.com/RyanHirsch/starter-node

我已将 launch.json 更新为包含

{
  "name": "Jest",
  "type": "node",
  "request": "launch",
  "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
  "stopOnEntry": false,
  "args": ["-i", "${file}"],
  "cwd": "${workspaceRoot}",
  "runtimeExecutable": null,
  "sourceMaps": true,
  "protocol": "inspector"
}

我的 .babelrc 看起来像：

{
  "plugins": ["@babel/plugin-proposal-object-rest-spread"],
  "sourceMaps": "inline",
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "6.10"
        }
      }
    ]
  ]
}

我认为源映射选项足以让它工作但我错了 . 需要更改什么才能将断点保留在原始位置？特别是在尝试调试我的测试时 .

====编辑====

在断点位于测试线10和实施线4之前：

Before Debugging

当我通过选择我的测试文件开始调试然后在VS Code调试窗格中运行Jest时，我的断点跳转到测试第9行和实现第6行：
During Debugging

在节点9.6.1上运行，具有以下扩展名：

DavidAnson.vscode-markdownlint
EditorConfig.EditorConfig
Orta.vscode-jest
PKief.material-icon-theme
PeterJausovec.vscode-docker
Shan.code-settings-sync
bungcip.better-toml
dbaeumer.vscode-eslint
dracula-theme.theme-dracula
dzannotti.vscode-babel-coloring
eamodio.gitlens
esbenp.prettier-vscode
gerane.Theme-FlatlandMonokai
humao.rest-client
mauve.terraform
mikestead.dotenv
mjmcloug.vscode-elixir
mohsen1.prettify-json
ms-vscode.Theme-MaterialKit
ms-vscode.azure-account
ms-vscode.cpptools
ritwickdey.LiveServer
sbrink.elm
shanoor.vscode-nginx
vscodevim.vim
javascript visual-studio-code

3 回答

  • 2

    @RyanHirsch;只需在你的babelrc中使用 retainLines": true 和 sourceMap: "inline" 就可以了 .

    回复于
  • -1

    得到这个问题（使用jest 23.6.0），检查这是创建反应应用程序的已知问题，在此拉取请求上解决：

    https://github.com/facebook/create-react-app/pull/3605/files

    将以下配置应用于我的launch.json

    { "type": "node", "request": "launch", "name": "Jest All", "program": "${workspaceFolder}/node_modules/jest/bin/jest", "args": [ "test", "--runInBand", "--no-cache" ], "sourceMaps": false, "console": "integratedTerminal", "internalConsoleOptions": "neverOpen" },

    管理在正确的断点上打破它 .

    回复于
  • 4

    Install node:

    https://nodejs.org/en/download/

    Install Chrome Plugin:

    https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en

    In your terminal run the following script

    node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand

    有关vs代码中的故障排除的更多参考，请参阅

    https://jestjs.io/docs/en/troubleshooting

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

    Babel将es6转换为es5，因此它不依赖于检查 . 对于检查，您需要节点和节点chrome扩展 .

    享受编码

    回复于

相关问题