debugging - VS Code 无法正确设置断点

标签 debugging webpack visual-studio-code babeljs

我正在尝试调试一个小项目,但无法让 Debugger for Chrome 扩展程序完全运行。当我放置断点时,它会移到我想要调试的函数之外。

enter image description here

我正在使用 webpack + babel。我的项目托管在 .Net 平台(特别是 DNN)上。

package.json:

{
  "name": "disable-registration",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "npm-watch"
    },
    "babel": {
    "presets": [
      "env"
    ]
    },
    "watch": {
    "build": "src/*.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.3",
    "babel-preset-env": "^1.6.1",
    "npm-watch": "^0.3.0",
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.9"
  }
}

启动.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to mickys.dnndev.me",
            "port": 9222,
            "url": "http://www.mickys.dnndev.me/",
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "skipFiles": ["node_modules"]
        }
    ]
}

确实设置的断点将会命中,但它完全跳过我的代码。我可以成功地在 Chrome 开发工具中设置断点,但这违背了利用 ES6 语法的目的。几天来一直试图解决这个问题,但没有找到解决方案。

更新:尝试将 const 值更改为 let 或 var 无法解决问题:

enter image description here

编辑:我现在可以看到它正在尝试调试正确的文件,但是行号不同步。这是我在 chrome 开发工具中看到的:

enter image description here

最佳答案

感谢这个post我能够解决我的问题。

我使用以下几行创建了一个 .babelrc 文件:

{
    "presets": ["env"],
    "sourceMaps": "inline",
    "retainLines": true
}

现在断点已按预期命中。耶!

但是,我相信我有一个单独的问题:调试时我没有得到任何智能感知。我可以查看变量的值,但看不到其他任何内容(函数、关键字等)的文本。

希望这对某人有帮助:)

关于debugging - VS Code 无法正确设置断点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49075180/

相关文章:

debugging - Visual Studio 代码调试器未连接到 SAM Local

c# - 在 Mac 上的 Unity 中使用 .NET 4.x

c++ - 是否可以为 Visual Studio Code 安装多个 CMake 扩展?

javascript - 有什么办法可以阻止 Javascript 默默地失败吗?

debugging - 如何从调试器恢复而不中断 Protractor 中的整个测试?

c# - 如何从托管代码中调试未发布的 COM 引用?

javascript - 使用 `Error: Could not locate the bindings file.` 时如何解析 `node-ffi` ?

javascript - 将捆绑的 css 移动到不同的目录会将 URL 前缀 ../更改为 only/

Webpack block 加载进度

javascript - 如何在 JSDoc(或 TypeScript?)中记录函数自定义类型并引用它们以便 VSCode IntelliSense 工作