在開發(fā)前端Web頁(yè)面時(shí)，我們需要用調(diào)試工具來調(diào)試HTML、CSS和JS代碼。微信公眾號(hào)的開發(fā)，根據(jù)業(yè)務(wù)需求，可能有一大部分工作都會(huì)涉及前端頁(yè)面的開發(fā)。因此，常用的前端調(diào)試工具，都適用在微信公眾號(hào)的網(wǎng)頁(yè)開發(fā)中。俗話說得好：“工欲善其事，必先利其器”，善于利用調(diào)試工具來解決問題，也是專業(yè)技能的一個(gè)體現(xiàn)。
  主流的瀏覽器，都有對(duì)應(yīng)的調(diào)試工具。例如，F(xiàn)irefox瀏覽器開發(fā)者工具和Firebug插件，Chrome和IE（Internet Explorer）也有自己的開發(fā)者工具。這類前端開發(fā)調(diào)試工具，通常都具有以下幾個(gè)主要功能。[插圖]移動(dòng)端模擬器、網(wǎng)絡(luò)環(huán)境模擬器，可以方便地模擬出網(wǎng)頁(yè)在不同移動(dòng)端設(shè)備（Android和iOS設(shè)備，可以具體到型號(hào)）的顯示效果，另外，還可以模擬出不同網(wǎng)絡(luò)環(huán)境（Wifi/4G/2G等，或自定義網(wǎng)絡(luò)上傳下載速度）下網(wǎng)站的響應(yīng)速度。
1.強(qiáng)大的控制臺(tái)，可以執(zhí)行腳本，斷點(diǎn)調(diào)試時(shí)可以實(shí)時(shí)查看變量值。
2.可視化修改HTML代碼、CSS樣式，并實(shí)時(shí)渲染頁(yè)面。
3.腳本斷點(diǎn)調(diào)試，可以方便地跟蹤腳本執(zhí)行路徑。
4.按類型查看請(qǐng)求，并對(duì)請(qǐng)求進(jìn)行時(shí)間分析。
5.資源查看：Local Storage, Session Storage以及Cookies資源的管理。
6.代碼分析：可以分析沒有被使用的CSS樣式占比，并給出一些前端優(yōu)化建議。
7.其他功能：更高級(jí)的開發(fā)者工具，可以分析內(nèi)存泄露等問題。
  不同的瀏覽器，由于使用的內(nèi)核不同，顯示效果可能會(huì)有略微差異。不過，移動(dòng)端的瀏覽器內(nèi)核大部分都是基于WebKit的，因此，調(diào)試移動(dòng)端網(wǎng)頁(yè)，兼容性問題會(huì)比IE時(shí)代好很多。
注意
  瀏覽器內(nèi)核是瀏覽器最為重要的部分，核心部分成為渲染引擎（Rendering Engine）。不同的瀏覽器內(nèi)核對(duì)HTML語(yǔ)法的解釋也會(huì)有所不同，因此開發(fā)者需要在不同內(nèi)核的瀏覽器中測(cè)試網(wǎng)頁(yè)顯示效果。對(duì)于開發(fā)者來說，最為痛苦的時(shí)代莫過于IE6時(shí)代。
  常見的瀏覽器內(nèi)核有以下幾種。
1.Trident: Windows平臺(tái)內(nèi)核，1997年在IE4中首次被采用，并沿用至IE11，被稱為“IE內(nèi)核”。
2.Gecko：開源跨平臺(tái)內(nèi)核，F(xiàn)irefox采用的內(nèi)核。
3.Webkit：開源跨平臺(tái)內(nèi)核，蘋果公司開發(fā)的內(nèi)核，Safari和Chrome采用了該內(nèi)核，Webkit在移動(dòng)設(shè)備上的應(yīng)用最為廣泛。
  由于歷史原因，國(guó)內(nèi)瀏覽器廠商開發(fā)了“雙核瀏覽器”，它通常是Trident搭載另外一個(gè)內(nèi)核，Trident是兼容瀏覽模式，另外一個(gè)內(nèi)核是高速瀏覽模式，用戶可以來回切換。由于IE內(nèi)核的瀏覽器進(jìn)入國(guó)內(nèi)的時(shí)間比較早，銀行類和政府類的站點(diǎn)都只兼容IE內(nèi)核，因此，雙核瀏覽器有其存在的必要和價(jià)值。