能用但非生产级：浏览器扩展仅适合临时HTML格式化；实测可用的有EditThisPage（基础缩进）和Web Developer插件（调用内置解析器补全标签，不支持自定义属性）。
能用，但别指望它替代本地格式化工具或构建流程——浏览器扩展做HTML格式化，本质是“快看一眼、临时救急”，不是生产级处理。
哪些扩展真能格式化HTML结构
真正支持完整HTML格式化的扩展不多，多数只做高亮或DOM编辑。实测可用的有：
-
EditThisPage：点击后把整个页面源码转为可编辑文本框，带基础缩进，但不修复标签闭合或属性引号 -
Web Developer→ “View Source” → 右键“Format HTML”：调用的是浏览器内置解析器，能补全部分缺失标签，但对自定义属性（如v-if、）可能误删 -
Scratchpad for Chrome：粘贴原始HTML后按Ctrl+Shift+F（Windows）可触发简单美化，依赖内部的js-beautify逻辑，缩进可靠，但不校验语义
像 Live HTML Editor 或 HTML Formatter 这类名字带“Formatter”的扩展，实际只是高亮+折叠，点“格式化”按钮根本没反应——它们压根没集成解析引擎。
为什么格式化后代码看起来“怪怪的”
常见现象：缩进对了，但<img>被改成<img />，class=header变成class="header"，甚至<div><p>xxx</div>被自动闭合为<div><p>xxx</p></div>。这不是bug，是扩展调用的底层库（如htmlparser2或cheerio）在重建DOM时做的“合理猜测”。
立即学习“前端免费学习笔记（深入）”；
它无法区分你是写HTML5还是XHTML，也不管你项目里是否禁用自闭合语法。如果原始代码里混着ng-*指令或hx-* HTMX属性，部分扩展会直接剥离——因为这些不在W3C标准属性白名单里。
关键点：format ≠ validate。它不报错，也不提示你<h2>里嵌了<div>这种语义错误。
执行前必须手动检查的三件事
否则大概率格式化完发现样式崩了、脚本不执行、或者控制台报Uncaught SyntaxError: Unexpected token '：
- 确认当前页没启用
Content-Security-Policy阻止内联脚本——很多格式化扩展会注入临时JS来解析和重写DOM，CSP会直接拦截 - 关闭所有其他开发者工具类扩展（尤其是广告屏蔽、隐私保护类），它们常劫持
document.write或覆盖innerHTMLsetter，导致格式化中途失败 - 如果页面由框架（React/Vue）动态渲染，先等
DOMContentLoaded之后再点格式化——否则你只能看到初始HTML骨架，不是最终DOM树
比扩展更稳的临时方案
当扩展失效或结果不可控时，这三行代码在浏览器Console里粘贴即用，且完全可控：
const html = new XMLSerializer().serializeToString(document.documentElement); console.log(html.replace(/>/g, '>\n').replace(/</g, '\n<').replace(/\s*\n\s*/g, '\n').trim());
它不修复结构，只做基础换行缩进；不依赖扩展权限，不触发CSP；输出直接可复制。适合紧急查看嵌套层级，或配合Ctrl+F搜<script定位加载位置。
真正要长期用，还是得回到本地：VS Code装Prettier + ESLint，或用npx prettier --write *.html跑CI。浏览器扩展那点“快”，只值一次调试，不值得放进工作流。
