VS Code调试技巧：使用Pretty Printing美化显示压缩后的代码

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），调试体验会进一步提升：

大师兄智慧家政

58到家打造的AI智能营销工具

99

查看详情

• 调试器可直接映射到原始源码文件
• 断点可在未压缩的源文件上设置
• 变量名、函数结构保持开发时状态

确保构建工具（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，也能快速定位问题位置，大大提升调试效率。

以上就是VS Code调试技巧：使用Pretty Printing美化显示压缩后的代码的详细内容，更多请关注php中文网其它相关文章！