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

调试vue build之后的js文件

调试 dist 目录下的 JavaScript 文件可以按照以下步骤进行:

1. 确保 Source Maps 正常生成

确认你的构建配置中已启用 Source Maps,确保 .map 文件与构建后的 .js 文件位于同一目录。

2. 启动一个本地服务器

使用本地服务器来服务 dist 目录,这样浏览器可以正确处理文件路径。例如,可以使用 http-server

 

npm install -g http-server
http-server dist
 

3. 打开 Chrome DevTools

  • 在浏览器中打开你的应用程序(例如 http://localhost:8080)。
  • 使用 F12 打开 Chrome DevTools。

4. 导航到 Sources 面板

  • 在 DevTools 中,转到“Sources”标签页。
  • 你应该能看到项目的文件结构,包括原始的 .vue 文件和生成的 JavaScript 文件。

5. 设置断点

  • 找到生成的 JavaScript 文件或相应的 .map 文件,点击行号设置断点。
  • 刷新页面,调试器将在断点处暂停,你可以检查变量、调用堆栈等。

6. 调试

  • 使用调试工具的功能(如步进、监视变量等)进行调试。

确保你的浏览器没有缓存老版本的文件,必要时可以清除缓存。通过这些步骤,你应该能顺利调试 dist 目录下的 JS 文件!


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

相关文章:

  • Lucene 和 Elasticsearch 中更好的二进制量化 (BBQ)
  • power bi中的related函数解析
  • 【Mode Management】AUTOSAR架构下唤醒源检测函数EcuM_CheckWakeup详解
  • 综合案例铁锅炖(CSS项目大杂烩)
  • 【循环神经网络】
  • 低功耗WTK6900P语音ic方案助力电子烟技术革新 打造个性化吸烟体验
  • Craft:年度 Mac 应用,卡片式笔记新星
  • 在 Qt 中实现 `QListWidget` 列表项水平居中显示
  • 网关基础知识
  • 线性判别分析(LDA)中求协方差矩阵示例
  • 配置文件--UmiJs
  • 用Flutter几年了,Flutter每个版本有什么区别?
  • 深入理解前端拖拽:从基础实现到事件冒泡与委托的应用【面试真题】
  • MySQL Performance Schema 详解及运行时配置优化
  • mac-m1安装nvm,docker,miniconda
  • 【shell脚本5】Shell脚本学习--条件控制
  • MyBatis与 Springboot 的集成
  • 【Webpack】使用 Webpack 和 LocalStorage 实现静态资源的离线缓存
  • ubuntu24.04 怎么调整swap分区的大小,调整为16G
  • Spark 任务与 Spark Streaming 任务的差异详解
  • Java毕业设计 基于SpringBoot和Vue自习室管理系统
  • Mybatis-为什么使用Mybatis,它存在哪些优点和缺点?
  • 【后端开发】JavaEE初阶—线程安全问题与加锁原理(超详解)
  • 专业学习|随机规划概观(内涵、分类以及例题分析)
  • Java基础|多线程:多线程分页拉取
  • Python画笔案例-054 绘制流光溢彩动画