iOS Safari 查看网页源代码的几种实用方法

很多刚从 PC 转到 iPhone 的朋友，或者是习惯在手机上“瞎折腾”搞机的朋友，可能会遇到这样一个尴尬的场景：逛着一个看起来很有趣的网页，或者正在研究某个活动页面的逻辑，想右键“查看网页源代码”瞅一眼背后的 HTML，结果拿着 iPhone 看了半天 Safari 的界面，死活找不到这个功能。

iOS Safari 上确实没有一个像桌面浏览器那样显眼的“查看源代码”按钮，但这并不代表它做不到。苹果只是把它藏得比较深，或者说需要借助一些小工具来实现。今天就给大家盘点几种在 iOS 上查看网页源代码的实用方法，按需取用。

方法一：利用快捷指令（最推荐）

快捷指令是苹果设备上强大的自动化工具

这是目前iOS上最原生、体验最好的方法之一。快捷指令是苹果内置的自动化工具，我们可以通过添加一段特定的规则，让它去获取当前网页的源代码并展示出来。

操作思路：

1. 打开“快捷指令”App。
2. 添加一个新的快捷指令。
3. 在搜索框里搜索“获取URL”或直接使用“在Safari中显示网页”相关的动作组合。核心逻辑是获取当前 Safari 的 URL 内容，然后通过“获取URL内容”动作抓取源码，最后用“快速查看”或“拷贝至剪贴板”将结果呈现。

对于不想自己折腾动作用户，网络上有很多现成的“查看网页源代码”快捷指令库。你只需要把别人做好的快捷指令添加到自己的库里，然后把图标添加到主屏幕，以后在 Safari 浏览网页时，点击分享按钮，滑到最底端运行这个快捷指令，就能直接跳出来看源代码了。这招不仅免费，而且不需要联网跳转第三方，速度极快。

方法二：借助在线工具（无需配置）

JavaScript书签脚本示例

如果你不想安装任何快捷指令，或者懒得配置，最快的方法其实就是“借力”。原理很简单，我们在电脑上查看源码，本质上是向服务器请求了一次不带渲染的数据。我们可以利用一些在线工具帮我们做这件事。

操作思路：

1. 在地址栏输入 view-source: 加上你想查看的网址（例如 view-source:https://www.example.com），但是 Safari 本身不支持这个协议前缀。
2. 这时候我们需要用曲线救国法。找一个支持查看源码的在线服务（比如 view-source.org 或者各类开源的 GitHub Pages 工具）。
3. 将你想看的网址复制粘贴到这些工具的输入框里，一键生成。

虽然这种方法多了一个复制粘贴的步骤，但胜在通用性极强，哪怕借朋友的手机临时用一下也能操作。

方法三：JavaScript 书签脚本（极客范儿）

对于喜欢折腾浏览器书签的老用户来说，JavaScript 书签脚本绝对不会陌生。我们可以在 Safari 的书签里保存一段 JavaScript 代码，点击书签时，这段代码会在当前页面运行，从而读出源代码并覆盖当前网页显示。

操作思路：

1. 先在电脑上或手机备忘录里准备一段 JS 代码（网上有很多现成的 Show Source 脚本）。
2. 将任意一个网页存为书签。
3. 编辑这个书签，将标题改成“查看源码”，并将网址一栏替换为那段 JS 代码（通常以 javascript: 开头）。
4. 下次遇到想看的网页，直接点书签栏里的这个脚本，页面就会变成源代码视图。

这种方法的好处是无需切换 App，完全在浏览器内完成，但稍微有点上手门槛。

注意事项与应用场景

在手机上查看源代码，虽然屏幕小了点，但在很多场景下非常救命：

• 薅羊毛/抢购分析： 很多时候活动页面的抢购按钮其实是隐藏在 JS 逻辑里的，看一眼源代码可能就能找到真正的 API 接口。
• 调试排版： 博主或站长在外出时，有时候需要快速检查自己移动端站点的某个 H5 标签是否闭合。
• 学习借鉴： 看到别人好看的 CSS 效果，直接掏出手机看源代码偷师。

总结

iOS Safari 虽然“高冷”，没有直接提供查看源代码的入口，但通过快捷指令、在线工具和书签脚本这三种方式，完全可以弥补这个短板。如果你是重度用户，强烈建议花几分钟配置一个快捷指令，效率提升立竿见影。