webstorm調試node程式的方法介紹（圖文）

這篇文章帶給大家的內容是關於webstorm調試node程式的方法介紹（圖文），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

前言

相信大家接觸過不少node程式碼了，如果你應用的比較初級或針對你的專案不需要接觸過深的node程式碼，也許你只需要簡單的console.log('your variable')就完全滿足你的需要了。如果你應用node比較深入，想要調試（debug）之，我想你應該接觸過node-inspector，大致用法流程，簡單如下——

1.安装：npm install -g node-inspector
2.启动debug模式（单独命令行）：
    node-debug &（该命令默认8080端口）
    node-debug --web-port 1984 （定义任意端口）
3.访问chrome debug devTools
　　路径如：http://127.0.0.1:1984/?ws=127.0.0.1:1984&port=5858
4.启动gulp或者grunt服务（具有gulp或者grunt任务时）
　　node --debug-brk $(which grunt) server （这种模式使用在第一次初始化执行的代码）
　　node --debug $(which grunt) server（这种模式使用在初始化之后监听的node代码）

調試面板與chrome developer tools基本一致，很熟悉，知道怎麼使用chrome的，都知道怎麼玩兒好它，沒什麼學習成本。

在這裡，主要介紹一下使用webstorm去調試node代碼，之前在網上各種搜索了一番，不是很可靠，所以，自己多做了些嘗試與思考，在這兒匯總總結，希望可以幫助使用webstorm的同學。

如果你不知道webstorm，好吧，看看官方介紹吧。對於編輯器的選擇，每個人都有不同觀點，在此不討論。只是個人用過eclipse（aptana）、sublime text、webstorm，一步步小小進階，便對webstorm愛不釋手了，功能非常強大，整合度確實比較高。基本的用法有機會再詳細討論，這裡只介紹如果調試node程式。

如果你有玩過java，使用eclipse調試起來，確實方便。或者你玩兒php，相信phpstorm調試php程式碼也非常不錯。如果有個IDE同樣能夠調試Node，那就太讚了。沒錯，一個webstorm搞定這些。

主要依照以下目錄介紹—

1.调试nodejs程序——常规用法（run/debug模式）、调试面板等介绍
2.调试gulp/grunt
3.调试web应用

1.偵錯nodejs程式

如下圖—

可以看到在23行打了一個斷點。想要斷點起作用，那麼需要對該文件做debug配置——

Run模式，直接運行該文件，不會對斷點起作用，此時，可以透過打日誌（console.log）的方式進行調試，它會順序執行該js文件，並不需要有入口方法或者入口類等等（不同於java）。

接下來可進行設定－

點選「Debug」之後，會看到－

就可以看到，程式碼debug於23行了。同時在下方的Debug面板中，能夠看到Debug toolbar和Stepping toolbar，至於兩個toolbar的說明，看看官方IntelliJ IDEA的說明即可，附上連結地址：http://www.jetbrains.com/idea /help/debug-tool-window.html

啟動debug，更方便的方式，就是該檔案右鍵後，選在debug即可。看下圖－

以上，可以偵錯簡單的node程式碼，操作很簡單，也很方便。接下來，看看如何調試gulp任務（grunt類似，就不列舉了）。

2. 偵錯gulp

在對應的gulpfile.js檔案上面，右鍵即可，如下圖—

選擇「Create 'clean'」用來新增設定並啟動debug；若選擇「Debug 'clean'」可以直接進行偵錯。

如果你的任務並沒有在gulpfile.js檔案中聲明，同樣可以開啟配置對話框進行配置，如下：

注意在gulpfile. js內部進行操作，它需要載入所有的任務名稱，這樣調試才會有效。會看到調試頁面如下——

如上圖，我們看見了程式走到50行斷點處，承接以上，繼續說一下如何調試web應用。

3.調試web應用

如上圖，我們已完成gulp任務的斷點調試的配置（針對非gulp任務的普通node程序，同樣如是），當web進行訪問時，自然會再對應斷點處停下，如——

也可以看到對應瀏覽器一直處於載入狀態，如下圖—

如果想要對request物件中傳遞的參數進行查看的話，如——

OK，調試web應用介紹到這兒。

從各個應用程式分類（node普通程式調試、gulp/grunt任務調試、web調試等）的角度，對應的調試的配置及方法介紹到這兒。比較簡單、便捷。

以上是webstorm調試node程式的方法介紹（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！