vs code 中调试 vue3 项目

葬天尘
  • 257

概述

想在 vs code 中调试 vue3 项目,类似 IDEA 中调试 java 一样

我的做法

网上搜索后 vue 官网有设置步骤,地址是:https://v3.cn.vuejs.org/cookb...

  1. 在 vs code 中安装 chrome 插件,提示 deprecated,没有理会,仍然安装
    image.png
  2. 项目 vue.config.js 中做了下面的设置
module.exports = {
    configureWebpack: config => {
      config.devtool = "source-map";
  }
}
  1. vs code 项目里创建了文件 launch.js,其中代码如下 - 从官网拷贝来的
{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "vuejs: chrome",
            "url": "http://127.0.0.1:9000",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "type": "firefox",
            "request": "launch",
            "name": "vuejs: firefox",
            "url": "http://127.0.0.1:9000",
            "webRoot": "${workspaceFolder}/src",
            "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
    ]
}

当然 url 是修改为我自己项目的端口号了

  1. 在项目的登录页面设置一个断点
  2. 在 cmd 中通过命令 npm run serve 运行项目
  3. 在 vs code 的 debugger 页面中选择 chrome 的配置并点击左边的绿色小三角启动项目
    image.png
  4. 在登录页面点击按钮执行之前下好断点的代码,如下图
    image.png
  5. 执行项目之前在行号129下断点时是红色的,运行起来后是透明色的了。。。在登录页面点击按钮后程序没有断掉,直接在控制台中打印出信息了
    image.png
  6. 是我哪里做的不对么?为什么直接打印出信息没有断掉程序?
回复
阅读 537
1 个回答

同问,我也是尝试多次,没有成功

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏