Pretty Printing是VS Code中调试压缩JS代码的功能,通过点击{}图标将混淆代码格式化为易读形式,支持断点调试,配合source map可映射回原始源码,提升排查效率。

压缩后的JavaScript代码在调试时往往难以阅读,变量名被缩短,逻辑挤在一行,给排查问题带来很大困扰。VS Code 提供了“Pretty Printing”功能,能自动格式化混淆或压缩的代码,让其变得可读,方便断点调试。
什么是 Pretty Printing
当加载的是 .min.js 或经过 Uglify、Terser 等工具压缩的脚本时,源码几乎不可读。Pretty Printing 会在调试器中将这些压缩代码自动转换成格式清晰、缩进合理的版本,便于查看执行流程和设置断点。
注意:该功能仅改变代码展示形式,不会修改原始文件。如何启用 Pretty Printing
在 VS Code 的调试面板中操作如下:
- 启动调试会话(F5),确保已正确配置 launch.json
- 在“调试控制台”或“调用堆栈”面板中找到加载的压缩脚本(如 app.min.js)
- 点击文件名旁边出现的 {} 图标(Format Document)
- 代码编辑区将显示美化后的版本,支持设置断点和单步执行
配合 Source Map 效果更佳
Pretty Printing 只是临时美化,若项目生成了 source map 文件(.map),调试体验会进一步提升:
- 调试器可直接映射到原始源码文件
- 断点可在未压缩的源文件上设置
- 变量名、函数结构保持开发时状态
确保构建工具(Webpack、Vite 等)输出 source map,并在 launch.json 中设置 "sourceMaps": true。
常见问题处理
如果 Pretty Printing 不生效,尝试以下方法:
- 确认使用的是最新版 VS Code 和内置 JavaScript 调试器
- 检查 launch.json 是否包含 "resolveSourceMapLocations" 配置以允许加载 map 文件
- 对于远程调试(如浏览器),确保网络可访问 source map 路径
- 某些 CDN 托管的库可能不提供 map 文件,此时只能依赖 Pretty Printing 临时美化
基本上就这些。开启 Pretty Printing 后,哪怕面对一整行的压缩 JS,也能快速定位问题位置,大大提升调试效率。










