# Source Map 配置说明

## ✅ 已完成配置

Demo 项目现在已经配置了完整的 Source Map 支持！

### 📝 配置内容

#### 1. Webpack 配置（`webpack.config.js`）

```javascript
module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development'
  
  return {
    // Source Map 配置
    devtool: isDevelopment ? 'eval-source-map' : 'source-map',
    
    // CSS/Less Source Map
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: { sourceMap: isDevelopment }
            }
          ]
        },
        {
          test: /\.less$/,
          use: [
            'vue-style-loader',
            {
              loader: 'css-loader',
              options: { sourceMap: isDevelopment }
            },
            {
              loader: 'less-loader',
              options: { sourceMap: isDevelopment }
            }
          ]
        }
      ]
    }
  }
}
```

#### 2. DevServer 配置

```javascript
devServer: {
  port: 8080,
  hot: true,
  open: true,
  historyApiFallback: true,
  // 错误覆盖层
  client: {
    overlay: {
      errors: true,      // 显示错误
      warnings: false    // 不显示警告
    }
  }
}
```

### 🎯 Source Map 类型

#### 开发模式：`eval-source-map`

**优点**：
- ✅ 高质量的源码映射
- ✅ 包含行和列信息
- ✅ 重新构建速度快
- ✅ 适合开发调试

**缺点**：
- ❌ 生成的文件较大
- ❌ 不适合生产环境

#### 生产模式：`source-map`

**优点**：
- ✅ 最高质量的源码映射
- ✅ 生成独立的 .map 文件
- ✅ 不影响主文件加载

**缺点**：
- ❌ 构建速度慢
- ❌ 文件体积大

### 🔍 调试效果

启动开发服务器后，在浏览器开发者工具中可以看到：

```
webpack://
├── demo-project/
│   └── src/
│       ├── main.js              ← 可以看到原始源码
│       ├── App.vue
│       ├── config/
│       │   └── index.js
│       └── views/
│           └── business/
│               └── product_list.vue
│
└── src/                         ← 框架源码
    ├── index.js
    ├── components/
    │   ├── main/
    │   └── ...
    ├── views/
    │   ├── login/
    │   ├── home/
    │   └── ...
    ├── store/
    │   ├── user.js
    │   └── app.js
    └── utils/
        ├── http.js
        ├── tools.js
        └── uiTool.js
```

### 💡 使用方法

#### 1. 设置断点

在浏览器开发者工具的 Sources 面板：
1. 找到要调试的源文件
2. 点击行号设置断点
3. 刷新页面触发断点

#### 2. 使用 debugger

在代码中直接添加：
```javascript
export default {
  mounted() {
    debugger  // ← 程序会在这里暂停
    console.log('组件已挂载')
  }
}
```

#### 3. Console 调试

```javascript
// 在 Console 中执行
$vm.$store.state        // 查看 Vuex 状态
$vm.$route              // 查看路由信息
$vm.$root               // 查看根实例
```

### 📊 对比

| 功能 | 有 Source Map | 无 Source Map |
|------|--------------|---------------|
| 看到的代码 | 原始源码 | 编译后的代码 |
| 断点位置 | 精确到源码行列 | 只能在编译后代码设置 |
| 变量名 | 原始变量名 | 可能被压缩 |
| 调试体验 | ⭐⭐⭐⭐⭐ | ⭐⭐ |

### ⚠️ 注意事项

#### 1. 文件大小

开发模式的 bundle 会包含 source map 信息，体积较大：
- 开发环境：约 3-5 MB（包含 source map）
- 生产环境：约 500 KB（压缩后，.map 文件独立）

#### 2. 性能影响

- **开发环境**：首次构建较慢，热更新很快
- **生产环境**：构建时间增加，但运行时无影响

#### 3. 安全性

生产环境的 .map 文件：
- 不要部署到公开的服务器
- 或配置服务器禁止访问 .map 文件
- 或使用错误追踪服务（如 Sentry）管理 source map

### 🚀 快速开始

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

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

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

4. **查看源码**：
   在 Sources 标签页中可以看到完整的源码结构

5. **设置断点调试**：
   点击行号或在代码中添加 `debugger`

### 📚 相关文档

- **[调试指南.md](./调试指南.md)** - 完整的调试教程
- **[README.md](./README.md)** - 项目说明
- **[CHANGELOG.md](./CHANGELOG.md)** - 更新日志

### 🔗 参考资源

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

---

**现在你可以愉快地调试代码了！** 🎉