前言
使用weinre在真機上除錯H5頁面，有一個突出的缺點，就是無法除錯真機上的樣式，真機上頁面動態建立的dom在weinre的Elements皮膚顯示不出來，所以除錯真機上的頁面樣式也就無從談起。如下圖所示，單頁應用動態建立出來的dom,壓根就顯示不出來。不知道網上吹噓weinre可以除錯真機dom樣式文章的作者，有沒有親自做過實驗，weinre除錯真機dom樣式的功能真的能用嘛？好用嘛 ？真的要是遇到生產問題，weinre能定位真機和PC端瀏覽器手機模擬器下樣式不一致的問題嘛？weinre難堪大用，但是問題依舊要解決。那麼真機除錯頁面應用場景解決方案是什麼呢？答案就是手機平臺提供的移動端真機除錯方案。在Android上是Android +Chrome組合，在IOS上是IOS+Safari組合。筆者使用的是Android手機，所以側重介紹在Android手機上，如何除錯H5網頁。
除錯準備
1.電腦和手機都安裝了谷歌瀏覽器，並且PC端的谷歌瀏覽器可以翻牆(這一點很重要)。
2.在PC端谷歌瀏覽器位址列輸入 chrome://inspect/#devices 回車，勾選Discover USB devices選項
Chrome會自動檢測手機上開啟的H5頁面，列出可除錯的H5頁面
3.讓手機可以被PC上的Chrome瀏覽器檢測到，許多人都卡在了這一步，導致功敗垂成。正確的姿勢是：
3.1 開啟手機上的USB除錯開關
筆者使用的手機USB除錯開關設定方式是：
開啟 設定==>開發人員選項==>USB除錯，開啟即可。
開發者選項在Android 4.2及以上版本中預設是隱藏的。開啟開發人員選項的方法是：開啟 設定==>關於手機，連續點選版本號7次即可。
其它機型的開啟方式也應該大同小異。
3.2 使用USB線連線手機和電腦
這裡有個隱藏的大坑。如果你使用的是僅有充電而沒有資料傳輸功能的USB線，如下面所示的這種USB 三合一 充電線。那麼你的手機就無法被PC端的Chrome瀏覽器檢測到。
手機原配的USB充電線，都有資料傳輸功能。連線電源的話，沒有多餘的選單選項。連線電腦之後，在手機的通知欄，會彈出USB連線方式的選項，預設USB連線是僅充電。要進行真機除錯的話，除了不能選擇僅充電和反向充電選項之外，另外幾種模式都可以選。
在手機上做完這兩步配置，PC端的Chrome瀏覽器才能檢測到需要除錯的裝置。注意：每次重新連線時，都得重新選擇USB連線模式為非充電模式。
用真機上的Chrome瀏覽器開啟要除錯的頁面，要除錯的頁面就會顯示在PC端Chrome瀏覽器掃描出的手機裝置下方
可是點選了某個想要除錯的頁面下方的inspect之後，卻報網頁找不到。因為國內使用者訪問不到https://chrome-devtools-frontend.appspot.com。這個網站會提供當前手機瀏覽器核心的真機除錯功能，解決方法就是讓PC端的Chrome瀏覽器可以翻牆。
做了翻牆的配置之後，就能在PC端除錯真機上的頁面dom樣式了。
你會發現，在PC端無法滑動要除錯的頁面，如果要除錯頁面底部的樣式，該怎麼辦，其實很簡單，就是在真機上把頁面滑動到底部，PC端的除錯頁面也會跟著真機一塊滑動到頁面底部。然後在PC端除錯頁面修改頁面底部元素樣式，在真機會看到，修改的樣式會同步生效。
如果你想在 微信/企業微信 中除錯H5頁面，需要分別用微信/企業微信掃描下方的二維碼
頁面開啟之後，切換到資訊皮膚，勾選--開啟TBS核心Inspector除錯功能。這個設定只需設定一次。
然後在微信/企業微信中開啟你要除錯的頁面，就能除錯微信/企業環境的H5頁面樣式了。
參考文章
[1] 微信下除錯H5頁面
[2] Android通過Chrome Inspect除錯WebView的H5 App出現空白頁面的解決方法（不需要FQ）