如何在Firefox中快速查看网页的源代码和资源文件？

Firefox中快速获取原始HTML结构及资源的方法有四种：一是按Ctrl+U（Windows/Linux）或Cmd+U（macOS）查看纯文本源码；二是地址栏输入view-source:前缀跳转并保存；三是用Ctrl+Shift+I打开开发者工具，通过“网络”面板分析资源请求、“元素”面板检查实时DOM；四是右键选择“查看页面源代码”或“检查元素”分别定位原始源码与渲染后节点。

你需要在Firefox中快速定位网页的原始HTML结构或下载页面用到的CSS、JS、图片等资源文件，而不是只看渲染后的效果。这一步操作必须绕过浏览器自动解析过程，直接接触服务器返回的原始内容。

用快捷键打开纯文本源码

这是最快的方法，适合只想扫一眼HTML结构、复制某段代码、确认meta标签是否写对的场景。

在已打开的目标网页上，按下 Ctrl + U（Windows/Linux）或 Cmd + U（macOS）。

新标签页会立刻加载纯文本格式的HTML源码，不执行任何JavaScript，也不渲染样式——你看到的就是服务器发来的原始字节流。这个视图支持Ctrl+F搜索，但无法点击跳转或高亮DOM节点。

注意：如果当前页面是本地HTML文件（file://协议），Ctrl+U仍有效；但若页面由前端框架动态生成且未服务端渲染，这里看到的可能只有空

。

用地址栏命令查看源码（带跳转能力）

当你需要把源码链接分享给同事、保存为本地文件，或者想在不离开当前页的情况下对比多个页面源码时，这个方法更灵活。

方法一：在地址栏中，把当前网址开头的https://或http://替换成view-source:，例如把https://example.com改成view-source:https://example.com。

按回车后，页面以只读文本形式展示源码，顶部有“另存为”按钮，可直接保存为.html文件。

方法二：在任意空白标签页地址栏输入view-source:https://example.com，回车即打开——无需先访问该网页。

【view-source:前缀不能加空格，也不能漏掉冒号】

用开发者工具检查实时DOM和资源网络请求

如果你要分析页面为什么样式错乱、脚本没执行、图片404，就得看JavaScript运行后的真实DOM结构，以及每个资源的加载状态、大小、耗时。

第一步：按下 Ctrl + Shift + I（Windows/Linux）或 Cmd + Option + I（macOS）打开开发者工具。

第二步：点击顶部标签栏的“网络”（Network）面板，然后刷新页面（F5）。所有HTTP请求会逐条列出：HTML、CSS、JS、字体、图片、API接口……每项都标有状态码、大小、耗时。

第三步：在“网络”面板中点击任意一项（比如main.css），右侧会显示该资源的响应头、预览、响应体——如果是文本类资源（CSS/JS/JSON），直接显示源码；如果是图片，会渲染缩略图并提供下载按钮。

第四步：切换到“元素”（Elements）面板，左侧是实时DOM树，右键某个节点可选择“编辑为HTML”临时修改，或“复制→复制外层HTML”提取片段。

注意：Network面板默认只记录刷新后的请求，若想捕获页面加载前的请求（如重定向链），需勾选左上角的“禁用缓存”并提前打开面板。

右键菜单快速直达源码或检查元素

适合鼠标操作优先、不习惯记快捷键的用户，尤其在需要精准定位某段文字对应HTML时效率最高。

在页面任意非输入框区域点击右键 → 选择“查看页面源代码” → 新标签页打开纯HTML源码。

在具体文字、按钮、图片上点击右键 → 选择“检查元素” → 开发者工具自动定位到该节点，并高亮其在DOM树中的位置。

这两个选项本质不同：“查看页面源代码”显示服务端原始输出，“检查元素”显示浏览器最终渲染的DOM，二者可能差异巨大。