admin_core/demo-project/调试指南.md

# 调试指南

## ✅ Source Map 已启用

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

### 📋 Source Map 配置

#### 开发模式（`npm run dev`）
```javascript
devtool: 'eval-source-map'
```

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

#### 生产模式（`npm run build`）
```javascript
devtool: 'source-map'
```

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

### 🔍 如何调试

#### 1. 在浏览器中调试

**启动开发服务器**：
```bash
npm run dev
```

**打开浏览器开发者工具**：
- Chrome：按 `F12` 或 `Ctrl+Shift+I`
- Firefox：按 `F12`

**查看源码**：
1. 点击 **Sources** 标签页（Chrome）或 **调试器** 标签页（Firefox）
2. 在左侧文件树中可以看到：
   ```
   webpack://
   ├── demo-project/
   │   └── src/
   │       ├── main.js          ← Demo 项目源码
   │       ├── App.vue
   │       └── views/
   └── src/                     ← 框架源码
       ├── index.js
       ├── components/
       ├── views/
       └── utils/
   ```

#### 2. 设置断点

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

**使用 debugger 语句**：
```javascript
// 在代码中添加
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 方法中：
```javascript
install(Vue, options = {}) {
  debugger  // ← 可以在这里调试框架初始化过程
  if (this.installed) return
  // ...
}
```

#### 2. 调试 Store Actions

在 `src/store/user.js` 中：
```javascript
async handleLogin({ state, commit, dispatch }, { userFrom, Main, ParentView, Page404 }) {
  debugger  // ← 调试登录流程
  // ...
}
```

#### 3. 调试 HTTP 请求

在 `src/utils/http.js` 中：
```javascript
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](https://chrome.google.com/webstore)
- Firefox: [Vue.js devtools](https://addons.mozilla.org/firefox)

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

#### 2. Console 调试技巧

```javascript
// 查看 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`
- 或在开发者工具中禁用缓存

### 🚀 开始调试

1. **启动开发服务器**：
   ```bash
   npm run dev
   ```

2. **打开浏览器**：
   访问 `http://localhost:8080`

3. **打开开发者工具**：
   按 `F12`

4. **设置断点**：
   在 Sources 中找到源文件并设置断点

5. **开始调试**：
   刷新页面或触发相关操作

### 📚 相关资源

- [Chrome DevTools 官方文档](https://developer.chrome.com/docs/devtools/)
- [Firefox Developer Tools](https://developer.mozilla.org/docs/Tools)
- [Vue DevTools](https://devtools.vuejs.org/)
- [Webpack DevTool 文档](https://webpack.js.org/configuration/devtool/)

---

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