Visual Studio Code 上的 vuejs3 调试不起作用

Posted 2023-02-23

【中文标题】Visual Studio Code 上的 vuejs3 调试不起作用

【英文标题】：vuejs3 debugging on Visual Studio Code not working

【发布时间】：2021-08-23 23:41:57

【问题描述】：

我最近转移到了 Vuejs3，我的调试设置停止工作。断点不会被触发。我使用与以前相同的配置文件，但不确定此版本是否有所改变。

Chrome 扩展调试器：v4.12.12 VsCode：1.56.2 Vue CLI v3 平台：Ubuntu 20.04.2 LTS

launch.json

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

vue.config.js

module.exports = 
  configureWebpack: 
    devtool: 'source-map'
  

【问题讨论】：

在 Chrome 中设置断点有效并触发 vscode 中断。但是 vscode 仍然声称它的断点是“断点已设置但尚未绑定”

【参考方案1】：

我也遇到过类似情况，找不到相关的解决办法：

快速回答： 升级到 VS Code 1.56.2 后，确保删除旧断点并创建新断点，并且至少有 1 个断点和 launch.json 可用。

冗长的细节：

当我启动“调试器栏”时，我在 python 脚本中遇到了类似的问题，我在顶部调试栏上看到了几秒钟，然后它消失了。卜然后控制台上没有消息，什么都没有。我尝试重新安装 VS Code，启用/禁用扩展，各种重启。

操作系统和版本：Mac OSX 版本 11.4 (20F71) VS 代码版本：1.56.2 扩展：Microsoft 的 Python v2021.5.842923320

根本原因：

我确实知道我更新了我的 VS Code，然后这个神秘的问题开始发生，所以什么时候发布 VS Code 1.56.2 的日志。我在发布日志下面找到了

在break#上显示的调试视图

debug.openDebug 设置的默认值现在是 openOnDebugBreak 以便在每个断点命中时，VS Code 都会打开 调试视图。调试视图也显示在第一个会话上 开始。

所以 VS 代码版本 1.56 版本，调试器只会在找到至少 1 个断点时显示。但是，在 VS Code 升级后，他们的内部代码检查历史断点数据似乎存在问题..

https://code.visualstudio.com/updates/v1_56#_debug-view-displayed-on-break

【讨论】：

我已删除所有断点重新启动一切并重置断点。还是不行。当我在 Chrome 中设置断点时，它实际上会触发暂停。我的断点也声明“断点已设置但尚未绑定”

【参考方案2】：

我不得不将我的 launch.json 文件更改为以下内容。显然 pwa- 前缀是针对 VS Code 的新 javascript 调试器的一种方式。见*** discussion。旧的调试器不再在这个平台上工作。 希望这会对某人有所帮助。

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