使用真機調(diào)試可以還原bug場景，但由于真機上不方便輸出調(diào)試信息，不容易進行代碼調(diào)試。這里可以通過在電腦上安裝一個Android模擬器，然后結(jié)合Chrome的devices遠程設(shè)備功能，進行移動端頁面的開發(fā)和調(diào)試

安裝模擬器

mac上面的Android模擬器可選擇的比較少，且性能不太好，這里推薦夜神Android模擬器https://www.yeshen.com/，windows上也可使用（windows建議版本v5.0.0https://www.yeshen.com/blog/version/）

然后設(shè)置代理、下載App等

記得在瀏覽器中 訪問? ip:端口? 下載證書

使用Chrome的遠程設(shè)備功能

使用模擬器打開APP或者瀏覽器，進入需要調(diào)試的web頁面

打開chrome，在地址欄輸入chrome://inspect/#devices，可以看見已經(jīng)打開的頁面

注意：第一次使用chrome://inspect/#devices需要翻墻下載一些依賴工具才行，確保Chrome可以訪問google.com

點擊對應頁面下的inspect，則會打開chrome開發(fā)者工具

然后就可以愉快的進行調(diào)試啦~

調(diào)試webview頁面需要客戶端配置支持webkit遠程調(diào)試，所以并不是所有的app都可以按照這種操作進行調(diào)試的。

Android真機

android手機的調(diào)試web頁面可以使用Chrome移動版配合進行調(diào)試

android手機連接相同局域網(wǎng)，然后打開移動端chrome輸出需要調(diào)試的頁面，

PC端chrome地址欄輸入chrome://inspect/#devices，可以查看到對應的設(shè)備及打開頁面，選擇即可進行調(diào)試

這種方式好像不能直接調(diào)試app內(nèi)的webview頁面~

iPhone怎么辦~

這里參考https://chon.io/blog/safari-ios-iphone-itouch-web-dev-inspector/

【iOS 終端】：設(shè)置 → Safari → 高級 → Web 檢查器 → 開。（如圖）

【OS X】：Safari → 偏好設(shè)置 → 高級 → 在菜單欄中顯示“開發(fā)”菜單。

然后通過數(shù)據(jù)線連接iPhone至mac，打開safari，在右上角的開發(fā)->iPhone，看見對應打開的頁面，點擊展開開發(fā)者工具，即可在電腦上調(diào)試移動端頁面

由于Xcode內(nèi)置的iPhone模擬器無法安裝AppStore的應用，因此暫時只能通過在Mac上使用Safari進行網(wǎng)頁調(diào)試，webview內(nèi)的頁面暫時沒有找到更合適的解決辦法。