本地調試H5頁面

摘要

詳細講述微信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