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)
代码编辑区将显示美化后的版本,支持设置断点和单步执行小技巧:若未看到 {} 按钮,说明当前文件未被 JavaScript 调试器识别为可美化对象,检查是否启用了正确的调试器(如 @vscode/js-debug)。
配合 Source Map 效果更佳Pretty Printing 只是临时美化,若项目生成了 source map 文件(.map),调试体验会进一步提升:Comet AI 浏览器下载 Comet AI 浏览器,体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作,让 AI 成为你的浏览副驾,大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载调试器可直接映射到原始源码文件断点可在未压缩的源文件上设置变量名、函数结构保持开发时状态确保构建工具(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,也能快速定位问题位置,大大提升调试效率。
