1

demo-project/调试指南.md

@@ -0,0 +1,233 @@
+# 调试指南
+
+## ✅ 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/)
+
+---
+
+**现在启动项目，打开浏览器开发者工具，就可以看到完整的源码并进行调试了！** 🎉
+