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

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

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

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

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

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

b. 在適當?shù)奈恢眉尤霐帱c；

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

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

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

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

能加斷點的行用綠色行號，非常直觀；

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

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

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

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

chrome://browser/content/browser.js

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

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

我們找到讓瀏覽器后退的代碼，然后點擊Firefox的后退按鈕，這時Venkman就會停在BrowserBack方法上！讓我們再一步一步地看一看，F(xiàn)irefox自己到底做了什么。btw，實現(xiàn)Firefox的js代碼也不是很漂亮嘛~~~

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

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

使用Venkman自帶的console（點擊放大）

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

3. 使用debugger在程序中加入斷點

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

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

這時重新加載頁面，斷點就會停留在debugger語句上。這樣，我們就可以在寫代碼時隨心所欲地加入斷點了。另外，其他瀏覽器（包括IE8！Surprise！）同樣支持debugger語句！

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

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

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

使用Opera Dragonfly進行斷點調(diào)試

打開Tools