摘要
詳細講述微信H5頁面調試（安裝在安卓或iOS手機上的），釘釘內H5頁面的調試，QQ、微博以及各瀏覽器上H5頁面的調試方法
背景
大學畢業快要一年了,用leader的話說我也是有一年開發經驗的前端開發工程師了,輸出是檢驗輸入的最好方法,那我就慢慢來總結這一年來在工作中總結的經驗教訓,分享給大家,有不專業和不完善的地方,請大家多多指點反饋,比心~
做過一段時間的運營需求,一些主要在手機上瀏覽的頁面,遇到的最大問題是調試的問題:
1. 對於簡單的網絡、APP環境的調試,我們可以通過Chrome調試安卓機上的H5頁面,通過Safari調試iPhone上的H5頁面
2. 對於一些復雜的網絡、App環境的調試,如需要調試 HTTPS協議的接口，或必須要在某些 App 中才能調用的jsBridge 接口(如微信)，導致難以在本地建立開發環境，需要將代碼發到測試環境等之后才能調試，導致開發效率低下
本文將介紹一些可用的本地開發調試方法,提高你的開發效率,嘿哈~。
一.簡單網絡、APP環境的調試
需求:
調試嵌入App(Webview組件處於可調試狀態)的H5頁面,此H5頁面調用了jsBridge接口(例如jockey接口)
難點:
H5調用了App的jsBridge接口,則此H5頁面只能在此App里打開
1.通過Chrome調試安卓機上的H5頁面
解決方案(適用於Mac,未在Windows平台驗證):
(1)安裝Chrome 32或者之后的版本
(2)使用USB線將安卓機和Mac連接起來
(3)打開 USB 調試選項
在安卓設備上，進入設置>開發者選項>打開USB調試 (注意：在安卓 4.2 及以后的版本中，默認情況下開發者選項是隱藏的。要啟用開發者選項，選擇設置>關於手機然后點擊版本號7次。)。
(4)在電腦端的Chrome里，在地址欄輸入chrome://inspect#device。進入后確認Discover USB devices已經勾選了：
(5)在你的設備上，打開要瀏覽的頁面,會跳出一個彈框，詢問你是否要允許在電腦端進行USB調試。選擇確定。
(6)點擊chrome://inspect/#devices 頁面上的inspect便可以審查安卓機上的H5頁面的元素了
2.通過Safari調試iPhone上的H5頁面
解決辦法(適用於Mac,未在Windows平台驗證):
(1)運行Safari,點擊“Safari”菜單下面的“偏好設置（Preferences...）”，切換到“高級選項（Advanced）”：
(2)勾選“在菜單欄顯示"開發"菜單（ShowDevelop menu in menu bar）”，關閉偏好設置。此時在Safari的工具欄出現“開發（Develop）”菜單：
(3)使用USB線將iPhone和Mac連接起來
(4)在iPhoneSafari打開要調試的H5頁面,便可以調試了
二.復雜網絡、APP環境的調試
需求:
在微信中調試H5頁面的微信分享功能,http://m.signature.cn數字簽名生成服務使用https協議通信(比如 https://io.signature.cn),數字簽名服務只允許*.signature.cn訪問
難點:
(1)必須在*.signature.cn環境下進行調試,否則無法訪問用來簽名的https://io.signature.cn服務
(2)io.signature.cn服務使用https協議通信,中間難以通過代理攔截
(3)分享相關微信jsBridge接口,只在微信App中存在,無法在本地開發環境調用
解決辦法(適用於Mac):
(1)下載安裝微信Web開發者工具，從這里https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
(2)下載並安裝 Charles，從這里http://xclient.info/s/charles.html
(3)打開Charles，按如圖所示方式安裝根證書
(4)在Proxy -> SSL Proxying Settings 中，加入 *.signature.cn 域名
(5)在Tools -> Map Local 功能中，加入需要代理到本地的線上 URL 到 本地文件夾的對應關系
(6)在微信開發者工具中，設置代理到 Charles 端口
(7)在微信開發者工具中，打開線上地址，可以看到 JS 文件已經被替換，這時候可以在同時有線上 API 和微信 jsBridge 的環境下進行調試
--------------------------更新--------------------------
調試工具還有xcode和微信web開發者工具（上文講的是微信開發者工具，兩者不同）
1. xcode
Xcode 是運行在操作系統Mac OS X上的集成開發工具（IDE），由蘋果公司開發。Xcode是開發OS X和iOS應用程序的最快捷的方式。
它有iOS系統模擬器，能夠結合上邊的用Safari調試iPhone手機上的頁面的方式調試模擬器中任何app打開的頁面。
以釘釘調試為例，請看文檔 釘釘調試文檔
2.微信web開發者工具
下載鏈接：微信web開發者工具下載鏈接 （這個鏈接還真不好找，百度 bing搜到的結果都是微信開發者工具的下載鏈接）
如圖，這是一個非常強大的工具，即可以調試安卓手機的頁面也可以調試iOS手機上的頁面，，，用這個工具可以調試各瀏覽器上的頁面，微博里的h5頁面或者QQ客戶端里的h5頁面
原作者：瓦斯程序媛
鏈接：https://www.jianshu.com/p/a43417b28280