下面我将为你详细介绍几种最常用和最简单的方法,主要分为 安卓手机 和 苹果手机 两大类。
（图片来源网络，侵删）
使用手机自带浏览器（最简单、无需安装）
这是最直接的方法,适用于绝大多数安卓和苹果手机自带的浏览器（如 Chrome, Safari, Edge 等）。
通用步骤 (适用于 Chrome, Edge, Firefox 等现代浏览器):
- 打开手机浏览器，进入你想查看代码的网页。
- 找到浏览器的菜单按钮，通常在屏幕右上角或右下角，有三个垂直或水平的点 或三条横线 。
- 点击菜单，在弹出的选项列表中寻找：
- “开发者工具” (Developer Tools)
- “网页工具” (Web Tools)
- “更多工具” (More Tools)
- 或者直接有一个 “查看网页源代码” (View Page Source) 的选项。
- 点击该选项，浏览器会切换到一个新的标签页，里面显示的就是当前网页的 HTML 源代码。
注意： 这个方法通常只能看到 HTML 代码，也就是网页的骨架，你无法像电脑上那样实时修改代码并查看效果（即“元素检查”功能），除非你使用更高级的方法。
使用 Safari 浏览器（仅限苹果 iPhone/iPad）
苹果设备的 Safari 浏览器在 iOS/iPadOS 16 及以上版本中，内置了更强大的网页检查工具，可以查看和调试 CSS 和 JavaScript。
步骤 1：开启“检查器”功能
- 打开 “设置” App。
- 向下滑动,找到并点击 “Safari 浏览器”。
- 向下滑动,找到 “高级” (Advanced) 选项，并点击它。
- 在高级设置中,找到 “网页检查器” (Web Inspector) 选项，打开它（按钮变为绿色）。
步骤 2：使用检查器查看代码
- 在 Safari 浏览器中打开你想要分析的网页。
- 点击 “AA” 图标（位于地址栏左侧），然后选择 “网页检查器” (Page Inspector)。
- 或者,你也可以像方法一那样，点击地址栏，在地址输入框的左侧会出现一个箭头图标，点击它也可以打开检查器。
- 一个悬浮的调试工具栏会出现在屏幕底部,你可以：
- 检查元素：点击工具栏左上角的“箭头”图标，然后点击页面上的任何元素，右侧面板会立刻显示出该元素的 HTML 和 CSS 代码。
- 查看源代码：在检查器工具栏中，找到 “元素” (Elements) 标签页，旁边通常会有一个 “源代码” (Sources) 或类似的标签，点击它可以查看完整的 HTML 源码。
- 调试 JS：在 “源代码” (Sources) 标签页中，你可以查看和设置 JavaScript 断点。
使用第三方浏览器 App（功能强大）
如果你觉得自带浏览器功能不够用,可以安装一些第三方浏览器，它们通常内置了更专业的开发者工具。
（图片来源网络，侵删）
推荐浏览器：Kiwi Browser (安卓)
Kiwi Browser 是一款基于 Chrome 内核的浏览器，以其强大的扩展性和开发者工具而闻名，被誉为“手机上的 Chrome DevTools”。
- 从应用商店下载并安装 Kiwi Browser。
- 打开 Kiwi Browser，进入目标网页。
- 点击菜单按钮（三个点）。
- 在菜单中找到 “开发者工具” (Developer Tools) 或 “更多工具” -> “开发者工具”。
- 它会打开一个功能齐全的调试面板,你可以在里面：
- 实时编辑 HTML 和 CSS，并即时看到效果。
- 查看 Console（控制台）输出。
- 分析网络请求。
- 调试 JavaScript。
它的体验和功能最接近电脑上的开发者工具。
使用代码查看器 App（简单直接）
如果你只是想快速复制和查看网页的 HTML 源代码，不关心调试功能，可以使用一些轻量级的代码查看器 App。
推荐 App：Source (安卓/iOS)
- 从应用商店下载并安装 Source (或其他类似的代码查看器)。
- 打开 App，在地址栏输入你想查看的网址。
- App 会加载网页并显示其 HTML 源代码。
- 你可以方便地 复制、搜索、分享 这段代码。
这类 App 专注于“查看源代码”这一个核心功能，非常简洁。
（图片来源网络，侵删）
总结与对比
| 方法 | 适用设备 | 优点 | 缺点 | 推荐人群 |
|---|---|---|---|---|
| 自带浏览器菜单 | 安卓/iOS | 无需安装，最简单 | 只能看静态HTML，无法调试 | 普通用户，只想快速看看网页结构 |
| Safari 检查器 | iPhone/iPad (iOS 16+) | 功能强大，可调试HTML/CSS/JS | 需要先在设置中开启，操作稍复杂 | 苹果用户，需要进行轻度网页调试 |
| 第三方浏览器 (Kiwi) | 安卓 | 功能最全，接近电脑体验 | 需要安装第三方App | 安卓用户，开发者，需要深度调试 |
| 代码查看器 App | 安卓/iOS | 界面清爽，专注于查看和复制 | 功能单一，无法调试 | 只想复制源码，不关心调试的用户 |
重要提示
- 仅用于学习：查看网页代码是学习前端开发的绝佳方式，但请尊重网站版权，不要用于恶意爬取或盗用内容。
- 手机性能限制：手机屏幕较小，处理复杂的网页代码会比较吃力，体验不如电脑流畅。
- 网络请求：通过浏览器查看的代码是浏览器最终渲染的代码，它可能已经过 JavaScript 的修改，如果你需要查看服务器最初返回的、未经修改的代码，上述方法可能无法完全满足，需要更专业的抓包工具（如 Charles、Fiddler），但这通常在电脑上操作更方便。
希望这份详细的指南能帮助你在手机上轻松查看网页代码！
