在使用Chrome开发者工具查看压缩的JS或CSS文件时,代码往往会自动以缩进、换行等格式显示,导致无法看到原始的紧凑形态。这通常是因为Pretty Print(代码美化功能)被意外开启。想要恢复压缩代码的原始面貌?只需几个简单步骤即可解决。

如果你正被这个问题困扰,不必怀疑设备或工具出了故障,直接按照下面的排查流程操作即可。
一、关闭当前已启用的Pretty Print格式化
Pretty Print这一功能一旦在Sources面板中对某个文件启用,就会自动将压缩代码解析并重新排版为可读格式。将其关闭后,原始紧凑布局便会恢复,便于对比原始字节流或调试混淆逻辑。
1、在Chrome中打开目标网页,按下F12或快捷键Ctrl+Shift+I,调出开发者工具。
2、切换到Sources面板。
3、在左侧文件树中找到并单击已经处于美化状态的JS或CSS文件——其右侧代码编辑区顶部通常会显示“formatted”标识。
4、在右侧代码编辑区底部,找到并点击那个呈蓝色状态的{}图标(即Pretty Print按钮)。
5、图标变回灰色,代码立刻恢复为原始压缩形态——没有空格、没有换行、分号也紧跟在语句末尾。
二、防止新加载文件自动触发Pretty Print
Chrome默认不会对所有文件启用Pretty Print,但如果你之前全局开启过该功能,或者有浏览器扩展注入了脚本修改DevTools行为,后续加载的压缩资源就可能被自动美化。此时,需要排查是否有“幕后黑手”在干扰。
1、在Sources面板中,右键单击任意文件标签页,选择“Blackbox content scripts”选项,排除第三方脚本的干扰。
2、按下Ctrl+Shift+P(Windows/Linux)或Cmd+Shift+P(macOS),打开命令菜单。
3、输入“Disable JavaScript source maps”,执行该命令。
4、刷新页面,重新加载目标资源,观察是否仍会自动格式化。
三、重置DevTools配置以清除残留美化偏好
有些自定义设置或插件可能会持久保存Pretty Print的偏好行为,导致每次打开同一文件都被强制美化。此时,一种更彻底的方法——重置DevTools,可以清除这类顽固状态。
1、在开发者工具界面右上角,点击齿轮图标进入Settings设置页面。
2、滚动至底部,点击“Restore defaults and reload”按钮。
3、等待DevTools自动关闭并重新加载。
4、重新打开Sources面板,加载相同的压缩文件,确认不再自动执行格式化。
四、禁用可能触发自动美化的扩展程序
这一点经常被忽略——某些前端开发类扩展(例如React Developer Tools、Vue Devtools或代码高亮增强插件)会在资源加载时注入格式化逻辑,绕过Pretty Print的开关。如果忽略这一环,前面的操作可能全部白费。
1、在Chrome地址栏中输入chrome://extensions/并回车。
2、暂时关闭所有非必要的扩展,特别留意那些名称包含“format”、“beautify”、“prettify”字样的插件。
3、重新打开开发者工具并加载目标文件。
4、如果格式化现象消失,说明问题出在某个扩展上。接下来逐一启用扩展,定位具体是哪一个在“捣乱”。
