Chrome DevTools Elements 面板里不能用快捷键格式化 HTML
直接在 Elements 面板双击修改 HTML 时，Shift+Alt+F 或 Ctrl+Shift+I 等编辑器常用组合键完全无效——DevTools 的 HTML 编辑是只读渲染+有限交互模式，不走 VS Code 那套格式化流程。你看到的缩进、换行全是浏览器自动渲染结果，不是可编辑的源码结构。
常见错误现象包括：右键选中一个 <div> 后按 <code>Shift+Alt+F 没反应；在 Elements 中 Ctrl+A 全选再粘贴新 HTML，粘进去还是扁平无缩进；想快速补全闭合标签（比如输入 <ul></ul> 后按 Tab），结果光标跳到下一行而非生成 。
- Elements 面板本质是 DOM 树快照，不是源码编辑器，所有修改都通过“Edit as HTML”临时弹窗完成，确认靠
Enter，放弃靠Esc - 真正能触发格式化的入口只有 Sources 面板里的 JS/CSS 文件，且仅限已加载的静态资源（如内联
<script></script>或<style></style>块） - 如果目标是格式化整个页面的原始 HTML 源码（比如查看压缩版首页），必须先从 Network 或 Response 中捞出原始响应体，再手动复制到外部编辑器
Network 面板中还原 HTML 响应体并格式化
当你右键“查看网页源代码”看到的是压缩成一行的 HTML（比如 <title>...</title>...），说明服务端返回了 minified HTML，而 Chrome 不会对 text/html 类型的 Response 自动格式化——它只对 application/json、application/javascript、text/css 做开箱即用的折叠/美化。
实操路径如下：
立即学习“前端免费学习笔记（深入）”；
- 打开 DevTools → Network 标签页 → 刷新页面 → 找到主文档请求（通常是第一个，Name 列显示
(index)或域名本身，Type 列为document） - 点击该请求 → 右侧面板切到 Response 标签 → 此时看到的是原始压缩 HTML 字符串
- 选中全部内容（
Ctrl+A）→ 复制（Ctrl+C）→ 粘贴到 VS Code / Sublime / 在线工具（如 beautifier.io）中执行格式化 - 注意：不要尝试在 Console 中用
JSON.stringify()或prettify()处理 HTML 字符串——HTML 不是合法 JSON，会报SyntaxError: Unexpected token
用 chrome://save-page/ 快速获取可格式化的原始 HTML 文件
如果你需要反复调试某网页的原始 HTML 结构（比如分析 SSR 输出、检查 meta 标签顺序、验证 SEO 渲染），与其每次从 Network 复制粘贴，不如直接保存为本地 .html 文件再用编辑器打开——这时 chrome://save-page/ 是最稳的入口，它绕过前端禁用的右键菜单和 document.write 干扰，强制导出服务器返回的原始字节流。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
操作要点：
- 确保当前标签页是目标网页（非后台页）
- 地址栏输入
chrome://save-page/回车 → 弹出“另存为”对话框 - 保存类型默认是
Web page, complete (*.html)，不是 MHTML —— 这正是你需要的：一个纯 HTML 文件，不含额外文件夹，可直接拖进 VS Code - 保存后，在 VS Code 中打开该文件，按
Shift+Alt+F即可格式化（前提是语言模式为 HTML 且已启用 Prettier 或内置格式化器）
这个方法避开了 chrome://flags/#save-page-as-mhtml 的重启依赖，也比手动复制 Response 更可靠——尤其当页面含动态 document.write 或 Service Worker 拦截时，chrome://save-page/ 仍能拿到初始 HTML。
VS Code 中 HTML 格式化失效的三个真实原因
Shift+Alt+F 按下没反应？别急着重装插件。90% 的情况是 VS Code 没识别出你在编辑 HTML，或者格式化器被 Vue/ESLint 规则压制了。
- 右下角状态栏语言模式显示
Plain Text或JavaScript：点它，手动选成HTML；如果是.vue文件，确保光标在<template></template>内且 Volar 已激活 - 装了多个格式化器（比如 Prettier + js-beautify-html + Vetur）却没设默认：打开命令面板（
Ctrl+Shift+P）→ 输入Format Document With...→ 选“Configure Default Formatter” → 指定一个 -
"editor.formatOnSave": true和 ESLint 自动修复同时开启：保存时 Prettier 调整缩进，ESLint 立刻删掉空格或加引号，来回拉扯。建议关闭 ESLint 的source.fixAll.eslint，只保留source.fixAll用于 import 排序等非格式类修复
真正难搞的不是怎么格式化，而是怎么让格式化结果稳定——比如 html.format.wrapLineLength 设成 120，但某个 <img alt="谷歌浏览器怎么一键HTML格式化？开发者工具使用技巧" > 标签带长 base64 src，Prettier 会把它硬拆成多行，反而破坏可读性。这种边界情况，得靠 <!-- prettier-ignore --> 注释局部跳过。
