如何使用chrome調試iphone頁面?win10 remotedebug-ios-webkit-adapter 安裝與使用

先放個原版教程連接,請戳這裏 https://github.com/RemoteDebu...

使用chrome devtools 調試 iphone 頁面,需安裝 remotedebug-ios-webkit-adapter 工具。html

這個 adapter 可牛批壞了,能夠經過VS Code,Chrome DevTools,Mozilla Debugger.html和其餘與Chrome調試協議兼容的工具調試iOS上的Safari和WebViews。ios

且看如下具體步驟。git

開始

在使用此適配器以前,您須要確保安裝了最新版本的iTunes,由於咱們須要iTunes提供的一些庫來與iOS設備通訊。github

安裝依賴項

一、安裝scoop(windows的包管理工具)web

#修改執行策略,選擇是 or 全是
set-executionpolicy unrestricted -s cu
  #安裝scoop
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

二、經過scoop安裝 ios_webkit_debug_proxychrome

scoop bucket add extras
scoop install ios-webkit-debug-proxy
npm install -g vs-libimobile

三、安裝最新版本的 remotedebug-ios-webkit-adapternpm

npm install remotedebug-ios-webkit-adapter -g

四、在Safari中啓用遠程調試
爲了顯示您的iOS設備,您須要啓用啓用開發者模式進行調試。windows

*Iphone => 設置 => Safari 瀏覽器 => 高級 => web檢查器 => 啓用*

五、讓您的計算機信任您的iOS設備
將Iphone手機鏈接電腦,必須點擊「信任」,並打開 itunes, 以確保手機鏈接。瀏覽器

六、打開你喜歡的命令行工具,運行如下命令:app

remotedebug_ios_webkit_adapter --port=9000
#ios-webkit-debug-proxy 將自動爲您運行 無需單獨啓動

clipboard.png

七、 打開chrome, 輸入網址: chrome://inspect/#devices
以下圖所示,點擊 inspect, 便可調試。

clipboard.png

恭喜你,如今能夠愉快的調試網頁了

clipboard.png

如下是iphone上看到的效果:

*指哪打哪,簡直不要太牛批*

clipboard.png

PS請多多指正!別忘記點個贊喲~ 並回敬您一個猿式的微笑:)

相關文章
相關標籤/搜索