【前端】本地調試H5頁面方案總結

背景

大學畢業快要一年了,用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 的環境下進行調試

原文連接: http://www.jianshu.com/p/a43417b28280