使用Chrome開(kāi)發(fā)者工具進(jìn)行JavaScript問(wèn)題定位與調(diào)試

使?Chrome開(kāi)發(fā)者?具進(jìn)?JavaScript問(wèn)題定位與調(diào)試ChromeV35版本中的開(kāi)發(fā)者?具分為8個(gè)?模塊，每個(gè)模塊及其主要功能為：Element標(biāo)簽頁(yè)：?于查看和編輯當(dāng)前頁(yè)?中的HTML和CSS元素。Network標(biāo)簽頁(yè)：?于查看HTTP請(qǐng)求的詳細(xì)信息，如請(qǐng)求頭、響應(yīng)頭及返回內(nèi)容等。Source標(biāo)簽頁(yè)：?于查看和調(diào)試當(dāng)前頁(yè)?所加載的腳本的源?件。TimeLine標(biāo)簽頁(yè)：?于查看腳本的執(zhí)?時(shí)間、頁(yè)?元素渲染時(shí)間等信息。Profiles標(biāo)簽頁(yè)：?于查看CPU執(zhí)?時(shí)間與內(nèi)存占?等信息。Resource標(biāo)簽頁(yè)：?于查看當(dāng)前頁(yè)?所請(qǐng)求的資源?件，如HTML，CSS樣式?件等。Audits標(biāo)簽頁(yè)：?于優(yōu)化前端頁(yè)?，加速?頁(yè)加載速度等。Console標(biāo)簽頁(yè)：?于顯?腳本中所輸出的調(diào)試信息，或運(yùn)?測(cè)試腳本等。后?會(huì)在闡述過(guò)程中，會(huì)提及使?Element標(biāo)簽頁(yè)探測(cè)頁(yè)?元素并查看該元素的HTML內(nèi)容，也會(huì)使?Source標(biāo)簽頁(yè)與Console標(biāo)簽頁(yè)調(diào)試腳本及查看調(diào)試信息，并不會(huì)詳細(xì)介紹他們的基本功能，請(qǐng)?jiān)陂喿x時(shí)提前了解以上相關(guān)標(biāo)簽頁(yè)的基本功能。使?Chrome開(kāi)發(fā)者?具巧妙定位腳本代碼?前很多的?頁(yè)應(yīng)?程序都會(huì)使?各種諸如JavaScript之類(lèi)的腳本語(yǔ)?，來(lái)增強(qiáng)事件處理、頁(yè)?展現(xiàn)或是樣式控制等??的功能。很多?站或?絡(luò)應(yīng)?系統(tǒng)都已做成單頁(yè)?模式，該頁(yè)?只負(fù)責(zé)加載相關(guān)的腳本與樣式，這些腳本與樣式來(lái)負(fù)責(zé)動(dòng)態(tài)?成更多的?頁(yè)?或?qū)υ?huà)框。因此，該類(lèi)?頁(yè)應(yīng)?程序的腳本數(shù)量會(huì)?常?，從?使開(kāi)發(fā)?員在如此之多的腳本中定位某個(gè)問(wèn)題變得困難起來(lái)，但也并?毫?技巧。合理命名模塊ID，根據(jù)ID找到相關(guān)腳本?件。單頁(yè)?的?絡(luò)應(yīng)?程序?般會(huì)引?復(fù)雜的JavaScript框架，如JQuery,Dojo或ExtJS等。這些框架都?持聲明?定義的?頁(yè)?組件，如Dojo中的widget。?般??，每?個(gè)widget會(huì)被單獨(dú)寫(xiě)在?個(gè)JS?件中。因此，在定義該組件時(shí)，可以將儲(chǔ)存它的JS?件名做為其id成員屬性的?部分（例如前綴），并在描述該組件的HTML模板中，將id的值加?到HTML標(biāo)簽的屬性中。當(dāng)應(yīng)?程序在Chrome瀏覽器中運(yùn)?時(shí)，在使?Chrome開(kāi)發(fā)者?具的"元素"模塊中的元素探測(cè)功能查找HTML時(shí)，可以很直觀地看見(jiàn)每?個(gè)div對(duì)應(yīng)的JS?件。因此，當(dāng)某?個(gè)div出現(xiàn)問(wèn)題時(shí)，對(duì)其HTML進(jìn)?探測(cè)后，便可根據(jù)其中的id定位到相應(yīng)的腳本?件，從?使問(wèn)題調(diào)試的范圍??縮?。以下通過(guò)實(shí)際項(xiàng)?中的例?加以說(shuō)明。清單1.Dojo中?定義widget引?id的聲明?式dojo.declare("exc.fe.bijits.FeLogon.FeLogonLogonPanel",[exc.kc._Bijit,dojox.dtl._Templated,],{templatePath:dojo.moduleUrl('exc.fe.bijits.FeLogon',"FeLogonLogonPanel.html"),select:null,SESSION_ID_OFFSET:0,sessionid:null,launchType:"StandardLogin",langcnt:0,currentLang:null,……//省略之后不相關(guān)的?法和屬性……});在清單1中給出的是使?Dojo創(chuàng)建?定義widget并將該widgetid引?其模板HTML中的?式。?定義的widget在繼承了dojox.dtl._Templated之后，Dojo有內(nèi)部機(jī)制可將該widget聲明的名稱(chēng)作為id?動(dòng)加到其HTML模板中。因此開(kāi)發(fā)?員只要保證該widget聲明的名稱(chēng)與其所儲(chǔ)存的?件名對(duì)應(yīng)即可。清單1中的id與儲(chǔ)存該腳本的?件名均為"exc.fe.bijits.FeLogon.FeLogonLog--onPanel"。在此前提下，打開(kāi)瀏覽器運(yùn)??頁(yè)加載該widget后，使?Chrome開(kāi)發(fā)者?具的?頁(yè)元素探測(cè)功能找到該widget，便可看見(jiàn)其id，即相應(yīng)的腳本?件，如圖1所?。如若該widget中的?為出現(xiàn)異常，例如userid不能進(jìn)?校驗(yàn)，便可打開(kāi)其相關(guān)的腳本?件進(jìn)?調(diào)試。圖1.查看widget在HTML模板中的id查看widget在HTML模板中的id開(kāi)啟運(yùn)?時(shí)錯(cuò)誤?動(dòng)暫停功能，準(zhǔn)確定位出錯(cuò)腳本位置在Chrome開(kāi)發(fā)者?具中，可以開(kāi)戶(hù)運(yùn)?時(shí)錯(cuò)誤?動(dòng)暫停這?功能（如圖2所?），從?使開(kāi)發(fā)者?具能在發(fā)現(xiàn)運(yùn)?時(shí)腳本異常時(shí)，在異常腳本處暫停運(yùn)?，跳轉(zhuǎn)?調(diào)試頁(yè)?，供開(kāi)發(fā)?員進(jìn)?步查找該運(yùn)?時(shí)異常產(chǎn)?的原因。圖2.Source?板中的?動(dòng)暫停按鈕Source?板中的?動(dòng)暫停按鈕?動(dòng)暫停按鈕的下?有?個(gè)選項(xiàng)，PauseOnCaughtExceptions，如果勾選上，則即使所發(fā)?運(yùn)?時(shí)異常的代碼在try/catch范圍內(nèi)，Chrome開(kāi)發(fā)者?具也能夠在錯(cuò)誤代碼處停住。合理添加調(diào)試?志，通過(guò)Console標(biāo)簽頁(yè)定位在進(jìn)?腳本開(kāi)發(fā)過(guò)程中，在重要的?法中添加必要的調(diào)試?志輸出語(yǔ)句，可以?便開(kāi)發(fā)?員進(jìn)?問(wèn)題定位與調(diào)試。清單2中的JavaScript腳本?法中，在其開(kāi)始和結(jié)束處添加了debug級(jí)別的?志輸出，從?使該?法在被執(zhí)?時(shí)，可在Console標(biāo)簽頁(yè)找到相關(guān)?志，并且能通過(guò)點(diǎn)擊該?志的末端件鏈接直接跳轉(zhuǎn)到Source標(biāo)簽頁(yè)的腳本源?件中，極??便了相關(guān)代碼的定位，如圖3所?。清單2.Dojo中?定義widget引?id的聲明?式_containerSelect:function(/*ContentPane*/cp){varF=this.declaredClass+"._containerSelect():";console.debug(F,"Starting:",cp);//當(dāng)?法被執(zhí)?時(shí)，在控制臺(tái)輸出相關(guān)?志dojo.forEach(this.children,function(child){if(cp.id===child.targetId){this.showChild(child.id);//--Saverequestedmodulethis._history.push(child.id);//kakif(this.globalArgs._showModuleTopic)dojo.publish(this.globalArgs._showModuleTopic,[child.id,"open"]);}},this);console.debug(F,"End");//當(dāng)?法執(zhí)?結(jié)束后，在控制臺(tái)輸出相關(guān)?志},圖3.Console?板中的?志輸出Console?板中的?志輸出使?Chrome開(kāi)發(fā)者?具調(diào)試JavaScript的技巧與?得上介紹了3種定位相關(guān)腳本的?法，在定位腳本之后，通常會(huì)對(duì)腳本中的部分代碼進(jìn)?調(diào)試，本章主要詳細(xì)講解?效快捷地利?Chrome開(kāi)發(fā)者?具進(jìn)?JavaScript腳本調(diào)試的?種技巧與?得。設(shè)置條件斷點(diǎn)與Java調(diào)試類(lèi)似，Chrome開(kāi)發(fā)者?具提供了斷點(diǎn)設(shè)置、刪除與斷點(diǎn)存儲(chǔ)等基本功能。同時(shí)，開(kāi)發(fā)者?具也提供了設(shè)置條件斷點(diǎn)的功能，使開(kāi)發(fā)者可以控制該斷點(diǎn)只有在滿(mǎn)?某?條件時(shí)才會(huì)被觸發(fā)。條件斷點(diǎn)的設(shè)置如圖4所?，在所需要設(shè)置斷點(diǎn)的?最前端的?號(hào)處點(diǎn)擊右鍵，選擇添加條件斷點(diǎn)后，會(huì)彈出?個(gè)對(duì)話(huà)框?于輸?具體的條件。合理運(yùn)?好條件斷點(diǎn)能夠提?調(diào)試的效率與準(zhǔn)確性，使開(kāi)發(fā)?員能更專(zhuān)注于在期望的場(chǎng)景下進(jìn)?調(diào)試。圖4.Source?板中添加條件斷點(diǎn)Source?板中添加條件斷點(diǎn)修改JavaScript件中的代碼這是Chrome開(kāi)發(fā)者?具提供的?種?常實(shí)?的功能，即使開(kāi)發(fā)?員可直接對(duì)開(kāi)發(fā)者?具的Source標(biāo)簽頁(yè)中的代碼進(jìn)?修改，并將其保存，使瀏覽器在下次執(zhí)?該段腳本時(shí)，直接加載最新修改的版本。?前的Firebug及IE?帶的開(kāi)發(fā)者?具都不?持對(duì)腳本的直接修改，導(dǎo)致在Firefox或IE中調(diào)試腳本時(shí)，如果需要對(duì)代碼進(jìn)?修改，需要先去修改腳本源?件，再同步?應(yīng)?服務(wù)器，再清理瀏覽器緩存，最終再次打開(kāi)應(yīng)?程序時(shí)，才會(huì)看到代碼修改后的效果?？梢?jiàn)Chrome開(kāi)發(fā)者?具提供的這?功能，??提供了開(kāi)發(fā)者調(diào)試腳本的效果。需要注意的是，由于這種修改是保存在瀏覽器緩存中，因此它不會(huì)影響到腳本的源?件。當(dāng)開(kāi)發(fā)?員決定采?修改之后的腳本時(shí)，需要將其復(fù)制到腳本的源?件中。使?控制臺(tái)打印變量值或?法的返回結(jié)果當(dāng)斷點(diǎn)被觸發(fā)進(jìn)?到調(diào)試模式時(shí)，我們可以將當(dāng)前任意存在的變量或?法輸?到控制臺(tái)中，按下回車(chē)后，控制臺(tái)便會(huì)返回相關(guān)的結(jié)果。該功能可使開(kāi)發(fā)?員?便了解程序運(yùn)??斷點(diǎn)處時(shí)各個(gè)所需要變量或?法的返回值。需要注意的是，當(dāng)在控制臺(tái)中輸?的?法名字不帶括號(hào)時(shí)，控制臺(tái)輸出的是該?法所包含的代碼信息，?并不是運(yùn)?結(jié)果。結(jié)合Element標(biāo)簽頁(yè)調(diào)試JavaScript中對(duì)CSS的控制在?頁(yè)開(kāi)發(fā)過(guò)程中，經(jīng)常需要在腳本中控制不同條件下頁(yè)?的樣式展?，例如要求某?個(gè)按鈕的顏?在?戶(hù)停留?秒鐘之后由??變成灰?。此時(shí)我們便需要在腳本中通過(guò)具體的數(shù)值指定這個(gè)"灰?"該如何表?，?般情況下我們需要查找相關(guān)資料或使?其他?具才能得到期望的"灰?"所對(duì)應(yīng)的RGB數(shù)值或?六進(jìn)制數(shù)值。然?在Chrome開(kāi)發(fā)者?具的Element標(biāo)簽頁(yè)中，其實(shí)已經(jīng)提供了包括該功能在內(nèi)的?系列對(duì)樣式進(jìn)?實(shí)時(shí)修改的功能