在iOS或Mac上使用Safari时，如果找不到直接查看网页HTML源代码的选项，别着急。

这通常只是因为一个关键功能没打开。Safari本身提供了强大的开发者工具，只是默认藏得比较深。

下面，我们就来分平台梳理几种最实用的方法，帮你轻松调出网页的“原始骨架”。

Mac端：启用开发菜单并查看源代码

对于Mac用户，最正统、最完整的方法是启用Safari自带的“开发”菜单。

这相当于打开了官方的调试工具箱，可以直接查看未经任何处理的完整HTML源文件，无需借助任何外部工具。

操作步骤如下：

1. 点击屏幕左上角的“Safari”菜单，进入“设置”。
2. 在弹出的窗口中，切换到“高级”标签页。
3. 勾选“在菜单栏中显示‘开发’菜单”选项。

设置完成后，重新打开或刷新你想查看的网页。

此时，顶部菜单栏会出现一个新的“开发”选项。点击它，在下拉菜单中选择“显示网页源代码”。

一个独立的窗口就会弹出，里面就是当前页面的完整HTML结构。

Mac端：使用快捷键快速调出源代码

如果你已启用开发菜单，并且需要频繁查看源码，记住快捷键会极大提升效率。

它省去了层层点击菜单的步骤，一键直达。

确保光标焦点在当前Safari网页标签页内，然后直接按下 Option + Command + U 组合键。

源代码查看窗口会立刻弹出，其内容与通过菜单点选出来的完全一致。

Mac端：通过检查元素查看局部源码

有时我们不需要看整个页面的代码，只想研究网页上某个特定元素对应的HTML结构。

这时候，“检查元素”功能就派上用场了。前提同样是已启用“开发”菜单。

操作流程如下：

1. 在网页上，找到你感兴趣的那个元素。
2. 右键点击（或在触控板上双指轻点）。
3. 在弹出的上下文菜单中，选择“检查元素”。

Safari的开发者工具面板会在屏幕下方或右侧展开。

它会自动定位并高亮你刚才点击位置所对应的HTML节点。

你可以在这个结构树中随意展开、折叠、浏览，精准地查看和分析任何局部代码片段。

iOS端：利用书签工具提取源码

在iOS设备上，Safari没有直接提供查看源码的菜单。

但我们可以利用“书签工具”来曲线救国。它的原理是通过一段JavaScript代码，动态获取页面的HTML内容并展示出来。

具体操作分几步：

1. 在iPhone或iPad的Safari中打开任意网页，点击底部的分享按钮，选择“添加到书签”。
2. 把书签名称改成“查看源代码”之类你容易识别的名字，然后保存。
3. 点击浏览器底部的书签图标，进入书签管理界面，找到并编辑你刚刚创建的“查看源代码”书签。
4. 将“地址”或“URL”一栏原有的内容清空，粘贴入下面这段代码：
   javascript:(function(){var a=document.documentElement.outerHTML;window.open('data:text/html;charset=utf-8,'+encodeURIComponent(a));})()

保存之后，这个书签就变成了一个功能按钮。

以后在任何你想查看源码的网页，只要点击这个书签，就会自动弹出一个新的标签页，里面显示的正是当前页面的完整HTML源代码。

iOS端：通过快捷指令获取网页原始内容

如果你觉得管理书签工具不够直观，那么利用iOS系统自带的“快捷指令”应用，是另一个非常优雅且强大的解决方案。

它可以实现自动化获取网页的原始数据。

操作步骤如下：

1. 打开“快捷指令”App，创建一个新指令。
2. 首先添加一个“获取网页内容”的操作。务必将“获取内容类型”设置为“原始文本”，这样才能拿到最原始的HTML代码。
3. 然后，再添加一个“显示结果”操作，以便将获取到的代码内容展示出来。
4. 保存并给这个快捷指令起个名字，比如“查看网页源代码”。

最后，我们需要把它放到方便调用的地方：

1. 在Safari中打开一个网页，点击分享按钮。
2. 在分享列表底部找到“快捷指令”选项（可能需要下滑展开）。
3. 点击进入后，确保你刚创建的“查看网页源代码”指令处于开启状态。

至此，大功告成。

今后在任意网页，你只需点击分享按钮，选择“快捷指令”，再点击“查看网页源代码”，就能立刻看到该页面的HTML源码了。

《夸克》非常好用的免费AI浏览器

下载APP查看