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

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

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

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

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

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

本機(jī)瀏覽器模擬控制臺(tái)調(diào)試

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

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

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

基于webview的調(diào)試

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