按平臺不同，web調試可以分為桌面web調試和移動端web調試兩種，其中用到的調試方法也有所不同。

桌面web調試有比較成熟的方法和工具可供使用，例如利用chrome自帶的調試工具或者firebug插件可以比較方便的調試樣式類問題，js執(zhí)行流程問題以及網絡相關問題等。

移動端方面由于設備以及瀏覽器自身限制，無法提供類似桌面瀏覽器中功能強大的控制臺，使得移動端頁面調試沒有桌面web調試那么便捷。針對不同的調試內容，目前也有較多的方法和工具可以使用。

移動端web調試可以分為兩種場景，模擬調試和真機調試。這兩種調試場景用到的工具和方法是不同的，一般來說移動端web頁面開發(fā)過程中會使用模擬調試來保證頁面展示，頁面業(yè)務流程的正確性，由于模擬調試不能代表頁面真實的運行環(huán)境，待集成測試階段會選擇真機調試來保真版本穩(wěn)定性。

移動端web模擬調試比較簡單，利用桌面瀏覽器就可以很好的進行。例如chrome的device toolbar模式，firefox的響應設計模式，都支持自定義屏幕尺寸，自定義userAgent。也可以使用微軟的Vorlon.JS工具。桌面web調試用的一些方法技巧都可以用在移動端web的模擬調試過程。

移動端web真機調試的工具和方法主要分為三類：1.本機瀏覽器模擬控制臺調試；2.基于B/S的遠程調試；3.基于webview的調試。

本機瀏覽器模擬控制臺調試

這種方法的原理是在移動端瀏覽器上模擬出控制臺效果，但是和桌面瀏覽器的控制臺相比，功能比較弱。例如騰訊的日志調試工具MLogger；功能稍復雜支持dom/css查看修改，支持查看網絡請求，支持源碼查看，支持日志輸出的Eruda。由于移動端屏幕較小，使用這種方式調試web頁面，不是很方便。

基于B/S的遠程調試

這種方法的原理是需要起一個服務器來連接調試目標，然后服務器提供一個頁面，在該頁面上可以查看在調試目標上的一些操作結果。例如支持dom/css查看修改，支持查看網絡請求的weinre；支持控制臺輸出，支持js求值的jsconsole。

基于webview的調試

這種方法的原理是桌面瀏覽器通過usb數(shù)據線連接到手機上的webview,然后把webview中的頁面資源同步加載到桌面瀏覽器中，在webview中的操作結果和桌面瀏覽器中的操作結果可以互相影響。這種方法還支持斷點調試，功能相較上面兩種要強大一點。例如google的chrome://inspect方法，不過也有限制條件，只支持andriod,需要翻墻,系統(tǒng)版本需要4.3以上；firefox的WebIDE，需要安裝firefox的app版本瀏覽器，不適合調試其他app的內嵌頁面；以及safari原生支持的調試工具，不支持android,不過調試ios比較方便。