引言

Webpack 代码调试通过专属配置与工具，提供便捷的开发调试体验。高效的调试配置能帮助开发者快速定位问题、修复 bug，大幅提升开发效率。以下是 Webpack 调试的核心功能与配置选项：

• Source Maps：Webpack 生成 Source Maps，将编译打包后的代码映射回原始源代码，让浏览器调试器可直接定位到源码文件

• Devtool：通过 devtool 配置项定义 Source Maps 的生成规则，可根据开发 / 生产环境选择适配方案，平衡构建速度与调试能力

• Hot Module Replacement（HMR）：在开发服务器中启用模块热替换，无需刷新整个页面即可更新模块，加速调试流程

• 断点调试：依托浏览器开发者工具，在源代码中设置断点，逐行执行代码、观察变量与程序执行流程

• Debugger：在源码中插入 debugger 语句，主动触发浏览器调试器暂停代码执行，实现精准逐行调试

Source Map

Source Map 是代码映射文件，用于将浏览器中打包、压缩后的代码，关联到开发时的原始源码位置。 生产环境中，Webpack 会对代码进行压缩、混淆、剔除注释，极大减小文件体积，但会导致代码无法阅读、调试。

常见问题 浏览器控制台报错时，无法定位到原始代码的具体行号与文件。

问题原因 生产环境下，代码被压缩合并为一行，变量名被混淆，丢失了原始代码的结构信息。

解决方案 通过 Webpack 配置中的 devtool 选项，选择不同的 Source Map 生成模式，平衡构建速度和调试精度。

在 webpack.config.js 中添加 devtool 配置，开发环境与生产环境推荐使用不同方案：

module.exports = {
    // 其他配置...
    // 开发模式：快速构建 + 精准调试
    mode: 'development',
    // 开发环境推荐配置
    devtool: 'cheap-module-eval-source-map',
    // 生产环境推荐配置（隐藏源码，仅用于错误定位）
    // devtool: 'hidden-source-map'
};

断点调试

1. 打开开发者工具 按下 F12 快捷键，或右键页面选择「检查」，打开浏览器开发者工具。

2. 切换源码面板 进入 Sources 标签页，找到项目对应的原始源码文件夹。

3. 添加断点 打开需要调试的 .ts / .js 源码文件，点击行号左侧添加断点。

4. 调试代码 代码执行到断点时自动暂停，在右侧面板查看变量值、调用堆栈，控制代码逐步执行。

Debugger

在源代码中手动写入 debugger 语句，代码执行到该位置时，会自动触发浏览器调试器暂停运行，无需手动设置断点，适合快速调试关键逻辑。

// src/index.ts
function testFunction() {
  console.log('代码执行到 debugger 之前');
  // 强制触发浏览器调试
  debugger;
  console.log('代码执行到 debugger 之后');
}

// 调用函数
testFunction();