使用真機(jī)調(diào)試可以還原bug場景描孟，但由于真機(jī)上不方便輸出調(diào)試信息益兄，不容易進(jìn)行代碼調(diào)試戒洼。這里可以通過在電腦上安裝一個Android模擬器，然后結(jié)合Chrome的devices遠(yuǎn)程設(shè)備功能间唉，進(jìn)行移動端頁面的開發(fā)和調(diào)試
安裝模擬器
mac上面的Android模擬器可選擇的比較少绞灼，且性能不太好，這里推薦夜神Android模擬器https://www.yeshen.com/呈野，windows上也可使用（windows建議版本v5.0.0https://www.yeshen.com/blog/version/）
然后設(shè)置代理低矮、下載App等
記得在瀏覽器中 訪問? ip:端口? 下載證書
使用Chrome的遠(yuǎn)程設(shè)備功能
使用模擬器打開APP或者瀏覽器，進(jìn)入需要調(diào)試的web頁面
打開chrome被冒，在地址欄輸入chrome://inspect/#devices军掂，可以看見已經(jīng)打開的頁面
注意：第一次使用chrome://inspect/#devices需要翻墻下載一些依賴工具才行轮蜕，確保Chrome可以訪問google.com
點擊對應(yīng)頁面下的inspect，則會打開chrome開發(fā)者工具
然后就可以愉快的進(jìn)行調(diào)試?yán)瞺
調(diào)試webview頁面需要客戶端配置支持webkit遠(yuǎn)程調(diào)試蝗锥，所以并不是所有的app都可以按照這種操作進(jìn)行調(diào)試的跃洛。
Android真機(jī)
android手機(jī)的調(diào)試web頁面可以使用Chrome移動版配合進(jìn)行調(diào)試
android手機(jī)連接相同局域網(wǎng)，然后打開移動端chrome輸出需要調(diào)試的頁面终议，
PC端chrome地址欄輸入chrome://inspect/#devices汇竭，可以查看到對應(yīng)的設(shè)備及打開頁面，選擇即可進(jìn)行調(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玻驻，看見對應(yīng)打開的頁面，點擊展開開發(fā)者工具偿枕，即可在電腦上調(diào)試移動端頁面
由于Xcode內(nèi)置的iPhone模擬器無法安裝AppStore的應(yīng)用璧瞬，因此暫時只能通過在Mac上使用Safari進(jìn)行網(wǎng)頁調(diào)試，webview內(nèi)的頁面暫時沒有找到更合適的解決辦法渐夸。
