（一）桌面端浏览器
目前主流的桌面端浏览器如 Chrome、Firefox、Safari、Edge 等都具备直接查看网页源代码的功能。
1. Chrome 浏览器
- 方法一：使用菜单操作：打开网页后，点击浏览器右上角的三个点，依次选择“更多工具” - “查看源代码”，即可在新窗口中显示该网页的源代码。
- 方法二：使用快捷键：按下 `Ctrl + U`（Windows 系统）或 `Command + Option + U`（Mac 系统），也能快速打开网页源代码页面。
2. Firefox 浏览器
- 方法一：菜单操作：点击浏览器右上角的三条横线，选择“更多工具” - “查看页面源代码”。
- 方法二：快捷键：同样按下 `Ctrl + U`（Windows 系统）或 `Command + Option + U`（Mac 系统）。
3. Safari 浏览器
若要使用 Safari 查看网页源代码，需要先进行一些设置。打开 Safari 浏览器，点击菜单栏中的“Safari” - “偏好设置”，在“高级”选项中，勾选“在菜单栏中显示‘开发’菜单”。之后，打开网页，点击“开发” - “显示页面源代码”即可查看。快捷键为 `Command + Option + U`（Mac 系统）。
4. Edge 浏览器
- 方法一：菜单操作：点击浏览器右上角的三个点，选择“更多工具” - “查看源代码”。
- 方法二：快捷键：和 Chrome、Firefox 一样，使用 `Ctrl + U`（Windows 系统）或 `Command + Option + U`（Mac 系统）。
（二）移动端浏览器
移动端浏览器查看网页源代码相对来说没有桌面端那么方便，但部分浏览器也提供了类似功能。例如在手机版 Chrome 浏览器中，打开网页后点击浏览器菜单中的三个点，选择“开发者工具”，在开发者工具中找到“Elements”或“源代码”选项，即可查看网页的代码结构。不过，由于移动端屏幕和功能限制，查看体验可能不如桌面端。
二、使用开发者工具查看
（一）桌面端浏览器开发者工具
以 Chrome 浏览器为例，打开开发者工具查看网页源代码步骤如下：
1. 打开目标网页，在网页空白处右键，选择“检查”（或使用快捷键 `Ctrl + Shift + I`（Windows 系统）或 `Command + Option + I`（Mac 系统）），打开开发者工具。
2. 在开发者工具界面中，通常有多个面板，如“Elements”“Console”“Sources”等。点击“Elements”面板，这里显示的是网页的 HTML 结构，你可以像查看树状目录一样展开和查看各个元素的代码。
3. 开发者工具的优势在于不仅可以查看静态的源代码，还能实时修改代码并在页面上看到修改后的效果。比如，你可以直接在“Elements”面板中修改 HTML 标签的属性或文本，页面会立即更新显示，方便进行网页调试和学习。
（二）使用第三方工具查看
除了浏览器自带的开发者工具，还有一些第三方工具可以帮助我们查看和分析网页源代码。例如，Notepad++ 是一款功能强大的文本编辑器，它支持多种编程语言的语法高亮显示。当我们将网页源代码复制到 Notepad++ 中时，代码会以不同颜色区分不同的元素，更便于阅读和分析。另外，Sublime Text 也是一款备受开发者喜爱的工具，它具有快速查找、替换等功能，对于处理较长的网页源代码非常方便。
三、查看网页源代码的用途
查看网页源代码在很多场景下都有实际用途。对于网页开发者来说，查看源代码可以帮助他们学习他人的代码结构和设计思路，借鉴优秀的代码实现方式，提高自己的开发水平。例如，通过查看一些知名网站的源代码，了解他们如何优化页面加载速度、实现交互效果等。对于普通用户而言，查看源代码