带有 Vue.js 的 VS Code 中 Chrome 的调试器设置 [英] Debugger settings for Chrome in VS Code with Vue.js

问题描述

在 .vscode\launch.json 中使用以下设置

With the following settings in .vscode\launch.json

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "chrome",
        "request": "launch",
        "name": "Launch Chrome against localhost",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}"
      }
    ]
}

我可以在我的项目中的 index.js 文件中设置断点并成功触发，但 *.vue 文件中的断点触发不正确.

I can set a breakpoint in index.js file in my project and it triggers successfully, but the breakpoints in *.vue files triggers incorrectly.

使用以下设置:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

反之，*.vue文件中的断点触发成功，但是我的index.js文件中无法设置断点.

vice versa, the breakpoints in *.vue files are triggered successfully, but I cannot set a breakpoint in my index.js file.

如何让断点同时在*.js 和*.vue 中工作?

How to make the breakpoints work in both *.js and *.vue?

查看有关我如何设置环境的更多详细信息.

推荐答案

我很惊讶，但是添加两个版本的源映射覆盖对我有用.我现在可以设置并让它在 .vue 文件、.js 文件和我导入的 es6 模块中的断点处停止.我只花了大约一个月的时间才找到解决方案！

I was very surprised, but adding two versions of the source map override worked for me. I can now set and have it stop on breakpoints in .vue files, .js files, and my imported es6 modules. It only took me about a month to find a solution!

希望它对你有用(这对我不起作用了.见下文)

Hope it works for you (this doesn't work for me anymore. See below)

      "sourceMapPathOverrides": {
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///src/*": "${webRoot}/*"
      }

2019 年 10 月更新:

在最近的更新中，我无法同时调试 js 和 vue 文件.我终于找到了对两者都适用的新设置:

Debugging both js and vue files had broken for me in a recent update. I have finally found new settings that work for both:

      "sourceMapPathOverrides": {
         "webpack:///src/*.vue": "${webRoot}/*.vue",
         "webpack:///./src/*.js": "${webRoot}/*.js"
      }

这篇关于带有 Vue.js 的 VS Code 中 Chrome 的调试器设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！