前言
PC端web頁面調試比較容易，這里主要說幾種移動端調試的方法，從簡單到復雜、從模擬調試到遠程調試，大概分為幾部分：
1、Chrome DevTools（谷歌瀏覽器）的模擬手機調試
2、weinre(web inspector remote)遠程調試工具
3、微信的“web開發者工具”，集成了Chrome DevTools和weinre，做的比較好
4、Chrome DevTools遠程調試Android和iOS頁面
5、Eruda——手機網頁前端調試面板
閱讀說明
本文不是小白文，需要一定前端基礎才能看懂；此外，本文並不是調試教程，很多細節並沒有截圖或者描述的很清楚，就如我說的已經默認閱讀者懂得一些基本的調試方法；
我這里主要是對幾種調試方式進行匯總，方便自己也方便他人看完文章之后知道更多的調試方式；如果遇到哪一步自己看不懂可以百度或者評論區留言，謝謝！
1、Chrome DevTools模擬手機調試
直接使用谷歌瀏覽器的開發者工具，可以參照下圖，也可以使用快捷鍵F12或者ctrl+shift+I；個人覺得不管是哪個瀏覽器，直接先按下F12，一般都可以打開開發者工具，打不開再說嘛。
這種調試方式不僅能用於模擬手機調試還是主要的PC端頁面調試的方式，這里主要說用於手機調試。
打開后看到類似如下界面的開發者調試界面，Elements可以查看文檔元素，Console可以在線調試js和查看輸出結果，Sources可以調試JS和查看依賴資源，Network查看所有的網絡請求
在瀏覽器地址欄輸入要調試的頁面地址，選擇模擬設備，然后就可以選擇要調試的js調試了，右側面板中有調試操作按鈕；在Application面板中可以看到應用存儲的數據Cookies什么的
如果沒有需要模擬的機型怎么辦？當然是增加了，打開DevTools的設置面板，左圖中的Setting點開會出現右圖，如下：
2、weinre(web inspector remote)遠程調試工具
weinre其實是在待調試的頁面中嵌入了一個特定的js，這樣頁面才能被weinre監測到並能打開調試面板；要注意weinre的調試面板不能調試JS,也不支持打斷點調試，僅能用於調試頁面樣式，使用場景有限；
根據自己需要來選擇吧，具體的使用安裝過程參考：http://blog.csdn.net/freshlover/article/details/42640253；由於我使用的較少，也並不推薦這款工具，所以只是作為介紹和了解放在這里；如果想
對weinre深入了解的自己參考鏈接中的內容琢磨吧。
3、微信的“web開發者工具”
微信的web開發者工具，集成了谷歌的DevTools和weinre，可以說是上面兩點的集合，對於那些微信公眾號里面使用的H5網頁，這個是最好的選擇；
這個工具調試一般性的網頁就和谷歌瀏覽器調試一樣，看到的調試面板也差不多；但是如果要調試微信相關的功能比如：JS-SDK，權限列表等就必須使用這個工具了
工具下載地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN
除了使用url模擬調試外,微信的web工具也能對安卓手機進行遠程調試，目前最新版還不支持iOS遠程調試，打開設備監視面板：
打開后看到如下界面，可以看到有一台華為設備已經連接，遠程調試要注意兩點：
1、手機和電腦使用usb連接，手機要開啟usb調試模式(不同手機不一樣)
2、手機上安裝最新版谷歌瀏覽器並打開
然后點擊inspect即可開始調試當前手機谷歌瀏覽器打開的頁面，這里不細說這個了，也沒必要細看，下面會詳細說明
再看看微信的移動調試，iOS提供的只有普通代理測試，Android除了代理測試，還有X5 Blink內核調試；但是並不是所有手機都支持X5 Blink；所以普遍還是使用代理調試
手機的wifi網絡配置好代理后，點擊開始調試，出現監控界面，發現其實就是使用的weinre來實現的，不過微信對其做了改進，相比直接使用 weinre 有以下優點：
1、無須手工在頁面中加入 weinre 調試腳本，這點很方便
2、可以在 weinre 的網絡請求頁卡Network中，看到完整的http請求log，並且沒有只能看到ajax的局限
但是也有弊端，由於是微信開發的工具，移動調試只能調試微信App中打開的頁面而且並不是所有能在微信中打開的網頁都能調試，懷疑是工具內部做了過濾
重啟微信后，在微信中訪問頁面，可以被監測到，然后可以調試網頁樣式了，在Network頁卡中能看到每個請求的參數與響應結果
總之，如果調試頁面是微信中的頁面(一般就是公眾號)使用微信提供的工具效率很高；如果是一般瀏覽器中的頁面也可以使用微信的Chrome DevTools但最好不用weinre
4、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瀏覽器，受到具體軟件的限制；不過可以理解，畢竟遠程調試不如模擬調試簡單
5、Eruda——手機網頁前端調試面板
eruda是什么？正如標題所言，是用來在手機上調試頁面的，注意是在手機上不是在電腦上；前面說的幾種調試方式都是在電腦上模擬調試或者遠程調試手機頁面，但eruda是直接在手機上調試頁面。
有什么好處？如果非要說好處就是能夠直接在手機上打開類似PC端開發者面板一樣的調試面板，主要用途是當PC端調試手機頁面和手機上運行時效果不一致時可以直接在手機上調試。
示意圖(手機上調試效果圖)：
具體資料：https://www.oschina.net/p/eruda
目前我用的比較少，但是不失為一種值得推薦的調試工具。總的來說，一般開發者都是直接在PC上調試頁面（不管是PC端頁面還是手機端頁面），因此在開發過程中推薦使用Chrome DevTools或者微信web開發者工具來調試，
當然有同學說我用的是360瀏覽器，其實不管你用什么瀏覽器除了內核差異，調試模式基本都和Chrome DevTools差不多；這里我要說的是一般調試頁面時直接使用PC端來調試就可以了，但是發現在真機上運行效果和預期不一致
則可以采用Eruda來實現真機調試進而定位並解決問題。
以上工具並不是互相獨立存在的，很有可能需要多種方式聯合調試來解決一個問題，畢竟我們不能把自己框死在一個工具里，應該揚長避短；
最后，由於本人是后台工程師，對前端是處於業余愛好，經驗有限，肯定還有很多我不知道的優秀調試工具或者調試方式，知道的還請聯系我，大家互相促進提升。