通過電腦瀏覽器調試真機h5兼容問題

• 2021 年 1 月 25 日
• 筆記
• 前端

前言

• 在h5開發過程中，起初我們使用PC瀏覽器的手機模式打開開發中的頁面，並使用控制台進行調試，但實際真機兼容性問題無法調試到；在這種情況下，我們通常使用vConsole（即移動端的控制台）來調試，但vConsole的功能和PC chrome 控制台比，想去甚遠。
• 本文提供了通過電腦瀏覽器調試真機h5兼容問題的方法

Android

真機 + USB + Chrome Inspect

• 參考文檔：Android 設備的遠程調試入門

雲真機 + adb遠程 + Chrome Inspect

公司內部通常有雲真機平台，可以通過adb遠程來進行連接（具體略）

• 效果：
  
  

iOS

真機 + USB + safari

• 參考文檔：iOS開發之safari調試iPhone app web頁面

1. 步驟
   a. mac電腦——safari——偏好設置——高級菜單：勾選「在菜單中顯示開發菜單」
   
   b. iPhone——設置——safari——高級：打開「JavaScript開關」和「web檢查器開關」
   
   c. 將iphone用數據線連接到mac電腦上，mac電腦上打開safari，運行手機app里的web頁面，在開發菜單中選擇連接的手機，找到調試的網頁，就能在Safari裏面調試了
   
   d. 在Safari中鼠標右鍵，選擇檢查元素，就可以看見Safari控制台了
   
2. 優點：可以像電腦chrome開發一樣，查看各個元素和控制台輸出結果等等，功能比vConsole全
3. 缺點：現在只支持手機safari內的h5，不支持app內的h5

Xcode simulator + 模擬器包 + safari

• 效果：
  

1. 步驟
   a. 安裝Xcode：在mac電腦的App Store中安裝
   b. 打開模擬器：Xcode——Open Developer Tool——Simulator
   
   c. 切換模擬器中的手機型號：File——Open Simulator——ios 14.0——iPhone xx（註：只能切換手機型號，不能切換系統）
   
   d. 安裝模擬器包，解壓後，把應用程序直接拖拽到模擬器屏幕中
   e. 在app中打開web頁面，在safari——開發中找到相應頁面並調試
2. 優點
   a. 可以解決chrome不支持12px的問題
   b. 兼容性測試，各種機型，各種系統
   c. 無需數據線連接
   d. 無需像真機一樣需要charles的各種配置（手機配置代理、安裝https證書等）即可實現抓包以及在模擬器上直接訪問localhost地址（例：自定義的xhy.meituan.com）