ios在mac中的调试

背景

现在的前端研发大都采用Mac设备，而移动端app大多沿用混合开发的方式，从而产生了很多原生页面和H5之间的交互问题。经过上次Mac调试安卓app中的H5的经历之后，今天尝试了在mac中调试ios系统的原生浏览器中的页面

环境准备

```
mac一台
iPhone手机一部
```
复制代码

步骤

iPhone设置

• 打开设置–>Safari浏览器–>高级–>开启JavaScript和web检查器

iphone端的操作全部操作完成

Chrome 浏览器

没有安装HomeBrew的小伙伴，先安装HomeBrew，不了解HomeBrew的同学可以在 这里 查看

• 安装完成后,依次执行下面代码

brew unlink libimobiledevice ios-webkit-debug-proxy usbmuxd
brew uninstall --force libimobiledevice ios-webkit-debug-proxy usbmuxd
brew install --HEAD usbmuxd
brew install --HEAD libimobiledevice
brew install --HEAD ios-webkit-debug-proxy
复制代码

• 安装最新版本的adapter,

npm install remotedebug-ios-webkit-adapter -g
复制代码

到这一步，mac端的操作就已经完成了，然后再看iphone的设置

mac上打开终端，执行命令，开启adapter，设置监听端口为9000

remotedebug_ios_webkit_adapter --port=9000
复制代码

Chrome中打开chrome://inspect/#devices，在configure中添加localhost:9000,可以看到设备出现在列表中。iphone的Safari中的页面，就可以在这里看到，点击inspect，就可以和PC端一样，进行调试啦

Safari浏览器

Safari浏览器中相对就比较简单啦，iphone端的操作完全一样，打开Safari浏览器，选中系统偏好设置–>高级,勾选在菜单中打开“开发”菜单

连接手机，打开Safari浏览器，选择开发，选中设备，可看到移动端Safari浏览器中打开的网址，点击，就能打开Safari浏览器的开发者工具了。如图所示：