在实际开发或调试中，我们经常需要绕过浏览器的“渲染加工”，直击页面最原始的源代码和网络请求，而不是只看最终的呈现效果。今天这个话题，就是围绕Firefox来聊聊怎么快速拿到网页的原始HTML结构，以及CSS、JS、图片这些资源文件。

我来直接说结论：主要有四种方法，各有各的适用场景。

方法一：用快捷键打开纯文本源码

这应该是最快的一条路。适合那种只是想快速扫一眼HTML结构、复制某段代码、或者确认一下meta标签有没有写对的场景。

只要在已打开的目标网页上，直接在键盘上按下 Ctrl + U（Windows/Linux）或 Cmd + U（macOS），新标签页会立刻加载纯文本格式的HTML源码。

这个时候你看不到任何Ja vaScript的执行结果，也没有样式渲染——你看到的就是服务器发回来的原始字节流。这个视图支持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和资源网络请求

如果你要分析的是为什么页面样式乱了、脚本没执行、或者图片加载失败，那上面两种方法就不太够用了。因为这个时候你需要看的是Ja vaScript运行后的真实DOM结构，以及每一个资源的加载状态、大小和耗时。

第一步：打开开发者工具

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

第二步：查看网络请求

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

第三步：查看单个资源详情

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

第四步：检查实时DOM

切换到“元素”（Elements）面板，左侧是实时的DOM树。右键某个节点，可以选择“编辑为HTML”做临时修改，或者“复制→复制外层HTML”来提取片段。这才是真正的“所见即所得”排查。

有一点需要留心：Network面板默认只记录刷新之后的请求。如果你想捕获页面加载前的请求（比如重定向链），需要提前勾选左上角的“禁用缓存”，并打开面板再刷新。

方法四：右键菜单快速直达源码或检查元素

如果你习惯用鼠标操作，不太记快捷键，这个方法最顺手。尤其是在需要精准定位某段文字对应的HTML时，效率很高。

在页面任意非输入框区域点击右键，选择“查看页面源代码”，新标签页就会打开纯HTML源码。而在具体的文字、按钮或图片上点击右键，选择“检查元素”，开发者工具会自动定位到那个节点，并在DOM树中高亮显示。

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

说到底，这四种方法没有绝对的优劣，关键是看你在什么场景下需要什么信息。

• 短平快地看源码，用快捷键或地址栏命令最快。
• 遇到复杂的调试问题，开发者工具才是真正的利器。
• 而右键菜单则更适合鼠标操作流。

选对方法，效率自然翻倍。