快捷導(dǎo)航

JavaScrip調(diào)試技巧之?dāng)帱c(diǎn)調(diào)試

更新時(shí)間：2015年10月22日 13:59:15 作者：teresa502

本篇文章給大家介紹javascript調(diào)試技巧之?dāng)帱c(diǎn)調(diào)試，主要介紹使用Firebug、debugger、debugger在程序中加入斷點(diǎn)調(diào)試等，但是這些調(diào)試技巧都不借助于瀏覽器之外的工具，其他瀏覽器主要是opera、safari、chrome和ie8，感興趣的小伙伴一起看看吧

首先，在各個(gè)瀏覽器中，斷點(diǎn)調(diào)試支持的最好的當(dāng)然是Firefox，F(xiàn)irefox不僅可以使用Firebug調(diào)試頁面js腳本，還可以用高級(jí)調(diào)試工具例如JavaScript Debugger (Venkman) 來調(diào)試Firefox擴(kuò)展里的js。除此之外，F(xiàn)irefox還支持一些更為高級(jí)的斷點(diǎn)調(diào)試、變量監(jiān)視功能。

其他瀏覽器里，Opera、Chrome和Safari的調(diào)試功能也比較好用。Opera的DragonFly速度相對(duì)比較快，界面清爽，功能強(qiáng)大，但不如Safari等友好。相比來說，IE8的程序員工具簡直沒法用。
這次時(shí)間有限，先來總結(jié)一下Firefox下的調(diào)試技巧。

1. 使用Firebug進(jìn)行斷點(diǎn)調(diào)試

使用Firebug調(diào)試JavaScript非常方便。具體步驟：

a. 打開Firebug后，啟用“腳本”調(diào)試，找到引用的腳本文件（或者行內(nèi)js）；

用Firebug找到要調(diào)試的腳本（點(diǎn)擊放大）

b. 在適當(dāng)?shù)奈恢眉尤霐帱c(diǎn)；

c. 如果斷點(diǎn)已經(jīng)執(zhí)行過，則刷新頁面，這時(shí)腳本就會(huì)在斷點(diǎn)處中斷。如果斷點(diǎn)沒有執(zhí)行過，那可以直接執(zhí)行頁面上的動(dòng)作（例如點(diǎn)擊按鈕等），然后代碼會(huì)在斷點(diǎn)處中斷；

用Firebug進(jìn)行斷點(diǎn)調(diào)試

用Firebug進(jìn)行斷點(diǎn)調(diào)試（點(diǎn)擊放大）

d. 觀察函數(shù)調(diào)用棧，觀察local變量，也可以進(jìn)行單步執(zhí)行，進(jìn)行調(diào)試。

確實(shí)非常簡單！用Firebug斷點(diǎn)調(diào)試的優(yōu)點(diǎn)總結(jié)如下：

能加斷點(diǎn)的行用綠色行號(hào)，非常直觀；

call stack用兩種方式顯示出來，很方便；

本地變量的顯示非常清晰明了。

2. 使用JavaScript Debugger進(jìn)行斷點(diǎn)調(diào)試

這是老牌的調(diào)試工具，之前叫做Venkman，可以以擴(kuò)展形式安裝在Firefox上，我們?cè)谶@里就稱他為Venkman吧。它不僅能夠調(diào)試頁面腳本，還能調(diào)試Firefox擴(kuò)展（extension）里的js。我們?cè)谧鯢irefox擴(kuò)展開發(fā)時(shí)，Venkman是必不可少的工具，老田強(qiáng)力推薦！當(dāng)然，F(xiàn)irefox本身的邏輯實(shí)現(xiàn)，也是用JavaScript來做到的。我們現(xiàn)在可以用Venkman來調(diào)試一下Firefox本身。Firefox的核心js是browser.js，在這個(gè)路徑下：

chrome://browser/content/browser.js

我們打開Venkman之后，在Loaded Scripts里填入browser.js，這個(gè)js文件就會(huì)被過濾出來（如果沒有看到browser.js，那么你可能需要查一下是否選上了Debug->Exclude browser files）。

Venkman：選擇要調(diào)試的js文件

Venkman：選擇要調(diào)試的js文件（點(diǎn)擊放大）

我們找到讓瀏覽器后退的代碼，然后點(diǎn)擊Firefox的后退按鈕，這時(shí)Venkman就會(huì)停在BrowserBack方法上！讓我們?cè)僖徊揭徊降乜匆豢矗現(xiàn)irefox自己到底做了什么。btw，實(shí)現(xiàn)Firefox的js代碼也不是很漂亮嘛~~~

用JavaScript Debugger調(diào)試Firefox

用JavaScript Debugger斷點(diǎn)調(diào)試Firefox（點(diǎn)擊放大）

Venkman當(dāng)然也帶有一個(gè)console，利用這個(gè)console，我們可以看一看瀏覽器層次的window和document都是什么東西。類似于Firebug和其他瀏覽器的console，只要直接輸入js代碼片段即可！

使用Venkman自帶的console

使用Venkman自帶的console（點(diǎn)擊放大）

有興趣的話，可以在這里發(fā)現(xiàn)更多有關(guān)Firefox開發(fā)（以及擴(kuò)展開發(fā)）的好玩的東西！

3. 使用debugger在程序中加入斷點(diǎn)

另外還有一個(gè)少為人知的斷點(diǎn)加入方法。我們可以在程序中加入debugger語句，這樣Firefox的調(diào)試工具會(huì)停留在這條語句上，代碼也暫停執(zhí)行，和加入斷點(diǎn)的效果一樣。例如：

var myfunc = {
 get_field_value_callback : function() {
  debugger;
  var ed = this, target = ed.currSpan;
  /* do something more */
 }
}

這時(shí)重新加載頁面，斷點(diǎn)就會(huì)停留在debugger語句上。這樣，我們就可以在寫代碼時(shí)隨心所欲地加入斷點(diǎn)了。另外，其他瀏覽器（包括IE8！Surprise?。┩瑯又С謉ebugger語句！

上次總結(jié)了Firefox下進(jìn)行JavaScript斷點(diǎn)調(diào)試的技巧，這次來看一下其他瀏覽器下的調(diào)試。一點(diǎn)說明，這里的調(diào)試技巧都不借助于瀏覽器之外的工具，例如Aptana，VS2008等。如果要找這方面的一些資料，我這里沒有哈。

其他瀏覽器，主要是Opera, Safari, Chrome和IE8。這之中除了IE8，它們的調(diào)試功能都挺不錯(cuò)的，基本都可以搜索腳本，加入斷點(diǎn)，查看調(diào)用棧、本地變量，以及強(qiáng)大的console。

1. 使用Opera的Dragonfly進(jìn)行斷點(diǎn)調(diào)試

使用Opera進(jìn)行斷點(diǎn)調(diào)試

使用Opera Dragonfly進(jìn)行斷點(diǎn)調(diào)試

打開Tools – Advanced – Developer Tools，即可看到類似于Firebug的開發(fā)工具，名字叫做Dragonfly，也就是蜻蜓。在這里可以查看頁面結(jié)構(gòu)，查看網(wǎng)絡(luò)交互，以及斷點(diǎn)調(diào)試，并且可以在調(diào)試過程中使用Command Line (console)。

Opera on WindowsXP也屬于YUI要支持的A-grade（詳見此表格），所以我們?cè)陂_發(fā)的時(shí)候，也要盡量去支持。此外Dragonfly的DOM查看工具有一個(gè)亮點(diǎn)，Export current DOM view。我們可以在線做一些DOM改動(dòng)，然后Export一下，即可得到改動(dòng)后的HTML代碼，非常方便。

2. 使用Chrome和Safari進(jìn)行斷點(diǎn)調(diào)試

如果你覺得Opera太小眾，那么你可以在Safari或者Chrome上進(jìn)行調(diào)試。兩個(gè)瀏覽器的調(diào)試方式、界面極其相似，所以這里以Safari 4.0為例。打開Menu – Develop – Start Debugging JavaScript，即可彈出一個(gè)調(diào)試工具。值得一提的是，Safari和Chrome的調(diào)試工具最好不要Dock到瀏覽器下面，因?yàn)閺棾鰜淼脑?，調(diào)試界面是剛剛好的。
首先找到要調(diào)試的腳本：

使用Safari進(jìn)行JavaScript調(diào)試：找到腳本

設(shè)置斷點(diǎn)，重新加載頁面（或者執(zhí)行動(dòng)作）：

使用Safari進(jìn)行JavaScript調(diào)試：設(shè)置斷點(diǎn)

在右側(cè)查看本地變量和函數(shù)調(diào)用棧：

使用Safari進(jìn)行JavaScript調(diào)試：變量查看

Safari的調(diào)試工具一個(gè)亮點(diǎn)是，console和斷點(diǎn)調(diào)試在同一個(gè)界面上，這樣可以非常方便地在程序中斷時(shí)，利用console來做一些驗(yàn)證操作。

3. IE8的斷點(diǎn)調(diào)試功能

IE8自帶的開發(fā)者工具，雖然極其難用，但也可以斷點(diǎn)調(diào)試。斷點(diǎn)調(diào)試的方法與上述雷同。

使用IE8開發(fā)者工具進(jìn)行斷點(diǎn)調(diào)試

可以看到，IE8似乎莫名其妙地終止了js代碼的識(shí)別。這樣的話，從74行往后，都沒辦法加斷點(diǎn)了，真不可思議。但我們有時(shí)為了兼容IE，不得不在IE下進(jìn)行一些調(diào)試，怎么辦呢？可以用上一篇文章的辦法，在需要中斷的位置加入debugger語句，這樣程序運(yùn)行時(shí)，IE8就會(huì)中斷在debugger語句上了。

以上內(nèi)容是小編給大家分享的JavaScrip調(diào)試技巧之Firefox斷電調(diào)試，希望大家喜歡。

您可能感興趣的文章: