做移動開發大多數的時候跟手機界面打交道，也就是說你隻能在電腦上開發寫代碼，最終效果是确是在另外一個終端看到的。雖然各種浏覽器為開發者提供了很多模拟手機裝置的功能，這些功能總體來說基本可以滿足我們對于調試移動裝置的需求，但是模拟畢竟是模拟，它不能真正做到實作真機一樣的效果。經常遇到在chrome模拟器上樣式顯示正常，在手機上卻出現樣式錯誤的情況，在PC端模拟器運作正常,在真機上卻報錯的情況。是以，必須在想辦法在真實的機子上測試我們的代碼最終的執行效果。移動端真機調試有幾個剛需：看log、看error資訊、看網絡請求。其它的如實時修改html/css/javascipt代碼, 檢視timeline，cookie，localstorage，網絡資源和斷點調試就不是那麼頻繁。可以沿着兩條思路解決這個問題:第一，自己寫一個簡單的調試工具,第二:尋找專業的調試工具。
自己寫工具
先介紹一下容易了解的移動端調試方法吧，比如自己寫一個列印輸出的資訊框。
/*
* 移動端列印
*
*/
function debug(msg) {
msg=new printTree().dump(msg);
var div = document.querySelector("#logField");
if (div) {
div.innerHTML += msg;
} else {
div = document.createElement('div');
div.id = "logField";
div.classList.add('debug');
// div.style['position'] = 'fixed';
// div.style['top'] = 0;
// div.style['left'] = 0;
div.style['width'] = '100%';
div.style['background-color'] = 'rgba(0,0,0,.8)';
div.style['font-size'] = '1.4rem';
div.style['color'] = 'yellow';
div.style['word-break'] = 'break-all';
div.style['line-height'] = '1.3';
div.style['padding'] = '10px 20px';
div.innerHTML = msg;
var first=document.body.firstChild;
document.body.insertBefore(div,first);
// document.body.appendChild(div);
}
} 
printTree源代碼如下所示:
1 ;(function(window){
2
3 // Constructor
4 printTree = function (config){
5
6 config=config ? config : {};
7
8 this.tabKey= config.tabKey ? config.tabKey : " ";
9
10 };
11
12 // Prototype
13 printTree.prototype = {
14
15 /**
16 *
17 * Private methods
18 *
19 */
20
21 /**
22 * [對函數進行格式化處理]
23 * @param {[類型不确定]} obj [資料内容]
24 * @param {[Number]} indent [縮進Tab鍵數量]
25 * @param {[Boolean]} addComma [是否需要在行尾加逗号]
26 * @param {[Boolean]} isArray [是不是數組]
27 * @param {[Boolean]} isPropertyContent [是不是屬性内容]
28 * @return {[String]} print [格式化後的對象字元串]
29 */
30 _printObject:function(obj, indent, addComma, isArray, isPropertyContent){
31
32 var print = "";
33
34 // 是否需要加逗号
35 var comma = (addComma) ? "," : "";
36
37 // 判斷對象類型
38 var type = Object.prototype.toString.call(obj);
39
40 // 數組的處理
41 if( type == "[object Array]"){
42
43 //
44 if(obj.length == 0){
45 // isPropertyContent如果為真,說明是屬性内容,不用加tab鍵,否則要在前面加tab鍵
46 print += this._getRow(indent, "[ ]"+comma, isPropertyContent);
47
48 }else{
49
50 // 列印數組前面的中括号
51 print += this._getRow(indent, "[", isPropertyContent);
52
53 for(var i = 0; i < obj.length; i++){
54 // _printObject 數組中可能嵌套這其它對象
55 // indent + 1 每遞歸一次,加一個縮進符
56 // i < (obj.length - 1) 不是數組的最後一個元素,都要加逗号
57 print += this._printObject(obj[i], indent + 1, i < (obj.length - 1), true, false);
58
59 }
60
61 // 列印數組後面的中括号
62 print += this._getRow(indent, "]"+comma);
63
64 }
65
66 }else if(type == "[object Object]"){
67
68 if(obj == null){
69 print += this._formatLiteral("null", "", comma, indent, isArray);
70 }
71 else{
72
73 var numProps = 0;
74
75 for(var prop in obj) numProps++;
76
77 if(numProps == 0){
78
79 print += this._getRow(indent, "{ }"+comma, isPropertyContent);
80
81 }else{
82
83 print += this._getRow(indent, "{", isPropertyContent);
84
85 var j = 0;
86
87 for(var prop in obj){
88
89 print += this._getRow(indent + 1, prop+':'+this._printObject(obj[prop], indent + 1, ++j < numProps, false, true));
90
91 }
92
93 print += this._getRow(indent, "}"+comma);
94
95 }
96 }
97
98 }else if(type == "[object Number]"){
99
100 print += this._formatLiteral(obj,comma,indent, isArray);
101
102 }else if(type == "[object Boolean]"){
103
104 print += this._formatLiteral(obj, comma, indent, isArray);
105
106 }else if(type == "[object Function]"){
107
108 obj = this._formatFunction(obj);
109
110 print += this._formatLiteral(obj, comma, indent, isArray);
111
112 }else if(type == "[object Undefined]"){
113
114 print += this._formatLiteral("undefined",comma, indent, isArray);
115
116 }else{
117
118 print += this._formatLiteral(obj, comma, indent, isArray);
119
120 }
121
122 return print;
123
124 },
125
126 /**
127 * [對文本内容進行格式化處理]
128 * @param {[String]} literal [字元内容]
129 * @param {[String]} comma [是否加逗号]
130 * @param {[Number]} indent [縮進的Tab鍵數量]
131 * @param {[Boolean]} isArray [是否為數組]
132 * @return {[String]} str [格式化後的函數字元串]
133 */
134 _formatLiteral:function(literal, comma, indent, isArray){
135
136 var str=literal+comma;
137
138 if(isArray){
139 str = this._getRow(indent, str);
140 }
141
142 return str;
143
144 },
145
146 /**
147 * [對函數進行格式化處理]
148 * @param {[Function]} obj [函數内容]
149 * @return {[String]} str [格式化後的函數字元串]
150 */
151 _formatFunction:function(obj){
152
153
154 var str = "";
155 // 以換行符對每行進行分割
156 var funcStrArray = obj.toString().split("\n");
157
158 if(funcStrArray.length){
159
160 // 重組每行内容,除末尾行之外,每行加上換行符
161 for(var i = 0; i < funcStrArray.length-1; i++){
162 str += funcStrArray[i] + "\n";
163 }
164 return str+funcStrArray[i];
165 }else{
166 return str;
167 }
168
169 },
170
171
172 /**
173 * [給每行加上縮進和換行]
174 * @param {[Number]} indent [每行需要縮進的TAB數量]
175 * @param {[String]} data [屬性名]
176 * @param {[Boolean]} isPropertyContent [是否為屬性内容]
177 * @return {[String]} tabs+data [格式化後的行内容]
178 */
179 _getRow:function(indent, data, isPropertyContent){
180
181 var tabs = "";
182
183 // 計算屬性名稱前面的tab鍵數量
184 for(var i = 0; i < indent && !isPropertyContent; i++){
185 tabs += this.tabKey;
186 }
187
188 // 給屬性名加上換行(内容不為空且末尾不含換行符)
189 if(data != null && data.length > 0 && data.charAt(data.length-1) != "\n"){
190 data = data+"\n";
191 }
192
193 return tabs+data;
194
195 },
196 /**
197 *
198 * Public methods
199 *
200 */
201 dump:function(object){
202
203 try{
204 return this._printObject(object, 0, false, false, false) ;
205 }catch(e){
206 alert("object文法錯誤,不能格式化,錯誤資訊:\n"+e.message);
207 }
208
209 },
210
211 };
212
213 if (typeof exports !== 'undefined'){
214 exports.printTree = printTree;
215 }else{
216 window.printTree = printTree;
217 }
218
219 })(window); View Code
這個方法有個缺點是無法列印[HTML DOM Element]，
比如一個實際的DOM 元素為
<input type="email" name="email" id="email" placeholder="請輸入企業郵箱賬号"> 通過上述方式列印出來的效果為圖2所示。類似的工具還有vconsole
安裝方法
npm install vconsole 使用方法---在需要調試的頁面引入下面的js檔案
<script src="path/to/vconsole.min.js"></script> <script>
console.log('Hello world');
</script> 這個工具的實作原理，是很簡單的函數劫持。其大概原理是建立一個和現有函數同名的函數（當然首先要把原來的函數給儲存下來），以覆寫掉他原本的引用，然後在函數體内先針對參數做一些自己想要實作的功能，最後再調用之前儲存的原函數，實作原本的功能。
vconsole工具重寫了
window.XMLHttpRequest和window.console方法
使用專業的工具
使用 Weinre 調試
weinre全稱是web insperctor remote，是一種遠端調試工具，可以在PC上調試運作在移動裝置上的遠端頁面。
Weinre 是一個相當簡單好用的調試工具。它會在你本地建立一個監聽伺服器，并提供一個 JavaScript腳本，你隻需要在需要測試的頁面中加載這段 JS，就可以被 Weinre 監聽到，在 inspect 面闆中調試你這個頁面。
weinre工作原理
如上圖， Weinre由三部分組成，第一部分是運作在PC上的Debug Server， 它會與其他兩部分互動，在測試頁引入的那個target.js檔案就存在于這個Server裡
第二部分是Debug Client， 這個就是我們上面一直在使用的運作在chrome中的調試用戶端，它與Debug Server進行連接配接，并提供調試接口給使用者。
第三部分是Debug Target， 也就是運作在我們遠端裝置浏覽器中的target.js， 它通過XHR與Server連接配接互動，将我們的代碼暴露給Server， 來實作DOM Inspection與修改。
在指令行啟動weinre就開啟了Debug Server， 然後在浏覽器中輸入http://ip:weinre端口就打開了Debug Client， 在調試頁面中嵌入target.js代碼， 在手機中打開頁面， 就開啟Debug Target。
weinre 的具體使用方法如下：
首先全局安裝 weinre：
npm install -g weinre 安裝完成之後，在指令行下啟動weinre監聽伺服器，啟動監聽伺服器之前,需要擷取本機的區域網路位址：
- Mac 在終端執行
ipconfig getifaddr en0
- Win 在指令行執行
ipconfig
這時候拿到本機IP，比如我的機器IP 為 192.168.201.54，這時候執行：
weinre --boundHost 192.168.201.54 --httpPort 10000 weinre支援的參數有:
--help : 顯示Weinre的Help
--httpPort [portNumber] : 設定Weinre使用的端口号， 預設是8080
--boundHost [hostname | ip address | -all-] : 預設是'localhost'， 這個參數是為了限制可以通路Weinre Server的裝置， 設定為-all-或者指定ip， 那麼任何裝置都可以通路Weinre Server。
--verbose [true | false] : 如果想看到更多的關于Weinre運作情況的輸出， 那麼可以設定這個選項為true， 預設為false；
--debug [true | false] : 這個選項與--verbose類似， 會輸出更多的資訊。預設為false。
--readTimeout [seconds] : Server發送資訊到Target/Client的逾時時間， 預設為5s。
--deathTimeout [seconds] : 預設為3倍的readTimeout， 如果頁面超過這個時間都沒有任何響應， 那麼就會斷開連接配接。
開啟本地監聽伺服器
複制http://192.168.201.54:10000，粘貼到浏覽器位址欄，打開伺服器網址，
複制監聽腳本到需要被監聽頁面
當我們有真機通路被調試頁面的時候，被調試頁面就會出現在監聽清單中，如果有多個網頁，你可以從清單中選擇一個。然後就可以使用後面的 Elements、Console 等面闆來進行調試操作了：
首頁RemoteTab由三部分組成， Targets是注冊的遠端裝置清單， 目前我們還沒有通路測試頁面， 是以Targets清單為none， Clients是Weinre用戶端， 也即打開這個Weinre頁面的裝置清單。ServerProperties就是我們運作Weinre時的一些配置項。
weinre 非常靈活，跨平台（Android、iOS 、Window Phone 都支援)，跨浏覽器(chrome,safari，國内各種浏覽器都可以用), 可以讓我們在電腦上直接調試運作在手機上的遠端頁面。在調試移動裝置時需要在本地搭建一個區域網路 IP 的伺服器，将裝置與本機網絡連接配接成一個區域網路，用移動裝置通路這個網頁即可。當然 Weinre 也不是萬能的，相比 Chrome 的調試工具，它缺少 JavaScript 斷點以及 Profiles 等常用功能，但是它相容性強，可以實作基礎調試功能。
https頁面調試
weinre相容性挺強，而且能支援微信端頁面的調試，到此為止，如果頁面請求使用的是http，那weinre已經可以解決調試問題了。
但是如果要調試https請求的頁面，僅僅使用weinre無法解決，因為在頁面中需要引入調試的js檔案，weinre啟動的是http服務，于是使用反向代理軟體ngrok，它可以做位址映射，并支援http/https/tcp等，使用也比較簡單：
這是官網下載下傳位址：https://ngrok.com/download，或者可以直接使用npm下載下傳：
npm install -g ngrok 然後啟動
ngrok http 192.168.201.54：9999 啟動後可以打開 http://127.0.0.1:4040 檢視連接配接資訊：
在html中引入下面的js檔案
注意：
1.綁定端口一定不能與本地環境已監聽的端口沖突。本地我已監聽了8080端口，是以我綁定的是10000端口。
2.boundHost預設為localhost，隻能本地PC上用http://localhost:8080來通路，将localhost換做本地ip就無法打開Weinre調試工具，為了能在其他裝置以及本地裝置用ip打開Weinre調試工具，需要設定boundHost為"-all-"或者ip.
3.監聽https頁面時，要先啟動weinre，再啟動ngrok.
使用JSconsole
JSConsole相當于一個簡化版的weinre,專注于console功能，它相對于Weinre的優點就是提供了現成了線上Debug Server與Debug Client， 無需使用者在PC本地運作Debug服務， 隻要在需要調試的頁面像Weinre一樣加入一個target庫， 就可以在JSConsole官網上調試這個頁面了。JSConsole的網址為https://jsconsole.com/。
接着在打開的網頁輸入
:listen
，将會得到一串 GUID 以及一對帶有 src 屬性的 Javascript 标簽，如下圖：
将這個 Javascript 腳本插入到需要調試的 html 頁面中，比如這樣：
複制代碼 <script src="http://jsconsole.com/remote.js?BDA15940-A201-4EAB-9482-941CD41742EC"></script>
<script>
var a = 1
, b = 2;
console.log(a + b);
</script> 然後重新整理你本地需要調試的頁面（PC端或者移動端），如果是第一次打開的話，會彈出下圖内容，大概意思就是告訴你現在引入了 JSConsole 的一段 js 進行調試，記得在上線時将它移除。
在打開 JSConsole 的頁面便會輸出 console 的内容；如果頁面 JS 報錯，一般情況下也能在 JSConsole 中進行定位。
需要注意的是，重新整理的是本地頁面，而并不是 JSConsole 的頁面，一旦重新整理 JSConsole 的頁面，便會生成一個新的 GUID，這樣之前生成的就沒用了，調試也就失效了
使用spy-debugger調試
1、一站式頁面調試工具，遠端調試任何手機浏覽器頁面，任何手機移動端webview（如：微信，HybirdApp，手機浏覽器等）。 2、spy-debugger内部內建了weinre。 3、同時支援HTTP/HTTPS頁面的調試。
安裝
Windows 下
npm install spy-debugger -g Mac 下
sudo npm install spy-debugger -g 安裝後在指令行下輸入 spy-debugger,啟動代理伺服器
設定手機代理
https頁面調試
如果要監聽https頁面，你還需要做如下操作:
第一步：生成證書
spy-debugger initCA // 證書生成在使用者根目錄的node-mitmproxy檔案夾下的
// 如： /Users/wuchangming/node-mitmproxy 第二步：安裝證書
把node-mitmproxy檔案夾下的 node-mitmproxy.ca.crt 傳到手機上，點選安裝即可。
使用fiddler調試
Fiddler是最強大最好用的Web調試工具之一，它能記錄所有用戶端和伺服器的http和https請求，分析請求資料、設定斷點、調試web應用、修改請求的資料，甚至可以修改伺服器傳回的資料. 使用Fiddler無論對開發還是測試來說，都有很大的幫助。
Fiddler的工作原理
Fiddler 是以代理web伺服器的形式工作的,它是在web server 和 client 之間搭了一層 proxy，所有的請求都會經過它。在打開它的那一瞬間，它就已經設定好了浏覽器的代理了。它使用代理位址:127.0.0.1, 端口:8888.當你關閉的時候，它會自動登出代理服務，不過如果Fiddler非正常退出，會造成網頁無法通路。 這是因為Fiddler沒有自動登出，解決的辦法是重新啟動下Fiddler..
下載下傳fiddler
Fiddler的基本界面
fiddler圖示介紹
每種圖示代表不同的相應類型，具體的類型包括：
Inspectors面闆
Inspectors tab下有很多檢視Request或者Response的消息。分為上下兩個部分，上半部分是請求頭部分，下半部分是響應頭部分。對于每一部分，提供了多種不同格式檢視每個請求和響應的内容。
JPG 格式使用 ImageView 就可以看到圖檔，
HTML/JS/CSS 使用 TextView 可以看到響應的内容。
其中Raw Tab可以檢視完整的消息，
Headers tab 隻檢視消息中的header.
Auth則可以檢視授權Proxy-Authorization 和 Authorization的相關資訊。
Cookies标簽可以看到請求的cookie和響應的set-cookie頭資訊。
2.配置fiddler，讓fiddler可以抓取https協定
預設情況下，fiddler是不會捕獲https會話的，是以需要自行設定下。啟動軟體，點選tools->Fiddler Options，在彈出框選擇“HTTPS”，如下頁面，将捕獲HTTPS連接配接這一項前面全打鈎，點選ok即可操作成功。
Tools --> Telerik Fiddler Options --> 選擇https,這個面闆的配置項有:
Capture HTTPS CONNECTs：捕獲https連接配接
Decrypt HTTPS traffic：解密HTTPS通信
Ignore servercertificate errors：忽略伺服器證書錯誤
Fiddler中設定斷點修改Request
Fiddler最強大的功能莫過于設定斷點了，設定好斷點後，你可以修改httpRequest 的任何資訊包括host, cookie或者表單中的資料。設定斷點有兩種方法
第一種：打開Fiddler 點選Rules-> Automatic Breakpoint ->Before Requests(這種方法會中斷所有的會話)
如何消除指令呢？ 點選Rules-> Automatic Breakpoint ->Disabled
第二種: 在指令行中輸入指令: bpu www.baidu.com (這種方法隻會中斷www.baidu.com)
如何消除指令呢？ 在指令行中輸入指令 bpu
Fiddler中設定斷點修改Response
當然Fiddler中也能修改Response
第一種：打開Fiddler 點選Rules-> Automatic Breakpoint ->After Response (這種方法會中斷所有的會話)
第二種: 在指令行中輸入指令: bpafter www.baidu.com (這種方法隻會中斷www.baidu.com)
如何消除指令呢？ 在指令行中輸入指令 bpafter,
AutoResponder面闆
Fiddler比較重要且比較強大的功能之一。可用于攔截某一請求，并重定向到本地的資源，或者使用Fiddler的内置響應。可用于調試伺服器端代碼而無需修改伺服器端的代碼和配置，因為攔截和重定向後，實際上通路的是本地的檔案或者得到的是Fiddler的内置響應。當勾選allow autoresponser 并設定相應的規則後（本例中的規則是将http://blog.csdn.net/ohmygirl的請求攔截到本地的檔案layout.html）,如下圖所示
是以，如果要調試伺服器的某個腳本檔案，可以将該腳本攔截到本地，在本地修改完腳本之後，再修改伺服器端的内容，這可以保證，盡量在真實的環境下去調試，進而最大限度的減少bug發生的可能性。
不僅是單個url，Fiddler支援多種url比對的方式：
I. 字元比對
如 example可以比對 http://www.example.com和http://example.com.cn
II. 完全比對
以EXACT開頭表示完全比對，如上邊的例子
EXACT:http://blog.csdn.net/ohmygirl
III. 正規表達式比對
以regex: 開頭，使用正規表達式來比對URL
如：regex:(?insx).*\.(css|js|php)$ 表示比對所有以css,js,php結尾的請求url
Composer（建構請求）
老版本的fiddler中叫request-builder.顧名思義，可以建構相應的請求，有兩種常用的方式建構請求:
(1)Parsed 輸入請求的url之後executed即可，也可以修改相應的頭資訊（如添加常用的accept, host, referrer, cookie，cache-control等頭部）後execute.
這個功能的常見應用是重新整理頁面的通路量
(2)Raw。使用HTTP頭部資訊建構http請求。與上類似。不多叙述
QuickExec指令行的使用
Fiddler的左下角有一個指令行工具叫做QuickExec,允許你直接輸入指令。
常見得指令有
help 打開官方的使用頁面介紹，所有的指令都會列出來 http://docs.telerik.com/fiddler/knowledgebase/quickexec
cls 清屏 (Ctrl+x 也可以清屏)
select 選擇會話的指令
?.png 用來選擇png字尾的圖檔
bpu 截獲request Fiddler的HTTP統計視圖
通過陳列出所有的HTTP通信量，Fiddler可以很容易的向您展示哪些檔案生成了您目前請求的頁面。使用Statistics頁簽，使用者可以通過選擇多個會話來得來這幾個會話的總的資訊統計，比如多個請求和傳輸的位元組數。
選擇第一個請求和最後一個請求，可獲得整個頁面加載所消耗的總體時間。從條形圖表中還可以分别出哪些請求耗時最多，進而對頁面的通路進行通路速度優化
Filter面闆
主機過濾規則；
第一個選項zone有三種選擇：no zone；僅顯示區域網路主機；僅顯示網際網路主機；
第二個選項Host有四種選擇，可以在下面文本框輸入内容，根據輸入内容顯示或不顯示相應的主機；
“No Host Filter”不設定hosts過濾
“Hide The Following Hosts”隐藏過濾到的域名
“Show Only The Following Hosts”隻顯示過濾到的域名
“Flag The Following Hosts”标記過濾到的域名
Action按鈕可以儲存過濾規則集，載入過濾規則集等；
用戶端處理過濾規則；
可以選擇僅顯示來自某些程序的流量；僅顯示chrome流量；
請求頭過濾；可以選擇
僅顯示包含某些字元的URL；隐藏包含某些字元的URL；顯示頭部包含某些标志的包；
還可以删除和設定請求頭；此功能尚未用過；待用過之後再發文詳述；
斷點設定；
在post時中斷請求；
在帶查詢參數的GET請求時中斷；
在異步請求時中斷；
擷取到某種類型的響應時中斷；
根據響應碼過濾；
隐藏成功的包；
隐藏不成功的包；
2字頭的狀态碼，代表請求已成功被伺服器接收、了解、并接受；
隐藏需要使用者驗證的請求；
隐藏重定向請求；
響應類型和尺寸過濾；
預設顯示全部類型；其他還有image,html,texe/css,scripts等類型；
響應頭過濾；
捕獲設定了cookie的響應頭；
捕獲響應頭帶某些字元串的包等；
HTTP抓包分析工具有比較多，如wireshark, FireBug，HttpWatch，Tcpdump，PAW（mac）等。在做移動端開發時，找到一款合适自己的能進行移動裝置HTTP抓包的工具也是非常重要的。正所謂，工欲善其事必先利其器。
個人非常喜歡Fiddler和spy-debugger，功能強大，簡單易用。
ADB 全稱 Android Debug Bridge，譯作Android 調試橋。 ADB是一種功能多樣的指令行工具，可讓您與裝置進行通信。ADB 指令可用于執行各種裝置操作（例如安裝和調試應用），并提供對 Unix shell（可用來在裝置上運作各種指令）的通路權限。它是一種用戶端-伺服器程式，對我們以後進行安卓開發與裝置系統安裝方面有極大的用處。
Windows版本：https://dl.google.com/android/repository/platform-tools-latest-windows.zip
ADB devices debugx5.qq.com/
http://debugtbs.qq.com
debugmm.qq.com/?forcex5=true
參考文章
[1] 微信下調試H5頁面
[2] Android通過Chrome Inspect調試WebView出現404頁面的解決方法
https://www.cnblogs.com/hjblog/p/9078147.html