JavaScript如何調(diào)試有哪些建議和技巧附五款有用的調(diào)試工具
以下內(nèi)容是關(guān)于javascript如何調(diào)試有哪些建議和技巧的相關(guān)知識(shí),具體詳情請(qǐng)看下文吧。
瀏覽器開(kāi)發(fā)者工具
我個(gè)人最喜歡Chrome開(kāi)發(fā)者工具。雖然Safari和Firefox無(wú)法達(dá)到Chrome那么高的標(biāo)準(zhǔn),但它們也在逐漸改善。在Firefox中,可以將Firebug和Firefox開(kāi)發(fā)者工具組合使用。如果Firefox小組在改進(jìn)內(nèi)置開(kāi)發(fā)者工具方面繼續(xù)表現(xiàn)優(yōu)異的話,F(xiàn)irebug有一天可能會(huì)被淘汰。
先把個(gè)人偏好放在一邊,你應(yīng)該能夠在目標(biāo)瀏覽器中對(duì)任意代碼進(jìn)行試驗(yàn)和調(diào)試。你的目標(biāo)瀏覽器可能包括著名的IE8,也可能不包括。
要熟悉你自己選擇的開(kāi)發(fā)者工具。你還可以從IDE(集成開(kāi)發(fā)環(huán)境)或者第三方軟件獲得額外的調(diào)試支持。
在各種調(diào)試工具中,調(diào)試的基礎(chǔ)知識(shí)是相通的。事實(shí)上,我是在90年代從Borland的C開(kāi)發(fā)者環(huán)境中學(xué)習(xí)的調(diào)試基礎(chǔ)。斷點(diǎn)、條件斷點(diǎn)、監(jiān)視與最新版Chrome開(kāi)發(fā)者工具是完全相同的。2000年左右,我在Java中捕獲到第一例異常。堆棧跟蹤(Stack traces)的概念依然適用,即使JavaScript術(shù)語(yǔ)將其稱作錯(cuò)誤(Error),檢查堆棧跟蹤仍然和以前一樣有用。
有些知識(shí)點(diǎn)是前端開(kāi)發(fā)特有的。例如:
DOM檢查
DOM斷點(diǎn)
調(diào)試事件
內(nèi)存泄露分析
斷點(diǎn)
使用debugger語(yǔ)句可以在源代碼中增加斷點(diǎn)。一旦到達(dá)debugger語(yǔ)句,執(zhí)行中斷。當(dāng)前作用域的上下文出現(xiàn)在控制臺(tái)中,還有所有的局部變量和全局變量。將鼠標(biāo)光標(biāo)移到變量上可以查看變量的值。
在代碼中還可以創(chuàng)建條件斷點(diǎn):
JavaScript
if (condition) { debugger; }
還可以根據(jù)自己需要在開(kāi)發(fā)者工具中插入斷點(diǎn)和條件斷點(diǎn)。在Chrome開(kāi)發(fā)者工具中,在Sources視圖中點(diǎn)擊行號(hào)即可增加斷點(diǎn)。如果在斷點(diǎn)上點(diǎn)擊右鍵并選擇“編輯斷點(diǎn)(Edit Breakpoint)”,你還可以增加斷點(diǎn)條件。
節(jié)點(diǎn)變化的斷點(diǎn)
如果你的任務(wù)是調(diào)試?yán)a,你可能會(huì)有這樣的問(wèn)題:為什么DOM節(jié)點(diǎn)在執(zhí)行過(guò)程中發(fā)生了改變。Chrome開(kāi)發(fā)者工具提供了一種方便的斷點(diǎn),可用來(lái)檢測(cè)元素樹(shù)中的節(jié)點(diǎn)變化。
在Elements視圖中,右鍵點(diǎn)擊一個(gè)元素,從右鍵菜單中選擇“Break on…”。
節(jié)點(diǎn)變化的斷點(diǎn)
DOM斷點(diǎn)的類型可能包括:
選定節(jié)點(diǎn)樹(shù)狀子目錄(sub-tree)中的節(jié)點(diǎn)變化,
選定節(jié)點(diǎn)的屬性發(fā)生變化,
節(jié)點(diǎn)被刪除。
避免記錄引用類型
當(dāng)記錄對(duì)象或數(shù)組時(shí),原始類型的值在引用對(duì)象記錄中可能會(huì)發(fā)生變化。當(dāng)查看引用類型時(shí)一定要記住,在記錄和查看期間,代碼執(zhí)行可能會(huì)影響觀測(cè)到的結(jié)果。
例如,在Chrome開(kāi)發(fā)者工具中執(zhí)行以下代碼:
JavaScript
var wallets = [{ amount: 0 }]; setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100; }, 1000 );
記錄的第二個(gè)和第三個(gè)屬性的值是正確的,第一個(gè)屬性中對(duì)象引用的值是不可靠的。當(dāng)你第一次在開(kāi)發(fā)者工具中顯示這個(gè)屬性時(shí),amount域的值就已經(jīng)確定了。無(wú)論你對(duì)同一個(gè)引用關(guān)閉并重新打開(kāi)多少次,這個(gè)值都不會(huì)變化。
記錄參考類型
永遠(yuǎn)記得你在記錄什么。記錄原始類型時(shí),使用帶斷點(diǎn)的watch表達(dá)式。如果是異步代碼,避免記錄引用類型。
表格記錄
在一些開(kāi)發(fā)者工具中,你可以用console.table在控制臺(tái)中記錄對(duì)象數(shù)組。
嘗試在你的Chrome開(kāi)發(fā)者工具中執(zhí)行下列代碼:
JavaScript
console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] );
輸出是非常好看的表格。所有原始類型都立刻顯示出來(lái),它們的值反應(yīng)記錄時(shí)的狀態(tài)。也可以記錄復(fù)雜類型,顯示內(nèi)容為其類型,內(nèi)容無(wú)法顯示。因此,console.table只能用來(lái)顯示具有原始類型值的對(duì)象構(gòu)成的二維數(shù)據(jù)結(jié)構(gòu)。
XHR斷點(diǎn)
有時(shí)你可能會(huì)遇到錯(cuò)誤的AJAX請(qǐng)求。如果你無(wú)法立刻確認(rèn)提交請(qǐng)求的代碼,XHR斷點(diǎn)可以幫你節(jié)省時(shí)間。當(dāng)提交某一特殊類型的AJAX時(shí),XHR斷點(diǎn)將會(huì)終止代碼的執(zhí)行,并將提交請(qǐng)求的代碼段呈現(xiàn)給用戶。
在Chrome開(kāi)發(fā)者工具的Sources標(biāo)簽頁(yè)中,其中一個(gè)斷點(diǎn)類型就是XHR斷點(diǎn)。點(diǎn)擊+圖標(biāo),你可以輸入U(xiǎn)RL片段,當(dāng)AJAX請(qǐng)求的URL中出現(xiàn)這個(gè)URL片段時(shí),JavaScript代碼將會(huì)中斷。
事件監(jiān)聽(tīng)器斷點(diǎn)
Chrome開(kāi)發(fā)者工具可以捕獲所有類型的事件,當(dāng)用戶按下一個(gè)鍵、點(diǎn)擊一下鼠標(biāo)時(shí),可以對(duì)觸發(fā)的事件進(jìn)行調(diào)試。
異常時(shí)暫停
Chrome開(kāi)發(fā)者工具可以在拋出異常時(shí)暫停執(zhí)行JavaScript代碼。這可以讓你在Error對(duì)象被創(chuàng)建時(shí)觀察應(yīng)用的狀態(tài)。
異常時(shí)暫停
代碼片段
Sources標(biāo)簽頁(yè)左側(cè)面板上有一個(gè)代碼片段(Snippet)子標(biāo)簽頁(yè),可用于保存代碼片段,幫你調(diào)試代碼。
如果你堅(jiān)持使用控制臺(tái)調(diào)試,反復(fù)寫相同的代碼,你應(yīng)該將你的代碼抽象成調(diào)試片段。這樣的話,甚至還可以把你的調(diào)試技巧教給你的同事。
Paul Irish發(fā)布過(guò)一些基本的調(diào)試代碼片段,例如在函數(shù)執(zhí)行前插入斷點(diǎn)。審查這些代碼片段,并在網(wǎng)上搜索其他代碼片段,這是很有價(jià)值的。
在函數(shù)執(zhí)行前插入斷點(diǎn)
如果你可以得到函數(shù)調(diào)用的源代碼,你還可以在函數(shù)調(diào)用前插入斷點(diǎn)來(lái)終止函數(shù)的執(zhí)行。如果你想調(diào)試f函數(shù),用debug(f)語(yǔ)句可以增加這種斷點(diǎn)。
Unminify最小化代碼
(譯者注:unminify 解壓縮并進(jìn)行反混淆)
盡可能使用 source map。有時(shí)生產(chǎn)代碼不能使用source map,但不管怎樣,你都 不應(yīng)該直接對(duì)生產(chǎn)代碼進(jìn)行調(diào)試。
(譯者注:sourcemap 是針對(duì)壓縮合并后的web代碼進(jìn)行調(diào)試的工具)
如果沒(méi)有source map的話,你最后還可以求助于Chrome開(kāi)發(fā)者工具Sources標(biāo)簽頁(yè)中的格式化按鈕(Pretty Print Button)。格式化按鈕{}位于源代碼文本區(qū)域的下方。格式化按鈕對(duì)源代碼進(jìn)行美化,并改變行號(hào),這使得調(diào)試代碼更加方便,堆棧跟蹤更加有效。
格式化按鈕只有在不得已時(shí)才會(huì)使用。從某種意義上來(lái)說(shuō),丑代碼就是難看,因?yàn)榇a中的命名沒(méi)有明確的語(yǔ)義。
DOM元素的控制臺(tái)書(shū)簽
Chrome開(kāi)發(fā)者工具和Firebug都提供了書(shū)簽功能,用于顯示你在元素標(biāo)簽頁(yè)(Chrome)或HTML標(biāo)簽頁(yè)(Firebug)中最后點(diǎn)擊的DOM元素。如果你依次選擇了A元素、B元素和C元素,
$0 表示C元素
$1 表示B元素
$2 表示A元素
如果你又選擇了元素D,那么$0、$1、$2和$3分別代表D、C、B和A。
訪問(wèn)調(diào)用棧
JavaScript
var f = function() { g(); } var g = function() { h(); } var h = function() { console.trace('trace in h'); } f();
Chrome開(kāi)發(fā)者工具中的Sources標(biāo)簽頁(yè)也在Watch表達(dá)式下面顯示調(diào)用棧。
性能審查
性能審查工具通常是很有用的。這些工具可以用于防止內(nèi)存泄露,還可以檢測(cè)到你的網(wǎng)站哪里需要優(yōu)化。由于這些工具并不了解你的產(chǎn)品,你可以忽略其某些建議。通常來(lái)說(shuō),性能分析工具能夠有效范圍,可以使你的網(wǎng)站顯著優(yōu)化。
審查工具舉例:
Chrome開(kāi)發(fā)者工具的Audit標(biāo)簽頁(yè)
YSlow
熟能生巧
你可能熟悉某些調(diào)試技巧,其他技巧也會(huì)幫你節(jié)省不少時(shí)間。如果你開(kāi)始在實(shí)踐中使用這些技巧,我建議你幾周之后重新閱讀本文。你將會(huì)驚奇地發(fā)現(xiàn),你的關(guān)注點(diǎn)在幾周內(nèi)就發(fā)生了變化。
五個(gè)常用的js調(diào)試工具
JavaScript被稱作以原型(prototype)為基礎(chǔ)的語(yǔ)言。這種語(yǔ)言有很多特色,比如動(dòng)態(tài)和弱類型,它還有一等函數(shù)(first class function)。另一個(gè)特點(diǎn)是它是一個(gè)多范型(multi-paradigm)語(yǔ)言,支持面向?qū)ο?、聲明式、函?shù)式的編程風(fēng)格。
JavaScript最初被用作客戶端語(yǔ)言,瀏覽器實(shí)現(xiàn)它用來(lái)提供增強(qiáng)的用戶接口。JavaScript在很多現(xiàn)代的網(wǎng)站和Web應(yīng)用程序中都有應(yīng)用。JavaScript的一個(gè)很棒的功能也很重要,就是我確實(shí)可以用它來(lái)提高或改善網(wǎng)站的用戶體驗(yàn)。JavaScript也可以提供豐富的功能和交互的組件。
JavaScript在這技術(shù)高速發(fā)展的同時(shí)變得非常受歡迎。因?yàn)槭軞g迎JavaScript也改進(jìn)了許多,修改JavaScript腳本有很多事要做。這次我們?yōu)殚_(kāi)發(fā)者帶來(lái)了幾個(gè)非常有用的JavaScript調(diào)試工具。
1)Drosera
可以調(diào)試任何WebKit程序,不僅僅是Safari瀏覽器。
2)Dragonfly
源代碼視圖有語(yǔ)法高亮,可以設(shè)置斷點(diǎn)。強(qiáng)大的搜索功能,支持正則表達(dá)式。
3)Getfirebug
可以在任何網(wǎng)頁(yè)編輯、調(diào)試和實(shí)時(shí)監(jiān)視CSS、HTML和JavaScript。
4)Debugbar
5)Venkman
Venkman是Mozilla的JavaScript調(diào)試器名稱。它旨在為以Mozilla為基礎(chǔ)的瀏覽器(Firefox, Netscape 7.x/9.x and SeaMonkey)提供一個(gè)強(qiáng)大的JavaScript調(diào)試環(huán)境。
以上內(nèi)容是關(guān)于JavaScript如何調(diào)試有哪些建議和技巧及五款常用的調(diào)試工具的相關(guān)說(shuō)明,希望大家喜歡。
相關(guān)文章
Wordpress ThickBox 添加“查看原圖”效果代碼
上一次修改了點(diǎn)擊圖片動(dòng)作 , 這次添加一個(gè)“查看原圖”的鏈接,點(diǎn)擊后將在一個(gè)新瀏覽器窗口(或Tab)打開(kāi)該圖片的原始鏈接地址。2010-12-12PHP使用方法重載實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建屬性的get和set方法
這篇文章主要介紹了PHP使用方法重載實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建屬性的get和set方法,使用本文方法可以在一個(gè)類中不用在寫大量的set方法或get方法,需要的朋友可以參考下2014-11-11原生js實(shí)現(xiàn)回復(fù)評(píng)論功能
本文主要分享了原生js實(shí)現(xiàn)回復(fù)評(píng)論功能的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01js實(shí)現(xiàn)購(gòu)物車加減和價(jià)格運(yùn)算
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購(gòu)物車加減和價(jià)格運(yùn)算,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08layer.open關(guān)閉父窗口 以及調(diào)用父頁(yè)面的方法
今天小編就為大家分享一篇layer.open關(guān)閉父窗口 以及調(diào)用父頁(yè)面的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08javascript使用alert實(shí)現(xiàn)一個(gè)精美的彈窗
其實(shí)最初使用alert還是一個(gè)常態(tài),包括現(xiàn)在很多B端平臺(tái)還在直接使用alert,本文主要介紹了javascript使用alert實(shí)現(xiàn)一個(gè)精美的彈窗,感興趣的可以了解一下2023-02-02