nodejs命令行調試程序（nodejs遠程調試）

本文目錄一覽：

• 1、如何調試nodejs
• 2、如何在iis上部署node 調試
• 3、webstorm怎麼啟動nodejs的調試和伺服器
• 4、如何使用DevTools調試Nodejs運行的Javascript
• 5、手把手教你使用nodejs編寫cli(命令行)

如何調試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的地方暫停。

如何在iis上部署node 調試

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的地方暫停。

webstorm怎麼啟動nodejs的調試和伺服器

1.安裝：npm install -g node-inspector

2.啟動debug模式（單獨命令行）：

node-debug （該命令默認8080埠）

node-debug –web-port 1984 （定義任意埠）

3.訪問chrome debug devTools

路徑如：;port=5858

4.啟動gulp或者grunt服務（具有gulp或者grunt任務時）

node –debug-brk $(which grunt) server （這種模式使用在第一次初始化執行的代碼）

node –debug $(which grunt) server（這種模式使用在初始化之後監聽的node代碼）

如何使用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編寫cli(命令行)

前端日常開發中，會遇見各種各樣的cli，比如一行命令幫你打包的webpack，一行命令幫你生成vue項目模板的vue-cli，還有創建react項目的create-react-app等等等等。這些工具極大地方便了我們的日常工作，讓計算機自己去干繁瑣的工作，而我們，就可以節省出大量的時間用於學習、交流、開發、 逛steam 。

但是有時候一些十分特別的需求，我們是找不到適合的cli工具去做的。比如說，你的項目十分龐大，你給項目添加一個新的路由，要經過 創建目錄 – 創建.vue文件 – 更新vue-router的路由列表 這一趟流程，就算快捷鍵創建目錄文件用得再熟悉，也比不過你一行命令來得快，特別是路由目錄嵌套深，.vue文件初始化模板複雜的時候。

所以呢，何不為自己項目寫一個cli？就專門做這些繁瑣的活？

nodejs的cli，本質就是跑node腳本嘛，基本上每位前端er都會：

然後命令行調用

可以做得更逼真一點，我們在package.json裡面的scripts欄位上添加一下腳本名：

然後命令行調用：

但是，看到這裡你肯定會說，人家webpack還有vue-cli都是「有名字」的！什麼 vue-cli init app 、 webpack -p 的，多漂亮，看看這個命令行， node index.js ，還 npm run hello ，誰不會啊，丑不拉幾的，怕又不是來水文章的哦？差評！！

別急啊各位大人，接下來就說說，如何給這個node腳本起個名字。

姑且，先把這個cli的名字命名為 hello-cli ，就是我們能夠在命令行裡面，輸入 hello-cli ，然後它就列印一句 hello world ，沒有 node 也沒有 npm ，就是：

這樣，你的第一個cli腳本就成功安裝了，可以在命令行裡面，直接敲你的cli名字，看看結果輸出吧。

另外，如果你僅希望你的cli腳本僅在項目里執行，則需要在你項目裡面新建一個目錄，重複上述的操作，只是在第三步的時候，不要llink到全局裡面去，而是使用 npm i -D file:你的腳本cli目錄路徑 ，把它當成項目的依賴安裝到node_modules裡面去，如果安裝成功，那麼在項目的package.json你會看到多了一條依賴，這條依賴的值不是版本號，而是你腳本的路徑。然後在node_modules裡面會有一個.bin目錄，裡面就存放著你的可執行文件。

當然，這樣安裝的cli腳本，必須在項目的package.json的scripts欄位上聲明腳本命令，然後通過 npm run 的方式執行。

哦？這樣子使用的話不就回到最最最開始的時候那種原始的 npm run hello 一樣么。

是的，但是有質的區別。使用 node index.js 這種方式調用的話固然簡單靈活，但是嚴重依賴腳本路徑，一旦目錄結構發生變動，寫在scripts的命令就要更改一次；但是使用npm安裝之後，本地的cli腳本就被拉到node_modules裡面，目錄結構變動對其影響不大。其次是不利於分享與發布，如果你想把你的cli腳本發布出去，那麼有一個好聽響亮的名字，比起在說明文檔裡面告訴使用者如何找到你的腳本路徑再用node執行它，簡直好上那麼一萬倍不是么？

這裡也給我們提供了一個cli開發流程思路：

名字有了，輸出也有了，看看我們跟那些大名鼎鼎的cli工具，在形式上還差點啥？對了，人家可以支持不同參數選項的，還可以根據輸入的不同，產生不同的結果。

這樣吧，我們給這個cli加一個功能，既然叫 hello-cli ，那不能只會 hello world 吧，必須要見誰就說 hello 才行：

雖然這個功能很簡單，但是至少也是實現了「根據輸入的不同，產生不同結果」的效果。

命令行上的參數，可以通過 process 這個變數獲取， process 是一個全局對象而不是一個包，不需要通過 require 引入。通過 process 這個對象我們可以拿到當前腳本執行環境等一系列信息，其中就包括命令行的輸入情況，這個信息，保存在 process.argv 這個屬性里。我們可以列印一下：

列印結果：

可以看出，argv是個數組，前兩位是固定的，分別是node程序的路徑和腳本存放的位置，從第三位開始才是額外輸入的內容。那麼實現上面的功能就很簡單了，只要讀取argv數組的第三位，然後輸出出來就可以了。

npm社區中也有一些優秀的命令行參數解析包，比如 yargs ,tj的 commander.js 等等

如果你想使用比較複雜的參數或者命令，建議還是用第三方包比較好，手寫解析太耗精力了。

現在，你可以自由自在的寫你自己的cli腳本了。

如果你希望寫一個項目打完包自動推上git的cli，或者自動從git倉庫裡面拉取項目啟動模板，那麼，你需要通過node的 child_process 模塊開啟子進程，在子進程內調用git命令：

不僅是git命令，包括系統命令、其他cli命令都可以在這裡執行。特別是系統命令，使用系統命令對文件目錄進行操作，效率比fs高到不知道哪裡去了。

社區上也有一些不錯的包，比如阮一峰老師推薦的 shelljs

如果你不那麼希望你的cli用起來那麼「硬核」，希望更人性化一點，比如提供一些友好的輸入、提示啊，給你的輸出加點顏色區分重點啊，寫個簡單的進度條啊等等，那麼你就需要美化一下你的輸出了。

除了顏色這部分，不使用第三方包實現起來非常繁瑣複雜，其他的功能，都可以試試自己寫。

顏色部分使用了第三方包 colors ，這裡就不演示了。

其他都是由nodejs自帶的 readline 模塊實現的。

繪製的思路跟canvas繪製動畫一樣，只不過canvas是清除畫布，而命令行這裡是通過 readline.clearScreenDown 清除輸出。

這樣，一個簡易的，人性化的，帶點點進度條動畫的命令行cli工具就寫好了，你也可以發揮你的想像力，去寫一些更有趣的效果出來。

畢竟我們前端，有瀏覽器我們可以寫動畫，沒了瀏覽器我們一樣可以寫動畫。