zc/admin_core

Fork 0

Files

张成 845658f193 1

2025-10-08 18:53:38 +08:00

5.3 KiB

Raw Blame History

调试指南

✅ Source Map 已启用

现在 Demo 项目已配置了完整的 Source Map 支持，可以在浏览器中直接调试源码！

📋 Source Map 配置

开发模式（`npm run dev`）

devtool: 'eval-source-map'

特点：

✅ 高质量的 source map
✅ 可以看到原始源代码
✅ 可以设置断点调试
✅ 包含列信息（精确定位）
⚡ 重新构建速度快

生产模式（`npm run build`）

devtool: 'source-map'

特点：

✅ 完整的 source map
✅ 生成独立的 .map 文件
📦 适合部署到生产环境

🔍 如何调试

1. 在浏览器中调试

启动开发服务器：

npm run dev

打开浏览器开发者工具：

Chrome：按 F12 或 Ctrl+Shift+I
Firefox：按 F12

查看源码：

点击 Sources 标签页（Chrome）或 调试器 标签页（Firefox）

在左侧文件树中可以看到：

webpack://
├── demo-project/
│   └── src/
│       ├── main.js          ← Demo 项目源码
│       ├── App.vue
│       └── views/
└── src/                     ← 框架源码
    ├── index.js
    ├── components/
    ├── views/
    └── utils/

2. 设置断点

在源码中设置断点：

在 Sources 中找到要调试的文件
点击行号设置断点（会出现蓝色标记）
刷新页面或触发相关操作

使用 debugger 语句：

// 在代码中添加
debugger

// 例如在 main.js 中
mounted() {
  debugger  // ← 程序会在这里暂停
  this.$store.dispatch('user/setAuthorityMenus', {
    Main: AdminFramework.Main,
    ParentView: AdminFramework.ParentView,
    Page404: AdminFramework.Page404
  })
}

3. 查看变量

断点暂停时可以：

在 Scope 面板查看局部变量
在 Watch 面板添加监视表达式
在 Console 中输入变量名查看值

4. 单步调试

使用调试控制按钮：

继续 (F8) - 继续执行到下一个断点
单步跳过 (F10) - 执行当前行，不进入函数
单步进入 (F11) - 进入函数内部
单步跳出 (Shift+F11) - 跳出当前函数

🎯 调试框架源码

由于项目直接使用框架源码（../../src/index.js），你可以：

1. 直接在框架代码中设置断点

例如在 src/index.js 的 install 方法中：

install(Vue, options = {}) {
  debugger  // ← 可以在这里调试框架初始化过程
  if (this.installed) return
  // ...
}

2. 调试 Store Actions

在 src/store/user.js 中：

async handleLogin({ state, commit, dispatch }, { userFrom, Main, ParentView, Page404 }) {
  debugger  // ← 调试登录流程
  // ...
}

3. 调试 HTTP 请求

在 src/utils/http.js 中：

post(url, data, config) {
  debugger  // ← 调试 API 请求
  // ...
}

📊 Source Map 类型对比

类型	构建速度	重构速度	质量	适用场景
`eval-source-map`	慢	快	高	开发 ✅
`cheap-module-source-map`	中	中	中	开发
`source-map`	很慢	很慢	最高	生产 ✅
`none`	最快	最快	无	不调试

💡 调试技巧

1. 使用 Vue DevTools

安装 Vue DevTools 浏览器插件：

Chrome: Vue.js devtools
Firefox: Vue.js devtools

功能：

查看组件树
检查组件数据和 props
查看 Vuex 状态
追踪事件

2. Console 调试技巧

// 查看 Store 状态
console.log('Store:', this.$store.state)

// 查看路由信息
console.log('Route:', this.$route)

// 查看组件实例
console.log('Component:', this)

// 使用 console.table 显示数组
console.table(this.list)

// 使用 console.dir 显示对象结构
console.dir(AdminFramework)

3. 网络请求调试

在 Network 标签页中：

查看 API 请求和响应
检查请求头和响应头
查看请求耗时

⚠️ 注意事项

1. Source Map 文件大小

开发模式的 source map 会增加包体积，但：

✅ 只在开发环境使用
✅ 不影响生产环境性能
✅ 不会部署到生产服务器

2. 刷新页面

修改代码后：

保存文件会自动热更新（HMR）
如果 HMR 失败，手动刷新页面（F5）

3. 清除缓存

如果看到旧代码：

硬刷新：Ctrl+Shift+R (Chrome) 或 Ctrl+F5
或在开发者工具中禁用缓存

🚀 开始调试

启动开发服务器：
```
npm run dev
```
打开浏览器：访问 http://localhost:8080
打开开发者工具：按 F12
设置断点：在 Sources 中找到源文件并设置断点
开始调试：刷新页面或触发相关操作

📚 相关资源

现在启动项目，打开浏览器开发者工具，就可以看到完整的源码并进行调试了！ 🎉

5.3 KiB Raw Blame History Unescape Escape