当前位置： 首页 > article >正文

vsCode调试Vue项目

article 2025/1/3 15:29:51
vsCode调试Vue项目步骤(vue2项目为例)
  1. sourceMap打开， vue.config.js（修改完配置文件， 项目重启一下）
modules.exports = {
  // ... 其他配置
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') {
      config.devtool = 'source-map'
    }
  }
}
  1. 找到下面这个页面，创建配置文件
    在这里插入图片描述
  2. 选择调试器， 下面以谷歌浏览器为例
    在这里插入图片描述
  3. 接下来就可以创建 launch.json 文件
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "projectTest", // 自定义名称
      "url": "http://localhost:8000",  //项目启动地址
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}
  1. 配置好以后直接点这个按钮启动调试（会默认在浏览器打开项目）
    在这里插入图片描述
  2. 在想要调试的代码前面打上断点， 我这里以登录为例
    在这里插入图片描述
  3. 打开调试的浏览器页面， 输入 qqq, 1234 点击登录
    在这里插入图片描述
  4. 进入断点， 就可以调试了
    在这里插入图片描述

http://www.kler.cn/a/460780.html

相关文章：

  • Dubbo 核心知识全解析：原理、流程与关键机制
  • Flash Attention V3使用
  • 设计模式 创建型 单例模式（Singleton Pattern）与 常见技术框架应用 解析
  • Spring 核心技术解析【纯干货版】- IV：Spring 切面编程模块 Spring-Aop 模块精讲
  • 十二、Vue 路由
  • Tailwind CSS 实战：响应式布局最佳实践
  • HuatuoGPT-o1：基于40K可验证医学问题的两阶段复杂推理增强框架，通过验证器引导和强化学习提升医学模型的推理能力
  • 【亚马逊云】基于Amazon EC2实例部署 NextCloud 云网盘并使用 Docker-compose 搭建 ONLYOFFICE 企业在线办公应用软件
  • 混合精度训练（Mixed Precision Training）如何在 bf16 到 fp32 转换中保留信息：数值模拟与代码实现（中英双语）
  • 移动 APP 设计规范：构建高效、易用与美观的用户体验
  • 【2024年-10月-8日-开源社区openEuler实践记录】深度分析 Gala-Gopher：革新分布式系统运维的开源力量
  • archlinux使用
  • 力扣hot100——技巧
  • 小程序信息收集（小迪网络安全笔记~
  • FreeRTOS: ISR（中断服务例程）和 TCB（任务控制块）
  • Python面向对象编程全面解析
  • 大模型算法题(2)
  • wps透视数据表
  • 微信公众号 发布 接口405报错
  • 机器学习中的欠拟合
  • echarts 柱形图重叠柱形图legend，双y轴
  • Spring Boot教程之四十一：在 Spring Boot 中调用或使用外部 API
  • Kafka中的Topic和Partition有什么关系？
  • 掌握大数据处理利器：Flink 知识点全面总结【上】
  • ESLint+Prettier的配置
  • 【Cesium】三、实现开场动画效果