（一）谷歌浏览器（Chrome）
谷歌浏览器是目前使用较为广泛的浏览器之一，查看其网页源代码非常方便。
1. 打开你想要查看源代码的网页。
2. 方法一：在网页的空白处点击鼠标右键，在弹出的菜单中选择“查看网页源代码”选项，此时会弹出一个新的窗口，窗口中显示的就是该网页的源代码。
3. 方法二：使用快捷键。按下“Ctrl + U”（在 Mac 系统上是“Command + Option + U”），同样会直接打开网页源代码的新窗口。
（二）火狐浏览器（Firefox）
火狐浏览器也为用户提供了便捷的查看源代码方式。
1. 进入目标网页。
2. 方法一：在网页空白处右键单击，选择“查看页面源代码”，会打开一个新的标签页展示源代码。
3. 方法二：使用快捷键“Ctrl + U”（Mac 系统为“Command + Option + U”），即可快速查看。
（三）微软 Edge 浏览器
微软 Edge 浏览器查看源代码的操作也不复杂。
1. 打开需要查看的网页。
2. 方法一：在页面空白处点击右键，选择“查看源”，会弹出源代码窗口。
3. 方法二：使用快捷键“Ctrl + U”（Mac 系统使用相应组合键）。
二、开发者工具中的源代码查看
除了上述简单的查看方式，浏览器的开发者工具能提供更强大的源代码查看和调试功能。
（一）打开开发者工具
不同浏览器打开开发者工具的方式略有不同。
1. 谷歌浏览器：按下“F12”键或者使用“Ctrl + Shift + I”（Mac 系统是“Command + Option + I”）。
2. 火狐浏览器：按“F12”或者“Ctrl + Shift + I”（Mac 系统为“Command + Option + I”）。
3. 微软 Edge 浏览器：按“F12”或者“Ctrl + Shift + I”（Mac 系统使用对应组合键）。
（二）在开发者工具中查看源代码
打开开发者工具后，通常会看到多个面板，如“Elements”（元素）、“Console”（控制台）等。
1. 切换到“Elements”面板，这里展示了网页的 HTML 结构。你可以通过点击左侧的代码行来展开或折叠不同的元素，方便查看详细的代码结构。
2. 如果你想查看网页的 CSS 样式代码，可以在“Elements”面板中选择某个元素，右侧会显示该元素应用的 CSS 样式。
3. 若要查看 JavaScript 代码，可以切换到“Sources”面板，这里会列出网页加载的所有 JavaScript 文件，你可以点击相应文件查看具体代码。
三、移动设备上查看网页源代码
在移动设备上查看网页源代码相对复杂一些，但也有办法实现。
（一）安卓设备
1. 可以使用一些专门的浏览器应用，如 Kiwi 浏览器。它支持开发者工具功能。
2. 打开 Kiwi 浏览器，进入目标网页，点击浏览器菜单中的“开发者工具”选项，然后按照电脑端的方式查看源代码。
（二）苹果设备
苹果设备上目前没有直接查看网页源代码的官方方法，但可以通过安装一些第三方应用来实现，如 iCab Mobile 浏览器。安装后打开网页，在浏览器的设置中找到类似查看源代码的功能选项。
通过以上这些步骤，无论是在电脑上还是移动设备上，你都可以轻松查看网页源代码。掌握查看源代码的方法，能让你更深入地了解网页的构建原理，无论是学习编程还是解决一些网页显示问题，都能起到很大的帮助。