這次分享的是Chrome開(kāi)發(fā)工具中最有用的面板Sources。 Sources面板幾乎是我最常用到的Chrome功能面板，也是在我看來(lái)決解一般問(wèn)題的主要功能面板。通常只要是開(kāi)發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問(wèn)題，在審視一遍自己的代碼而一無(wú)所獲之后，我首先就會(huì)打開(kāi)Sources進(jìn)行js斷點(diǎn)調(diào)試，而它也幾乎能解決我80%的代碼問(wèn)題。Js斷點(diǎn)這個(gè)功能讓人興奮不已，在沒(méi)有js斷點(diǎn)功能，只能在IE（萬(wàn)惡的IE）中靠alert彈出窗口調(diào)試js代碼的時(shí)代（特別alert一個(gè)object根本不會(huì)理你），那樣的開(kāi)發(fā)環(huán)境對(duì)于前端程序員來(lái)說(shuō)簡(jiǎn)直是一場(chǎng)噩夢(mèng)。本篇文章講會(huì)介紹Sources的具體用法，幫助各位在開(kāi)發(fā)過(guò)程中夠愉快地調(diào)試js代碼，而不是因它而發(fā)瘋。首先打開(kāi)F12開(kāi)發(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)啦。
谷歌瀏覽器2015最新版下載：http://www.innovatechautomation.com/soft/2349.html
首先我們來(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í)是否中斷的開(kāi)關(guān)
接下來(lái)在區(qū)域4種切換到Watch Expressions 選項(xiàng)，它的作用是為目前斷點(diǎn)添加表達(dá)式，使得每次斷點(diǎn)往下走一步都會(huì)執(zhí)行你寫(xiě)下的js代碼。需要注意的是這個(gè)功能必須謹(jǐn)慎使用，因?yàn)檫@可能會(huì)導(dǎo)致你寫(xiě)下的監(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值變化。
如果你覺(jué)得在斷點(diǎn)的時(shí)候?yàn)榱丝匆粋�(gè)變量必須借用console面板輸出的方式來(lái)查看會(huì)比較麻煩，那么你可以更新最新版的Chrome，它已經(jīng)為我們解決了這個(gè)煩惱。為了方便開(kāi)發(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í)更新。這讓開(kāi)發(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ú)法看到它真正在線上的效果，那么你可以在打開(kāi)線上的項(xiàng)目，直接在瀏覽器中修改代碼然后看到效果。這樣的效果往往是最直接的，這種方法也能幫你省去頻繁驗(yàn)證發(fā)布的麻煩，畢竟身為前端碼農(nóng)的你也一定會(huì)聽(tīng)到過(guò)后臺(tái)（通常情況下是后臺(tái)發(fā)布）大哥的抱怨：“XXX，測(cè)試通過(guò)了沒(méi)，不要出現(xiàn)了哈，發(fā)布一次很麻煩的！”。而在Chrome里面，只需要在區(qū)域2種直接修改，你就可以驗(yàn)證你的代碼在線上是否可行。鹵煮在此處只是指出該功能的用法之一。其他的就憑諸位的聰明才智去想了。
即使在斷點(diǎn)時(shí)，你也可以編輯代碼，按ctrl+S保存之后，你會(huì)看到區(qū)域2的背景由白色變?yōu)闇\色，而斷點(diǎn)會(huì)重新開(kāi)始執(zhí)行。
回到區(qū)域1，Content script 選項(xiàng)開(kāi)里面包含著一些第三方插件或者瀏覽器自身的js代碼,經(jīng)常它是被忽略的，實(shí)際上它的作用很少。我們可以更多關(guān)注一下Snippets選項(xiàng)。還記得基礎(chǔ)篇里面介紹的style嗎？在里面我們可以編輯界面的css代碼并且即時(shí)看到它們的映射效果，同樣地，在Sinppets中，我們也 可以編輯（重寫(xiě)）js代碼片段。這些片段實(shí)際上就相當(dāng)于你的js文件一樣，不同的是本地的js文件在編輯器里面編輯的，而此處，你是在瀏覽器中編寫(xiě)的。這些代碼片段在瀏覽器刷新的時(shí)候既不會(huì)消失，也不會(huì)執(zhí)行，除非是你手動(dòng)執(zhí)行它。它可以存在你的本地瀏覽器中，即使關(guān)閉瀏覽器，再次打開(kāi)時(shí)它依然還在那里。它的主要作用可以使得我們編寫(xiě)一些項(xiàng)目的測(cè)試代碼時(shí)提供便捷，你知道，如果你在編輯器上編寫(xiě)這些代碼，在發(fā)布時(shí)你必須為它們添加注釋符號(hào)或者手動(dòng)刪除它們，而在瀏覽器上編寫(xiě)就不需要這樣繁瑣了。
在Snippets選項(xiàng)的空白處右鍵后選擇彈出的new選項(xiàng)，建立一個(gè)你自己的新的文件，然后在區(qū)域2種編輯它。
Snippets 的非常功能強(qiáng)大，它的許多隱藏功能還有待發(fā)掘。目前鹵煮使用它是在記住調(diào)試片段、單元測(cè)試、少量的功能代碼編寫(xiě)功能上。
最后我們看看js中時(shí)間豐富的監(jiān)控功能，同上篇文章介紹的一樣，Sources面板和Elements面板一樣有監(jiān)控事件的功能，而且Sources中功能更加豐富，也更加強(qiáng)大。它的這部分功能集中在區(qū)域3中。我以下圖為例，觀察其作用。
從上到下，紫色圈內(nèi)的數(shù)字的意義：
1、斷點(diǎn)處的債堆棧，就是從該函數(shù)起，逐級(jí)追尋調(diào)用到他的函數(shù)名。例如:
function a () { b(); } function b() { c(); } function c() { //在該處斷點(diǎn)，查看call stack } a->b->c. call stack 從上到下的順序就是 c b a
2、在區(qū)域2中你的斷點(diǎn)調(diào)試信息。當(dāng)某個(gè)斷點(diǎn)在執(zhí)行的時(shí)候?qū)?yīng)的信息會(huì)高亮，雙擊該處信息可以在區(qū)域2中快速定位。
3、添加的Dom監(jiān)控信息。
4、擊+ 并輸入 URL 包含的字符串即可監(jiān)聽(tīng)該 URL 的 Ajax 請(qǐng)求，輸入內(nèi)容就相當(dāng)于 URL 的過(guò)濾器。如果什么都不填，那么就監(jiān)聽(tīng)所有 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是一般的功能開(kāi)發(fā)中最常用到也是最有用的功能面板，它里面的許多功能對(duì)于我們開(kāi)發(fā)前端工程來(lái)說(shuō)是非常有幫助的。在web2.0時(shí)代的今天，我不推薦依然在自己的代碼里面寫(xiě)調(diào)試信息的行為，因?yàn)檫@會(huì)然你的開(kāi)發(fā)變得繁瑣。Chrome開(kāi)發(fā)工具給我們提供的強(qiáng)大功能，我們應(yīng)該好好利用之。這篇文章就到此結(jié)束，雖然有點(diǎn)繁瑣，但總算基本表述了鹵煮使用經(jīng)驗(yàn)和想法，希望對(duì)你有幫助。如果你覺(jué)得不錯(cuò)，請(qǐng)推薦一下本文并繼續(xù)關(guān)注鹵煮在的博客。在下一篇中我將向大家介紹Chrome開(kāi)發(fā)工具中的性能方面的調(diào)試。
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過(guò)
囧
圍觀
無(wú)聊
