时间戳

首页 > 解决方案 > Visual Studio Code：已设置断点但尚未绑定 - Vue.js

vue.js - Visual Studio Code：已设置断点但尚未绑定 - Vue.js

问题描述

我有一个大型 Vue.js 项目，我试图让调试在 VS Code 中正常工作。整整一周我一直在尝试各种不同的事情，并且一直遇到绑定断点的问题。对于它的价值，这些通常在通过工厂模式创建的类或像 Vuex 操作这样没有直接可访问的函数端点的东西中出现更糟糕的情况——这可能是相关的。

这是一些启动配置的示例...

    {
        "name": "Parity - Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080/app",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*",
          "/./*": "${webRoot}/*",
          "/src/*": "${webRoot}/*",
          "/*": "*",
          "/./~/*": "${webRoot}/node_modules/*"
        }
    },
    {
      "name": "Parity - Edge",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:8080/app",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "/./*": "${webRoot}/*",
        "/src/*": "${webRoot}/*",
        "/*": "*",
        "/./~/*": "${webRoot}/node_modules/*"
      }
    },

我在 Chrome 和 Edge 中得到完全相同的行为（这并不奇怪，因为它们现在基本上是相同的浏览器）。

标签： vue.jsdebuggingvisual-studio-codevuex

解决方案

在浏览器中的 Sources 选项卡中挖掘时，我发现源映射大多都在 webpack 文件夹中，因此没有找到它们（*.vue 文件除外，因此它们可以正常工作） .

以下配置对我有用，但完整的答案是......

查看在您的网络浏览器的“源”中找到文件的位置，并使用这些位置映射回实际的文件位置 - 做我以前做过的事情，只是尝试使用其他人的随机配置并不总是有效。

    {
        "name": "Parity - Chrome",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:8080/app",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
          "webpack:///src/*": "${webRoot}/*",
          "webpack:///./src/*": "${webRoot}/*",
          "webpack:///./node_modules/*": "${webRoot}/node_modules/*"
        }
    },
    {
      "name": "Parity - Edge",
      "type": "edge",
      "request": "launch",
      "url": "http://localhost:8080/app",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./node_modules/*": "${webRoot}/node_modules/*"
      }
    },

推荐阅读