nodejs調試js,nodejs調試 互動式

本文目錄一覽：

• 1、如何使用DevTools調試Nodejs運行的Javascript
• 2、如何調試nodejs
• 3、如何在SubLime里用 Node.js 調試 JavaScript 程序

如何使用DevTools調試Nodejs運行的Javascript

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的：

1、在F12開發人員工具中進行調試

打開IE瀏覽器，按下F12鍵，就會打開開發人員工具，這是IE內置的開發人員開發工具，方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

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

我們看到在這個工具窗口裡面有幾個標籤頁，分別是：HTML、CSS、控制台、腳本、探查器和網路，點開每一個標籤，可以執行相應的任務。

在HTML標籤窗口中，工具欄中的按鈕所執行的操作如下圖：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出信息，包括錯誤信息、用戶日誌等；打開腳本標籤頁，這裡面才是我們想要的內容。

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

當有程序運行到我們的斷點處時，就可以進行調試了：

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

F9：添加/移除 斷點

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

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

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

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

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

按F12鍵進入開發者工具，可以查看源代碼、樣式和js：

點擊Scripts按鈕，可以打開這個調試窗口，裡面包含了網頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。

2、使用debugger關鍵字進行調試

這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

設置以後就可以使用debugger關鍵字進行調試了；進過這樣的設置，我們還可以捕獲到意外的錯誤，進行跟蹤調試。

如何調試nodejs

Node Inspector 是一個可在webkit內核瀏覽器下進行nodejs調試的工具，其界面基本上跟chrome的調試工具一樣，使用非常方便。

首先在全局環境中安裝node inspector

[javascript] view plaincopy

npm install -g node-inspector

安裝完成之後，以調試模式運行需要調試的node代碼，比如

[javascript] view plaincopy

node –debug-brk app.js

這種方式會在代碼運行的時候，強制在第一行添加斷點

這時，會出現「debugger listening on port 5858」的提示

默認的埠是5858，也可以像這樣修改:

node –debug-brk[=3000] app.js

然後，啟動node-inspector，

[javascript] view plaincopy

node-inspector 

（因為之前的nodejs代碼在運行，所以命令行窗口沒辦法輸入新的命令，所以啟動node-inspector需要新打開一個命令行窗口來輸入）

根據提示中的地址，打開

就可以看到，一個模擬Chrome調試窗口的頁面，載入了node中的所有代碼，具體的調試方式，就和Chrome一樣了。

還有一種方式是在代碼中需要添加斷點的地方，加入

[javascript] view plaincopy

debugger；

以下面這種方式運行

[javascript] view plaincopy

node –debug app.js

這樣代碼會運行到需要debugger的地方暫停。

如何在SubLime里用 Node.js 調試 JavaScript 程序

1. 首先到 nodejs.org 下載 Node.js 安裝包並安裝。

2. 打開 Sublime Text 2 編輯器。選擇菜單 Tools — Build System — new Build System…

3. 將文件保存為 JavaScript.sublime-build

4. 文件內容為：

{

“cmd”: [“node”, “$file”],

“file_regex”: “^[ ]*File \”(…*?)\”, line ([0-9]*)”,

“selector”: “source.javascript”

}

5. 重新啟動 Sublime Text 2. 勾選菜單 Tools — Build Syst