使用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，或許你也會愛上它。