Safari调试

Posted 2023-04-21

参考技术A # Safari 断点调试—iOS

iOS 系统内置 WebView 与 Safari 浏览器内核相同，我们可在 OSX 系统中，通过 Safari 浏览器开发者工具，向调试普通网页一样，调试真机中运行的网页。

## 准备工作

1. AppleID，拥有 **App 发布证书**的开发者帐号

2. 能运行 Safari 浏览器的 OSX 系统

3. iOS 系统真机

4. 可调试的 App 包

## 注册设备

在[苹果开发者网站][apple_dev_site]向公司的证书中注册需要调试的 iOS 设备

1. 在[苹果开发者网站][apple_dev_site]登录拥有证书的 AppleID

2. 进入证书管理界面

![开发者网站证书管理]

3. 管理证书中的设备

![开发者网站证书设备管理]

4. 通过 iOS 设备的 UDID 向证书注册该调试设备

![证书中注册设备]

## 开发者模式

iOS 与 OSX 中的 Safari 默认都不会开启开发者模式，需要分别启用

1. 开启 OSX 中 Safari 浏览器的开发者模式

![打开 OSX safari 开发]

2. 在 iOS 设备的设置界面，开启 Safari 浏览器开发功能

## 生成调试包

### 通过 XCode 生成调试包

在Xcode中选择需要打包的项目， Archives 工程项目

导出 ipa 时选择第四个选项 “save for development Deployment”，则导出的 ipa 为调试包

## 调试网页

完成以上步骤（证书注册、开发模式、调试包）后，就可调试 iOS 设备调试中的网页了

OSX 中 Safari 浏览器调试指定页面(手机屏幕变蓝表示是手机当前的 html 页面)

## 基本功能

以上一切的准备，都是为了实现，实时调试 iOS 设备中的网页，操作没有什么不同。

## 断点调试,查看元素模型等

iOS13调试Safari和WKWebView中的页面

参考技术A 新版系统想要通过连数据线直接调试Safari或者App中的Web页面遇到了困难，在Mac上的Safari “开发” 菜单中无法识别到手机。

经过尝试，还是有方法使得 “开发” 菜单中显示当前连接的手机的。步骤如下：

此时 Mac Safari 的 “开发” 菜单中就已经能识别该手机，并且可以开始调试相关页面了。
此方法需要注意，数据线必须保持连接着手机，否则调试会中断。