手機端調(diào)試大全

1.如何使用電腦上的谷歌瀏覽器來調(diào)試安卓手機上的移動端頁面(摘自:https://www.cnblogs.com/JinQingsong/p/6591830.html)
使用chrome remote debug出現(xiàn)空白或者404,解決方式(摘自:http://www.reibang.com/p/7be573c2f183)

2.如何使用電腦上的safari瀏覽器來調(diào)試ios手機上的移動端頁面(摘自:https://blog.csdn.net/guoyuyanmen/article/details/52485439)
3.charles調(diào)試袄简，證書安裝
https://blog.csdn.net/zpf_nevergiveup/article/details/78994481

1. [如何使用電腦上的谷歌瀏覽器來調(diào)試安卓手機上的移動端頁面]

第一步首先你得打開手機的開發(fā)者選項馏慨，確保USB調(diào)試和通過USB驗證應(yīng)用程序保持打開狀態(tài)柜思，如圖所示

image

第二步打開你電腦的上谷歌瀏覽器，調(diào)出控制臺得滤，點擊如圖所示這個3旁邊的3個點，這里面有更多的功能盒犹，點擊More tools懂更，在之后的頁面中discover USB devices選項打鉤，用你數(shù)據(jù)鏈連接你的電腦和手機阿趁，確認(rèn)后,左側(cè)devices會顯示連接設(shè)備,代表鏈接成功膜蛔。

image

第三步在電腦上的谷歌瀏覽器輸入這個網(wǎng)址chrome://inspect/

image

第四步手機端打開界面（部分app應(yīng)用不支持，可用谷歌瀏覽器打開界面）脖阵，輸入你想要調(diào)試的網(wǎng)頁皂股，我一般都是把網(wǎng)頁放到我的本地服務(wù)器，在手機瀏覽器上輸入我的本地網(wǎng)址命黔，如果是一個百度頁面的例子

image

最后一步呜呐，我們點擊inspect就可以審查手機頁面了，審查方法就跟審查PC網(wǎng)頁一樣了悍募。

image

訪問 `chrome://inspect/#devices`出現(xiàn)空白頁或出現(xiàn)404,用以下方式排查可基本解決問題
1.能夠訪問google.com
2.手機開啟usb調(diào)試模式
3.允許電腦訪問手機
4. 清除一下這里的緩存 chrome://appcache-internals/#

safari調(diào)試iPhone app web頁面

Safari設(shè)置
打開Safari偏好者設(shè)置蘑辑，選中“高級菜單”，在頁面最下方看到“在菜單中顯示開發(fā)菜單”的復(fù)選框坠宴，在復(fù)選框內(nèi)打鉤洋魂，這樣設(shè)置完畢就能在Safari菜單中看到開發(fā)菜單了

image.png

iPhone設(shè)置
打開iPhone手機設(shè)置app 選擇Safari，找到高級選項喜鼓，有JavaScript開關(guān)web檢查器開關(guān)副砍，講兩個開關(guān)都打開

image.png

調(diào)試
到此，準(zhǔn)備工作完成庄岖。這時候講iPhone鏈接到mac上豁翎，打開Safari瀏覽器，運行手機app里面的web頁面隅忿，在開發(fā)菜單中選擇連接的手機心剥，找到調(diào)試的網(wǎng)頁邦尊，就能在Safari里面調(diào)試了

image.png

Safari調(diào)試窗口

image.png

Safari控制臺
在Safari中鼠標(biāo)右鍵，選擇檢查元素优烧，就可以看見Safari控制臺了蝉揍。如果看不到檢查元素選項，依照上面Safari設(shè)置打開開發(fā)選項

最后編輯于：2019.05.29 10:54:15

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者