調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關鍵字)

更新時間：2013年01月25日 15:30:29 投稿：whsnow

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調(diào)試功能下面我就介紹如何在瀏覽器/VS中調(diào)試我們的JS代碼,感興趣的你可不要走開啊，希望本文對你有所幫助

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調(diào)試功能。作為我們.NET 陣營，學會如何在IE中調(diào)試JS就足夠了，在掌握了IE中的調(diào)試方法以后，Chrome和Firefox中的調(diào)試方法也變得相當簡單了。

JavaScript debugger 語句

開啟 debugger ，代碼在執(zhí)行到第三行前終止。

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;

定義和用法

debugger 語句用于停止執(zhí)行 JavaScript，并調(diào)用 (如果可用) 調(diào)試函數(shù)。
使用 debugger 語句類似于在代碼中設置斷點。
通常，你可以通過按下 F12 開啟調(diào)試工具，并在調(diào)試菜單中選擇 "Console" 。
注意：如果調(diào)試工具不可用，則調(diào)試語句將無法工作。

在F12開發(fā)人員工具中進行調(diào)試

打開IE瀏覽器，按下F12鍵，就會打開開發(fā)人員工具，這是IE內(nèi)置的開發(fā)人員開發(fā)工具，方便開發(fā)人員對HTML、CSS、Javascript等網(wǎng)頁資源進行跟蹤調(diào)試使用的。

如果你打開的時候沒有固定在網(wǎng)頁底部，可以點擊右上角菜單欄中的按鈕來完成。

我們看到在這個工具窗口里面有幾個標簽頁，分別是：HTML、CSS、控制臺、腳本、探查器和網(wǎng)絡，點開每一個標簽，可以執(zhí)行相應的任務。

在HTML標簽窗口中，工具欄中的按鈕所執(zhí)行的操作如下圖：

CSS標簽是用來查看樣式的；控制臺顯示網(wǎng)頁中JS的各種輸出信息，包括錯誤信息、用戶日志等；打開腳本標簽頁，這里面才是我們想要的內(nèi)容。

我在圖中用黃色矩形選中連個控件，左側的下拉列表用來選擇文件，右側的按鈕用來啟動調(diào)試。當點擊啟動調(diào)試后，調(diào)試程序會將窗口最大化，我們在選中的文件中找到需要調(diào)試的位置，點擊左側邊欄添加斷點即可進行調(diào)試。

當有程序運行到我們的斷點處時，就可以進行調(diào)試了。

在這里，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調(diào)試，即單步調(diào)試，會跳入方法、表達式，進行逐語句的跟蹤調(diào)試

在執(zhí)行過程中，如果我們要執(zhí)行即時的代碼，我們就需要在右側的窗格中輸入代碼，按回車即可。

如果要執(zhí)行多行代碼，點擊運行按鈕右側的雙箭頭，就會打開多行模式。我就不再截圖片了。

這種直接在瀏覽器中調(diào)試的方法同樣適用于Google瀏覽器Chrome和FireFox FireDebug，只不過在細枝末葉上面有些不同罷了，主體的功能都是一樣的。

按F12鍵進入開發(fā)者工具，可以查看源代碼、樣式和js。

點擊Scripts按鈕，可以打開這個調(diào)試窗口，里面包含了網(wǎng)頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。右側有調(diào)試的工具按鈕，不過我不喜歡這些純英文的界面，所以大部分的調(diào)試都還是在IE下進行。并且會在IE下轉(zhuǎn)到VS中。

下面我就介紹如何在VS中調(diào)試我們的JS代碼。

使用debugger關鍵字進行調(diào)試

這種方法很簡單，我們只需要在進行調(diào)試的地方加入debugger關鍵字，然后當瀏覽器運行到這個關鍵字的時候，就會提示是否打開調(diào)試，我們選擇是就可以了。這種調(diào)試可以選擇調(diào)試工具，是新打開vs還是在現(xiàn)有的VS中調(diào)試，都可以選擇，個人比較喜歡這中調(diào)試方式。