背景
大學畢業快要一年了,用leader的話說我也是有一年開發經驗的前端開發工程師了,輸出是檢驗輸入的最好方法,那我就慢慢來總結這一年來在工作中總結的經驗教訓,分享給大家,有不專業和不完善的地方,請大家多多指點反饋,比心~
做過一段時間的運營需求,一些主要在手機上瀏覽的頁面,遇到的最大問題是調試的問題:
對於簡單的網絡、APP環境的調試,我們可以通過Chrome調試安卓機上的H5頁面,通過Safari調試iPhone上的H5頁面
對於一些復雜的網絡、App環境的調試,如需要調試 HTTPS協議的接口，或必須要在某些 App 中才能調用的jsBridge 接口(如微信)，導致難以在本地建立開發環境，需要將代碼發到測試環境等之后才能調試，導致開發效率低下
本文將介紹一些可用的本地開發調試方法,提高你的開發效率,嘿哈~。
一.簡單網絡、APP環境的調試
需求:
調試嵌入App(Webview組件處於可調試狀態)的H5頁面,此H5頁面調用了jsBridge接口(例如jockey接口)
難點:
H5調用了App的jsBridge接口,則此H5頁面只能在此App里打開
1.通過Chrome調試安卓機上的H5頁面
解決方案:
(1)安裝Chrome 32或者之后的版本
(2)使用USB線將安卓機和Mac連接起來
(3)打開 USB 調試選項
在安卓設備上，進入設置>開發者選項>打開USB調試 (注意：在安卓 4.2 及以后的版本中，默認情況下開發者選項是隱藏的。要啟用開發者選項，選擇設置>關於手機然后點擊版本號7次。)。
(4)在電腦端的Chrome里，在地址欄輸入chrome://inspect。進入后確認Discover USB devices已經勾選了：
(5)在你的設備上，打開要瀏覽的頁面,會跳出一個彈框，詢問你是否要允許在電腦端進行USB調試。選擇確定。
(6)點擊chrome://inspect/#devices 頁面上的inspect便可以審查安卓機上的H5頁面的元素了
2.通過Safari調試iPhone上的H5頁面
解決辦法:
(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 的環境下進行調試
