H5調試

在PC上的調試

問題：須要調試樣式，沒有數據不方便調試。

方案：本地mock。

EG:

chrome書籤管理器 →將下面代碼存書籤裏，以下圖：

 

javascript: void  function () { var  d =  new  Date ();d.setFullYear(d.getFullYear() + 1);document.cookie= 'FIS_DEBUG_DATA=4f10e208f47bfb4d35a5e6f115a6df1a;path=/;expires='  + d.toGMTString() +  '' ;location.reload(); }();

開發h5頁時，打開所存的mock書籤，填入本身mock的數據，render以後可用，便可方便樣式的調試

 

補充：zhongbao-frontend中PC調試H5頁

fis3 release -w   // 編譯產出模板文件

fis3 server start (-p 8081) //默認端口號8080，能夠-p換端口

就能夠直接訪問頁面，eg：

http://127.0.0.1:8080/zhongbaofrontend/page/mobile/insurance

 

fis3 server open // 查看編譯後的文件

fis3 server restart

fis3 server stop

 

 

Chrome調試安卓機上的H5頁面

準備：

(1)安裝Chrome 32或者以後的版本

(2)使用USB線將安卓機和電腦鏈接起來

(3)打開 USB 調試選項

在安卓設備上，進入設置>開發者選項>打開USB調試 (注意：在安卓 4.2 及之後的版本中，默認狀況下開發者選項是隱藏的。要啓用開發者選項，選擇設置>關於手機而後點擊版本號7次。)

 

在chrome輸入chrome://inspect/#devices

inspect要調試的頁面，而後就能夠利用其審查元素、log數據、查看請求了。

EG:

 

 

適用安卓機和iPhone機 - 利用GapDebug調試

直接安裝以後，用數據線鏈接手機和電腦，手機容許GapDebug後便可調試。

優勢：

跨平臺，應用是個web頁面，同時集成了Safari和Chrome的調試工具，可運行在windows和mac平臺上

依賴少，只需一個Chrome就能使用Safari和Chrome的調試工具
統一管理，在同個界面顯示了iOS設備和Android設備及其調試頁
一些實用小功能，如截屏、設備控制、app安裝等

適用範圍
iOS設備和4.4以上版本Android設備（及其模擬器）上的webview和網頁。

 

 

設置代理

在移動端設備中配置http/https代理，將線上資源代理到本地

直接設置設備的代理服務器爲本機, 利用Fiddle或Charles 截獲請求查詢數據，排查異常信息

 

charles手機抓包

一、手機設置代理，代理到本身電腦的ip，端口號8888；

二、打開charles，彈出窗口選擇allow

三、能夠開始抓包了

eg: 打開百度外賣app->訂單

能夠看到NA的數據

上圖中，22是答謝騎士按鈕，9是再來一單的按鈕