小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

摘要

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

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！