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

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

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

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

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

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

本機瀏覽器模擬控制臺調(diào)試

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

基于B/S的遠(yuǎn)程調(diào)試

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

基于webview的調(diào)試

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