使用webstorm調試node程式

標籤：

前言

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

1.安裝：npm install -g node-inspector2.啟動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=58584.啟動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/grunt3.調試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，或許你也會愛上它。

 

使用webstorm調試node程式