Javascript 开玩笑+；VS代码调试器中的Babel导致断点移动

我正在尝试使用babel、jest和vs代码调试一个简单的项目。当我设置一个断点，然后开始调试时，我的断点会跳转，不再是我开始调试时的位置。此处可以看到回购协议样本-

我已经更新了我的

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之前：

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

通过以下扩展在节点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

---

安装节点：

安装Chrome插件：

在终端中运行以下脚本

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

有关vs代码中故障排除的更多参考信息，请遵循中的说明

巴贝尔将把es6转换成es5，因此它不依赖于检查。 为了进行检查，您需要节点和节点浏览器扩展

享受编码

获取此问题（使用jest 23.6.0），检查这是否是create react应用程序上的已知问题，并在此拉取请求上解决：

将以下配置应用于my launch.json

{
“类型”：“节点”，
“请求”：“启动”，
“名称”：“开玩笑”，
“程序”：“${workspaceFolder}/node_modules/jest/bin/jest”，
“args”：[
“测试”，
“--runInBand”，
“--无缓存”

],
“sourceMaps”：false，
“控制台”：“集成终端”，
“内部控制台选项”：“从不打开”
},

---

成功地在正确的断点上使其中断。

@RyanHirsch；只需在babelrc中使用

retainLines:true

和

sourceMap:inline

，它就会工作。

对我有效的方法是通过在启动配置中添加

“sourceMap”：false来关闭sourceMap。我不完全理解为什么它会工作

例如：

{
  "type": "node",
  "request": "launch",
  "name": "Jest Current File",
  "program": "${workspaceFolder}/node_modules/.bin/jest",
  "args": [
    "${relativeFile}",
    "--config",
    "jest.config.js",
    "--no-cache"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen",
  "disableOptimisticBPs": true,
  "sourceMaps": false,
  "windows": {
    "program": "${workspaceFolder}/node_modules/jest/bin/jest",
  }
}

经过多次努力，以下是我如何与Babel debugging开玩笑，使其始终在正确的线路上工作和中断。

主要是，我使用了开发人员提供的优秀工具“”，并通过在VSCode的扩展窗格中搜索“Jest”：


从那里，我只需点击测试中出现的
Debug
链接，它允许我正确点击测试和应用程序代码中的断点

在测试文件中成功命中断点：

在源代码文件中成功命中断点：
适用于babel jest 25.0.0的正确配置
jest 25.0.0包括以下内容：

{
    "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",
            "port": 9229
        }
    ]
}

有关更多信息，我从下面的
中获取了我的配置。你能显示一些运行前和运行后的屏幕截图吗？你把断点放在哪里了？你是如何运行的？因为项目断点对我来说运行得很好。还要提到你使用的节点和NPM版本，虽然这不能解释为什么会发生这种情况，但你可以始终尝试将
retainLines:true
添加到
.babelrc
中，这样就不会混淆断点应该位于哪一行。添加
retainLines
将打破任何列断点，并根据文档生成“古怪的代码”。看起来源映射应该可以工作：（好吧，这并不是说它帮了大忙，但似乎不止你一个人在jest 23.6.0上“移动断点”的问题再次发生，一旦它到达第一个断点，你可以设置一个断点，它将停止更新，这工作了一段时间，但仍然失败，只是回滚到jest 22，我正在使用的当前配置：更新，jest和VS代码have增强了it的集成，现在可以轻松地将它们集成到基于create react应用程序的应用程序和从头开始创建的应用程序中，我已经创建了一篇文章来介绍以下主题：
{
    "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",
            "port": 9229
        }
    ]
}