Safari和Chrome浏览器真机调试iphone中h5页面踩坑之路

背景

如今的前端研发大都采用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浏览器的开发者工具了。如图所示：

结语

因为时间缘由，目前只是实现对IOS中的原生浏览器页面的调试，针对app中的webview还没来得及实验，之后有时间再补充。写的不合适的地方欢迎各位大佬拍砖～