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浏览器的开发者工具了。如图所示：