方法一，最快捷的方法（右键菜单）

这是最常用、最直接的方法。

1. 在你想查看的网页上，右键点击页面的任意空白区域（注意不要点在图片或链接上）。
2. 在弹出的菜单中，选择 “查看网页源代码”。
3. 浏览器会新开一个标签页，显示该网页完整的、未经浏览器渲染的 HTML 源代码。

特点：这是纯文本视图,适用于快速查看服务器返回的原始代码。

使用键盘快捷键

如果你习惯使用键盘,这比鼠标更快。

• Windows/Linux 系统：按下 Ctrl + U
• Mac 系统：按下 Command + Option + U
• 效果与方法一完全相同,会打开一个新的源代码标签页。

通过浏览器菜单栏

如果右键菜单被禁用,可以使用此方法。

1. 点击浏览器右上角的 三个点 （自定义及控制 Google Chrome）。
2. 将鼠标悬停在 “更多工具” 上。
3. 在下级菜单中选择 “开发者工具”。
4. 开发者工具面板会在页面右侧或底部打开，虽然它默认显示“元素”面板，但你可以点击顶部标签栏的 “源代码” 标签来查看更详细的页面文件结构（见下文“开发者工具”部分）。

使用开发者工具（最强大、最常用）

这是前端开发人员最常用的工具，不仅可以看源码,还能实时调试。

1. 打开方式（任选其一）：
   • 快捷键：F12 或 Ctrl + Shift + I（Windows/Linux），Command + Option + I（Mac）。
   • 右键点击页面，选择 “检查”。
2. 默认打开的是 “元素” 面板，这里显示的是网页的 DOM 树，它是浏览器解析 HTML 源码后生成的、可以动态交互的树状结构。
   • 重要区别：“查看网页源代码”看到的是原始的、静态的 HTML 文件，而“元素”面板里看到的是当前的、动态的 DOM 状态（可能已被 JavaScript 修改过）。
3. 如果你想查看原始的页面文件资源（如 .html, .css, .js 文件），可以点击开发者工具顶部的 “源代码” 标签，你可以看到网站加载的所有文件，并以文件夹结构呈现,非常适合调试。

查看框架源码（如 iframe 内的页面）

如果网页中使用了框架,你想查看框架内的源码：

1. 右键点击框架内部。
2. 选择 “查看框架源代码”。

如何搜索源码中的特定内容？

1. 在打开的“网页源代码”页面（方法一或二打开的页面）或“开发者工具”的“元素”面板中，使用通用的查找快捷键：
   • Ctrl + F（Windows/Linux）
   • Command + F（Mac）
2. 在页面底部或顶部出现的搜索框中输入关键词即可快速定位。

总结与选择建议

为了方便你快速选择,可以参考以下决策图：

flowchart TD
    A[需要查看网页源码] --> B{主要用途是什么？}
    B -- “快速查看原始HTML<br>（用于学习或检查）” --> C[使用快捷方式]
    subgraph C[快捷方式推荐]
        C1[右键菜单<br>选择“查看网页源码”]
        C2[使用快捷键<br>Ctrl+U / Cmd+Opt+U]
    end
    B -- “调试、修改样式<br>或分析动态内容” --> D[使用开发者工具]
    D --> E[按F12或右键点击“检查”]
    E --> F[主要使用“元素”面板<br>（查看当前DOM状态）]
    C --> G[在新标签页中<br>查看纯静态源码]
    F --> H[在面板中<br>实时查看与调试]

其他注意事项：

• 页面过大时：查看巨大页面的源码时，浏览器可能会将其截断，开发者工具”是更好的选择。
• 安全提醒：查看源码是安全的，但不要复制和执行你不理解的代码，尤其是 JavaScript,可能存在安全风险。
• 编码问题：如果源码显示为乱码，可能是编码格式不匹配，可以在“查看源码”页面的右键菜单中尝试调整“编码”。

标签： 右键菜单 快捷方法