Chrome開發(fā)工具中最有用的面板Sources。Sources面板幾乎是最常用到的Chrome功能面板,也是解決一般問(wèn)題的主要功能面板。通常只要是開發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問(wèn)題,在審視一遍代碼而一無(wú)所獲之后打開Sources進(jìn)行js斷點(diǎn)調(diào)試,幾乎能解決8成的代碼問(wèn)題。

js斷點(diǎn)功能讓人興奮不已,以前只能在IE中靠alert彈出窗口調(diào)試js代碼,那樣的開發(fā)環(huán)境對(duì)于前端程序員來(lái)說(shuō)簡(jiǎn)直是一場(chǎng)噩夢(mèng)。本篇介紹Sources的具體用法,幫助各位在開發(fā)過(guò)程中夠愉快地調(diào)試js代碼,而不是因它而發(fā)瘋。

首先打開F12開發(fā)工具切換到Sources面板中

Sources功能面板是資源面板,他主要分為四個(gè)部分,四個(gè)部分并不是獨(dú)立的,他們互相關(guān)聯(lián),互動(dòng)共同實(shí)現(xiàn)一個(gè)重要的功能:監(jiān)控js在執(zhí)行期的活動(dòng)。簡(jiǎn)單來(lái)說(shuō)就是斷點(diǎn)啦。

首先我們來(lái)看區(qū)域1,它的功能有些類似于Resources面板,主要是顯示網(wǎng)頁(yè)加載的腳本文件:例如css, js等資源文件(它不包含cookie,img等靜態(tài)資源文件)。

區(qū)域1的導(dǎo)航條上有三個(gè)tab切換選項(xiàng),他們都存有不同域名和環(huán)境下的js和css文件,我們首先來(lái)說(shuō)明Sources(資源)選項(xiàng)的作用:

Sources: 包含該項(xiàng)目的靜態(tài)資源文件。雙擊選中文件,該文件內(nèi)容會(huì)在區(qū)域2中顯示,如果你選中的是js文件,那么你可以在區(qū)域2種單擊行號(hào)進(jìn)行斷點(diǎn)調(diào)試,只要js執(zhí)行到了你所標(biāo)記的這一行,它會(huì)停止向下執(zhí)行并且等待你的命令:

從上圖可以看到j(luò)s執(zhí)行到斷點(diǎn)處時(shí)各個(gè)區(qū)域的變化,首先是區(qū)域3中的Breakpoints記錄信息會(huì)變高亮,然后是區(qū)域4中Scope選項(xiàng)中列出了斷點(diǎn)處私有和公有的變量信息,這樣,我可以很直觀地知道,此時(shí)此刻js的執(zhí)行狀態(tài)。同樣的,你可以把鼠標(biāo)放到區(qū)域2種的某個(gè)變量上,瀏覽器會(huì)彈出一個(gè)小框框,框框里面則是你懸浮其上的變量所有信息:

然后,你可以按F10跟著js執(zhí)行的路徑一步一步地走下去,如果你遇到了一個(gè)函數(shù)包含著另外一個(gè)函數(shù),那么你可以按F11進(jìn)入到個(gè)函數(shù)中去觀察它的代碼執(zhí)行活動(dòng)。你也可以通過(guò)點(diǎn)擊區(qū)域1底部的各個(gè)圖標(biāo)對(duì)js代碼進(jìn)行跟蹤。不過(guò)我建議你使用快捷鍵,故名思義,因?yàn)樗�比較快捷方便。不過(guò)怎么用完全按照個(gè)人習(xí)慣來(lái)吧。下圖是各個(gè)按鈕的作用功能。

在上圖藍(lán)色圓圈中數(shù)字,它們分別代表:

1、停止斷點(diǎn)調(diào)試

2、不跳入函數(shù)中去,繼續(xù)執(zhí)行下一行代碼(F10)

3、跳入函數(shù)中去(F11)

4、從執(zhí)行的函數(shù)中跳出

5、禁用所有的斷點(diǎn),不做任何調(diào)試

6、程序運(yùn)行時(shí)遇到異常時(shí)是否中斷的開關(guān)

接下來(lái)在區(qū)域4種切換到Watch Expressions選項(xiàng),它的作用是為目前斷點(diǎn)添加表達(dá)式,使得每次斷點(diǎn)往下走一步都會(huì)執(zhí)行你寫下的js代碼。需要注意的是這個(gè)功能必須謹(jǐn)慎使用,因?yàn)檫@可能會(huì)導(dǎo)致你寫下的監(jiān)控代碼段會(huì)不斷地被執(zhí)行。

為了避免你的調(diào)試代碼重復(fù)執(zhí)行,我們可以在調(diào)試時(shí)直接在console控制臺(tái)上一次性地輸出當(dāng)前斷點(diǎn)處的信息(推薦這樣做)。為了驗(yàn)證我們?cè)赾onsole面板中擁有的是當(dāng)前斷點(diǎn)環(huán)境,我門可以對(duì)比斷點(diǎn)執(zhí)行前后的this值變化。

如果你覺得在斷點(diǎn)的時(shí)候?yàn)榱丝匆粋�(gè)變量必須借用console面板輸出的方式來(lái)查看會(huì)比較麻煩,那么你可以更新最新版的Chrome,它已經(jīng)為我們解決了這個(gè)煩惱。為了方便開發(fā)者調(diào)試,在這一點(diǎn)上谷歌已經(jīng)做到了極致,就在前幾天更新過(guò)Chrome以后,鹵煮意外地發(fā)現(xiàn)了斷點(diǎn)時(shí)監(jiān)控環(huán)境變量的另外一種方式,這種方式極為清晰,在斷點(diǎn)調(diào)試的時(shí)候,區(qū)域2中會(huì)自動(dòng)顯示每個(gè)變量的值,每次代碼往下走的時(shí)候這個(gè)值都回時(shí)時(shí)更新。這讓開發(fā)者對(duì)當(dāng)前環(huán)境變量幾乎可以說(shuō)是一目了然。(此功能有一個(gè)小缺陷,那就是無(wú)法查看數(shù)組或者對(duì)象的具體索引和值,不過(guò)我相信google會(huì)改進(jìn)它的。)

當(dāng)你的項(xiàng)目已經(jīng)線上,出現(xiàn)了一個(gè)bug,你修復(fù)了之后無(wú)法看到它真正在線上的效果,那么你可以在打開線上的項(xiàng)目,直接在瀏覽器中修改代碼然后看到效果。這樣的效果往往是最直接的,這種方法也能幫你省去頻繁驗(yàn)證發(fā)布的麻煩,畢竟身為前端碼農(nóng)的你也一定會(huì)聽到過(guò)后臺(tái)(通常情況下是后臺(tái)發(fā)布)大哥的抱怨:“XXX,測(cè)試通過(guò)了沒,不要出現(xiàn)了哈,發(fā)布一次很麻煩的!”。而在Chrome里面,只需要在區(qū)域2種直接修改,你就可以驗(yàn)證你的代碼在線上是否可行。鹵煮在此處只是指出該功能的用法之一。其他的就憑諸位的聰明才智去想了。

即使在斷點(diǎn)時(shí),你也可以編輯代碼,按ctrl+S保存之后,你會(huì)看到區(qū)域2的背景由白色變?yōu)闇\色,而斷點(diǎn)會(huì)重新開始執(zhí)行。

回到區(qū)域1,Content script選項(xiàng)開里面包含著一些第三方插件或者瀏覽器自身的js代碼,經(jīng)常它是被忽略的,實(shí)際上它的作用很少。我們可以更多關(guān)注一下Snippets選項(xiàng)。還記得基礎(chǔ)篇里面介紹的style嗎?在里面我們可以編輯界面的css代碼并且即時(shí)看到它們的映射效果,同樣地,在Sinppets中,我們也 可以編輯(重寫)js代碼片段。這些片段實(shí)際上就相當(dāng)于你的js文件一樣,不同的是本地的js文件在編輯器里面編輯的,而此處,你是在瀏覽器中編寫的。這些代碼片段在瀏覽器刷新的時(shí)候既不會(huì)消失,也不會(huì)執(zhí)行,除非是你手動(dòng)執(zhí)行它。它可以存在你的本地瀏覽器中,即使關(guān)閉瀏覽器,再次打開時(shí)它依然還在那里。它的主要作用可以使得我們編寫一些項(xiàng)目的測(cè)試代碼時(shí)提供便捷,你知道,如果你在編輯器上編寫這些代碼,在發(fā)布時(shí)你必須為它們添加注釋符號(hào)或者手動(dòng)刪除它們,而在瀏覽器上編寫就不需要這樣繁瑣了。

在Snippets選項(xiàng)的空白處右鍵后選擇彈出的new選項(xiàng),建立一個(gè)你自己的新的文件,然后在區(qū)域2種編輯它。

Snippets的非常功能強(qiáng)大,它的許多隱藏功能還有待發(fā)掘。目前鹵煮使用它是在記住調(diào)試片段、單元測(cè)試、少量的功能代碼編寫功能上。

最后我們看看js中時(shí)間豐富的監(jiān)控功能,同上篇文章介紹的一樣,Sources面板和Elements面板一樣有監(jiān)控事件的功能,而且Sources中功能更加豐富,也更加強(qiáng)大。它的這部分功能集中在區(qū)域3中。我以下圖為例,觀察其作用。

從上到下,紫色圈內(nèi)的數(shù)字的意義:

1、斷點(diǎn)處的債堆棧,就是從該函數(shù)起,逐級(jí)追尋調(diào)用到他的函數(shù)名。例如:

2、在區(qū)域2中你的斷點(diǎn)調(diào)試信息。當(dāng)某個(gè)斷點(diǎn)在執(zhí)行的時(shí)候?qū)��?yīng)的信息會(huì)高亮,雙擊該處信息可以在區(qū)域2中快速定位。

4、擊+ 并輸入 URL 包含的字符串即可監(jiān)聽該 URL 的 Ajax 請(qǐng)求,輸入內(nèi)容就相當(dāng)于 URL 的過(guò)濾器。如果什么都不填,那么就監(jiān)聽所有 XHR 請(qǐng)求。一旦 XHR 調(diào)用觸發(fā)時(shí)就會(huì)在 request.send() 的地方中斷。

5、為網(wǎng)頁(yè)添加各種類型的斷點(diǎn)信息。如選中了Mouse中的某一項(xiàng)(click),當(dāng)你在網(wǎng)頁(yè)上出發(fā)這個(gè)動(dòng)作(單擊網(wǎng)頁(yè)任意地方),你瀏覽器就是立刻斷點(diǎn)監(jiān)控該事件。

值得再次重復(fù)一遍,Sources是一般的功能開發(fā)中最常用到也是最有用的功能面板,它里面的許多功能對(duì)于我們開發(fā)前端工程來(lái)說(shuō)是非常有幫助的。在web2.0時(shí)代的今天,我不推薦依然在自己的代碼里面寫調(diào)試信息的行為,因?yàn)檫@會(huì)然你的開發(fā)變得繁瑣。Chrome開發(fā)工具給我們提供的強(qiáng)大功能,我們應(yīng)該好好利用之。這篇文章就到此結(jié)束,雖然有點(diǎn)繁瑣,但總算基本表述了鹵煮使用經(jīng)驗(yàn)和想法,希望對(duì)你有幫助。如果你覺得不錯(cuò),請(qǐng)推薦一下本文并繼續(xù)關(guān)注鹵煮在的博客。在下一篇中我將向大家介紹Chrome開發(fā)工具中的性能方面的調(diào)試。