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還沒來得及實驗，之後有時間再補充。寫的不合適的地方歡迎各位大佬拍磚～