1、Chrome DevTools遠程調試Android和iOS頁面
電腦上安裝新版谷歌瀏覽器，然後地址欄輸入chrome://inspect會打開設備監視頁面，這裏可以監視到iOS和Android設備，如果界面和圖中不一致請安裝最新版瀏覽器
Android:
前提：
1、手機和電腦使用usb連接，手機要開啓usb調試模式(不同手機不一樣)
2、手機上安裝最新版谷歌瀏覽器並打開
會發現設備監視頁面多出了一個華爲設備，並且能看到當前手機上谷歌瀏覽器打開的網頁的連接
a):可以在這裏輸入手機要打開的url然後open，手機上顯示的當前頁面就會改變
b):inspect表示開始調試當前頁面，會打開調試面板(重要)
c):focus tab，表示讓手機顯示當前這個連接
d):reload表示重新加載頁面，也就是刷新
e):close表示關閉當前手機顯示的頁面
接下來，點擊inspect開始調試頁面，注意如果google瀏覽器不能翻|牆的話，這個調試頁面是打不開的，可以百度修改hosts文件翻|牆
然後就可以像調試PC端網頁一樣遠程調試手機網頁了
iOS(window系統上，如果是macbook系統忽略此部分):
可以參考：http://www.cnblogs.com/kelsen/p/6402477.html
前提：
1、電腦安裝iTunes軟件，不然蘋果手機不能正常被識別，安裝好後數據線連接手機和電腦
2、打開手機的設置——>Sarafi——>高級——>Web檢查器——>啓用(默認是關閉的，將其打開)
3、下載ios-webkit-debug-prox代理(32位或者64位)，其作用就是在Chrome和Sarafi之間建立了一個代理，便於電腦的Chrome檢測手機Sarafi打開的頁面
4、在cmd中執行ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html，命令中-f是以谷歌內置的監視器來調試(默認使用遠程的)
啓動後會監聽9222端口，然後看到連接上了一臺名爲jiba的iOS設備，括號中爲設備的UDID；然後看谷歌瀏覽器是否檢查了這個端口，右圖中有9222端口即可，沒有就手動添加
此時打開手機Sarafi瀏覽器，打開百度首頁，發現瀏覽器能檢測到，沒看到就刷新這個監視界面，一般來說會在3秒內自動出現
點擊inspect同樣出現了調試面板，如下，發現iOS調試的面板不能看到手機屏幕在電腦上的投影，不過這並不影響調試；但是可能會遇到在調試js時斷點不生效的問題，
如果很不幸遇到這個問題的話，將圖中紅框中的按鈕連續點擊兩次——先禁用斷點再啓動即可恢復端點調試功能，不知道爲什麼，猜測是這個過程中恢復了斷點的狀態；這個問題很奇葩。
到這裏使用Chrome調試iOS和Android就都完了，這種使用谷歌瀏覽器的方式，在Android上依賴於手機谷歌瀏覽器，在iOS上依賴Sarafi瀏覽器，受到具體軟件的限制；不過可以理解，畢竟遠程調試不如模擬調試簡單
2、javascript的debugger語句
需要調試js的時候，可以給需要調試的地方通過debugger打斷點，代碼執行到斷點就會暫停，這時候通過單步調試等方式就可以調試js代碼
在需要打斷點的地方添加debugger：
if (waldo) {
debugger;
}
這時候打開console面板，就可以調試了
Tips：如果你不知道怎麼調試，那麼儘快看下：Chrome DevTools中斷點部分的教程
3、Weinre
在移動上面開發調試是很複雜的，所以就有了weinre。安裝weinre可以實現pc來調試手機頁面，所以對於移動開發調試是很重要的哦~
安裝weinre
weinre可以通過npm來安裝：
npm install -g weinre
安裝完之後，可執行下面的命令來啓動：
weinre --httpPort 8080 --boundHost -all-
這樣訪問自己的127.0.0.1:8080按照提示在需要調試頁面中插入一段js，然後就可以調試了。操作界面類似Chrome的DevTools，具體操作可以看下[教程](<http<a rel="nofollow" href=""></a>>
原理
通過在需要調試的頁面中引入一段weinre的js，實現pc和手機的socket通信，從而實現實時調試。
Tips
- 如果你嫌每次都要在調試的頁面引入js麻煩，可以做個書籤或者chrome插件
- 如果嫌安裝麻煩，可以使用phonegap的weinre：http://debug.phonegap.com/
4、Eruda——手機網頁前端調試面板
eruda是什麼？正如標題所言，是用來在手機上調試頁面的，注意是在手機上不是在電腦上；前面說的調試方式都是在電腦上模擬調試或者遠程調試手機頁面，但eruda是直接在手機上調試頁面。
有什麼好處？如果非要說好處就是能夠直接在手機上打開類似PC端開發者面板一樣的調試面板，主要用途是當PC端調試手機頁面和手機上運行時效果不一致時可以直接在手機上調試。
示意圖(手機上調試效果圖)：
使用Chrome，Firefox連接手機調試啊！但那樣限定於使用相應的手機版瀏覽器，意義並不大。Weinre，Vorlonjs跟debugGap等工具實際上也並不好用，初始化過於繁瑣，而且僅能調調樣式，打打log，斷點調試什麼的也沒有辦法支持。每次測試出現問題，基本上只能屁顛屁顛地跑過去拿手機過來連接自己的本地環境改代碼查bug。
https://github.com/liriliri/eruda
示例
請在手機上打開鏈接：http://liriliri.github.io/eruda/index.html?eruda=true
安裝
你可以通過npm來下載使用該工具：
npm install eruda --save
然後在頁面中引入以下腳本：
(function () {
var src = 'node_modules/eruda/dist/eruda.min.js';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
可以看到只有當url上帶有eruda=true或本地存儲active-eruda爲true的時候，工具纔會被加載並執行。其中設置面板有選項可以設置active-eruda使工具常駐，不用每次都在url上添加eruda=true。
注：該插件的文件gzip後大小約有50+kb，相比於項目頁均js腳本量幾kb來說還是太大，並不適合在現網環境加載影響頁面載入速度。
功能面板介紹
Console面板
該面板會替換console對象中的log，error，info，warn，dir，time，timeEnd方法以不同的樣式顯示出來，同時默認會通過onerror捕獲全局錯誤（可以在設置面板關閉），打出錯誤信息及其堆棧。當然，日誌的清除與過濾也是支持的，還可以直接在該面板輸入js腳本並在全局作用域下執行。該面板還內置了一些快捷指令來快速執行一些有用的功能，比如在頁面載入jQuery或underscore，使用正則表達式過濾log等。
Elements面板
查看Dom狀態對於調試工具自然是一個必不可少的功能。通過該工具，你無需連接PC端調試工具就能輕鬆查看DOM節點上的各個屬性值，內容，應用的CSS樣式。被查看的元素也會在頁面上高亮，能夠使你快速知曉DOM元素的margin，padding。
注：感謝weinre項目，扒了一點代碼:)
Network面板
Network面板通過performance接口以圖表的形式展示頁面的加載速度。計劃在resource timing api得到廣泛應用時再加入各個資源的加載情況，不過目前它僅僅只能得到頁面的加載速度。
Resources面板
該面板主要用來展示localStorage，cookie，頁面腳本，樣式，圖片等資源，同時能夠對其執行一些簡單的操作，如清除指定的localStorage條目。
Info面板
很多時候會需要查看複製瀏覽器上的指定信息，比如通過JsBridge獲取到的用戶Id，用於後臺數據查錯。又比如，測試碰到某些頁面錯誤時，我們首先做的一件事經常是：把鏈接發給我看看，然而APP裏並沒有複製鏈接的選項:( 還有，一個頁面在不同環境下需要有不同的表現，項目H5頁面經常需要在不同APP裏有不同表現以及調用不同jsApi。靠什麼來區分？UA。然而有時候對某個版本UA檢測不準確就會造成頁面出BUG，這時候如果有個方便的方法能夠快速查看到出錯者的瀏覽器UA就太好了。
綜上，Info面板默認會展示出url和user-agent兩條信息，你也可以通過調用它的接口輸出其它指定信息。
Snippets面板
Console面板可以執行js腳本，但在手機上輸入代碼體驗實在不怎麼樣。利用該面板你可以添加一些方法以便於快速和多次觸發它。Sinppets默認加入了兩個腳本，爲頁面所有元素加border查看排版結構以及重刷頁面。
Features面板
嗯，之前碰到過BUG，結果發現是APP的WebView沒開啓對localStorage的支持，所以有了該面板。它會檢測一些常用的功能是否被瀏覽器所支持，不支持的話將以紅色高亮進行顯示。
自定義插件
Eruda本質上只是一個可拖拽的入口按鈕加一個Tab組件，其中的每個面板都是一個獨立的插件。所以，事實上你可以自行添加各種自定義的信息展示面板，具體可參考這個頁面FPS展示插件。這是一個很有用的特性，因爲通用組件很難做到適應於各類需求，有很多時候你會想要去擴展它。比如，項目用於移動端測試環境切換的工具會在每個頁面嵌入該插件用於不同環境的切換，同時顯示ID便於查找單次請求所對應的完整HTTP記錄，它長下面這個樣子：
結語：Eruda調試面板的基礎工具庫：http://liriliri.github.io/eustia/
