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

前言

• 在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地址（用localhost 或 自定義的地址都可）