VSCode调试vue项目

本文指导如何在VSCode中配置并使用Debugger for Chrome扩展来调试Vue应用,包括更新webpack配置以构建sourcemap,设置VSCode调试配置,以及如何在代码中设置断点。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先决条件

你必须安装好 Chrome 和 VS Code。同时请确保自己在 VS Code 中安装了 Debugger for Chrome 扩展的最新版本。

在可以从 VS Code 调试你的 Vue 组件之前,你需要更新 webpack 配置以构建 source map。做了这件事之后,我们的调试器就有机会将一个被压缩的文件中的代码对应回其源文件相应的位置。这会确保你可以在一个应用中调试,即便你的资源已经被 webpack 优化过了也没关系。

打开 config/index.js 并找到 devtool 属性。将其更新为:

devtool: 'source-map',

如果使用 vue-cli3 你需要设置 vue.config.js 内的 devtool 属性:

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

进入Debugger视图,添加Chrome配置,将内容替换成以下内容
Alt

{
  "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}/*"
      }
    }
  ]
}

设置断点

此处response返回数据

Alt

启动调试

在终端使用如下命令开启这个应用

npm start

进入Debug视图,选择‘vuejs:chrome’配置,然后按F5或点击绿色的play按钮

随着一个新的 Chrome 实例打开 http://localhost:8080,你的断点现在应该被命中了。
Alt
更多内容请参考官方文档:https://cn.vuejs.org/v2/cookbook/debugging-in-vscode.html

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木易学长~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值