谷歌浏览器开发者工具自动格式化关闭方法:Pretty Print 代码还原

2026-05-31阅读 0热度 0
谷歌浏览器

在Chrome开发者工具的Sources面板里打开压缩后的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、如果格式化消失了,说明问题出在某个扩展上。接着逐个启用扩展,定位到具体是哪一个在捣乱。

免责声明

本网站新闻资讯均来自公开渠道,力求准确但不保证绝对无误,内容观点仅代表作者本人,与本站无关。若涉及侵权,请联系我们处理。本站保留对声明的修改权,最终解释权归本站所有。

相关阅读

更多
欢迎回来 登录或注册后,可保存提示词和历史记录
登录后可同步收藏、历史记录和常用模板
注册即表示同意服务条款与隐私政策