Chrome开发者工具基础配置
打开Chrome的开发者工具（F12或Ctrl+Shift+I），首先要确保Sources面板的默认设置能支持压缩代码调试。在设置齿轮图标中找到”Preferences”，勾选”Enable JavaScript source maps”和”Auto-reload generated sources”选项。这样当遇到webpack等打包工具生成的压缩文件时，Chrome会自动关联对应的source map文件。
调试时经常会遇到代码被压缩成单行的情况，这时候点击Sources面板底部的”{}”格式化按钮（Pretty-print）就能将代码还原为多行格式。不过要注意，格式化后的代码行号会发生变化，断点位置可能需要重新设置。
实战解析压缩代码结构
典型的压缩JS代码会有这些特征：变量名被替换成a/b/c等单字母，函数调用被内联，所有空格和换行被移除。比如这段webpack打包后的代码：
!function(e){var t={};function n(r){if(t[r])return t[r].exports...}}([])要快速理解这种代码，可以分三步走：
在Call Stack面板右键点击框架时，选择”Restart frame”能重新执行当前函数调用，这对调试循环和递归特别有用。
高级断点调试技巧
除了常规的行断点，Chrome还提供几种特殊断点：
x > 100调试异步代码时，记得勾选”Async”调用栈选项。遇到Promise时，可以在Sources面板搜索”native Promise”来定位微任务执行点。
| 断点类型 | 适用场景 | 快捷键 |
|---|---|---|
| 行断点 | 基础调试 | 点击行号 |
| 条件断点 | 特定状态调试 | 右键行号 |
| DOM断点 | 界面变更追踪 | Elements面板 |
Source Map深度应用
现代前端工程通常都会生成source map文件，在Chrome中正确配置能让调试体验接近原始代码。webpack配置示例：
devtool: 'source-map',
output: {
sourceMapFilename: '[name].js.map'
}
当source map加载失败时，可以：
对于第三方库的source map，可以在开发者工具的”Sources > Overrides”中创建本地映射。把线上压缩代码和本地source map文件配对后，就能实现持久化调试。
性能分析与内存调试
遇到压缩代码的性能问题时，Performance面板能记录完整的调用栈。勾选”Advanced”选项中的”Record call stacks”后，火焰图会显示压缩前后的函数名对应关系。
内存泄漏调试要重点关注：
在Memory面板做Heap Snapshot时，使用”Comparison”模式可以快速定位增长异常的对象。注意观察(compiled code)标签下的内存占用情况。
遇到eval执行的压缩代码确实很头疼，Chrome开发者工具里有个隐藏技巧能帮上大忙。先在设置里把”Enable JavaScript source maps”和”Pause on exceptions”两个选项都勾上，这样遇到异常时能立即暂停执行。更关键的是，可以在eval代码前面加上//# sourceURL=yourFilename.js这样的特殊注释，Chrome就会把这个动态生成的代码块当作独立文件来处理，不仅能在Sources面板里单独显示，还能正常设置断点和单步调试。
要是eval里执行的代码已经被压缩得面目全非， 先用正则表达式把代码提取出来，放到在线JS美化工具里格式化一下。格式化完再贴回eval里执行，调试起来会轻松很多。注意观察控制台输出的错误堆栈，Chrome现在对eval代码的堆栈追踪已经做得很完善了，能精确到行号。遇到特别复杂的场景，还可以配合使用debugger语句强制进入调试模式，比手动打断点更靠谱。
常见问题解答
为什么格式化后的压缩代码行号会变化？
格式化过程会重新解析代码结构，插入换行和缩进，导致原始行号映射失效。Chrome会生成新的行号映射表， 在格式化后重新设置断点，或直接使用source map保持原始行号对应关系。
如何调试没有source map的第三方压缩代码？
可以先用Pretty-print功能格式化代码，然后通过全局搜索关键字符串定位目标函数。配合使用”Blackbox script”过滤无关代码，重点关注网络请求和DOM操作等明显特征来逆向分析执行流程。
条件断点在压缩代码中不生效怎么办？
检查条件表达式是否使用了被压缩的变量名， 先在Console中测试表达式是否有效。如果变量名被混淆，可以改用日志输出或异常抛出的方式辅助调试。
如何区分webpack打包的多个压缩模块？
在Sources面板的webpack://目录下可以按原始文件结构浏览模块。使用Ctrl+P搜索源文件名，或通过webpack的chunkId在Network面板过滤请求。
调试时遇到”eval()”执行的压缩代码如何处理？
在Settings > Preferences中启用”Enable JavaScript source maps”和”Pause on exceptions”选项。对于动态生成的eval代码，可以通过//# sourceURL=注释给它指定虚拟文件名方便调试。
