網(wǎng)上找到了兩種IOS端的H5應(yīng)用調(diào)試方法填物,都嘗試并使用了一下纹腌。網(wǎng)上東西都比較雜亂霎终,所以自己試過之后就總結(jié)了一下。
1.直接使用Safari瀏覽器進(jìn)行調(diào)試
http://www.reibang.com/p/126d02ae9c14
按照上面這個(gè)步驟就可以實(shí)現(xiàn)升薯,但前一段時(shí)間自己在使用的時(shí)候會(huì)出現(xiàn)閃退的情況莱褒,不過最近突然又能夠穩(wěn)定使用,目前不知道是什么原因涎劈,很迷广凸。有可能和當(dāng)時(shí)設(shè)備的狀態(tài)有關(guān)系。
2.使用Chrome瀏覽器進(jìn)行調(diào)試
在網(wǎng)上看到兩種方法都進(jìn)行了嘗試
(1)使用iOS-webkit-debug-proxy
https://blog.csdn.net/mcky_love/article/details/80847520
事實(shí)證明這種方法只能看到移動(dòng)端H5頁面的代碼蛛枚,不能實(shí)現(xiàn)和移動(dòng)端的連調(diào)
(2)使用remotedebug-ios-webkit-adapter
能夠?qū)崿F(xiàn)調(diào)試效果谅海,不過第一次使用需要用梯子,但是只有第一次才需要蹦浦,以后有了緩存就不要了扭吁,除非你的緩存被清掉。
整理如下
(1)安裝 remotedebug-ios-webkit-adapter 之前先要安裝 ios-webkit-debug-proxy 和 libimobiledevice
brew update
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
(2)安裝remotedebug-ios-webkit-adapter
npm install remotedebug-ios-webkit-adapter -g
(3)手機(jī)同樣需要開啟 Web 檢查器盲镶,USB 連接電腦
(4)啟動(dòng) remotedebug_ios_webkit_adapter 或 remotedebug_ios_webkit_adapter --port=9000(默認(rèn)是9000端口侥袜,你也可以自己指定端口)
(5)谷歌瀏覽器打開 chrome://inspect/#devices -> Configure -> 配置上一步指定的端口 localhost:9000
-> Done
(6)配置完成之后就可以看到我們手機(jī)中打開的頁面了,點(diǎn) inspect 就可以進(jìn)行調(diào)試了
使用chrome也會(huì)出現(xiàn)偶爾檢測(cè)不到的情況或者比較卡的情況溉贿,這時(shí)候可能需要在命令行重啟下remote debug-ios-webkit-adapter(反復(fù)嘗試好多次發(fā)現(xiàn)每當(dāng)想在resources中查看.js文件的時(shí)候就會(huì)斷開連接枫吧,其他情況幾乎沒出現(xiàn)過鏈接斷掉的情況)。調(diào)試界面是通常熟悉的Chrome調(diào)試界面顽照。如果想在調(diào)試的頁面打斷調(diào)試,首先可以通過在頁面中寫console.log的方式在pc端定位到文件闽寡,直接在resources里面看是找不到的代兵。
可參考
https://jingyan.baidu.com/article/ca41422f06418b1eae99edb5.html
https://blog.csdn.net/sansan_7957/article/details/90641505
3.安裝remote debug-ios-webkit-adapter時(shí)遇到的問題
a. brew非常慢
解決方案:換源
https://www.cnblogs.com/diaolanshan/p/10187763.html
http://www.reibang.com/p/7cb05a2b39a5
b.安裝libimobiledevice出現(xiàn)問題:onfigure: error: Package requirements (libusbmuxd >= 1.1.0) were not met:
https://blog.csdn.net/weixin_34061482/article/details/91123804
c.ERROR: Could not connect to lockdownd, error code -3 解決方案
https://blog.csdn.net/weixin_40598352/article/details/81512704
4.使用Safari和Chrome兩種調(diào)試方法的體驗(yàn)
個(gè)人感覺,如果說你所使用的電腦沒有出現(xiàn)閃退或者其他情形爷狈,使用Safari進(jìn)行調(diào)試比較方便植影。如果Safari使用不了,可以使用Chrome的方式涎永。當(dāng)然思币,如果你更適應(yīng)Chrome的調(diào)試界面的話,用Chrome應(yīng)該會(huì)讓你體驗(yàn)更好羡微。