nodejs串口調試,nodejs開發介面

本文目錄一覽：

• 1、web實現串口調試助手
• 2、如何使用DevTools調試Nodejs運行的Javascript
• 3、nodejs 獲取串口數據
• 4、webstorm怎麼啟動nodejs的調試和伺服器
• 5、如何使用nodejs搭建開發環境
• 6、如何調試nodejs

web實現串口調試助手

最近受朋友之託試圖用web前端實現串口調試助手，一開始覺得不太有可行性，以前用過的串口調試助手都是客戶端程序。覺得瀏覽器怎麼會有調用電腦上的串口的功能呢。後來朋友找了幾個資料給我，說網上有人實現，他看不懂。我看了之後恍然大悟，原來是用node。如此萬能。

node 實現操作串口的模塊是一個 serialport 的模塊，網上一搜有很多好文，此處記錄一下實現過程中遇到的一些問題以及解決方法。

一開始被忽略的問題 ，我把 node 服務搭在自己的伺服器上，後來返回的串口數組全是一堆令我懵逼的數據。後來想起那是 node 讀取了我的

Linux 伺服器的串口，而不是用戶使用的 pc。

由此引出的兩個問題。第一，node 服務必須搭建在用戶使用的 pc 上，因此用戶使用的電腦必須有 node 環境。第二，用戶 pc 一般是 windows 系統， node 的模塊很多在 Linux 上很容易安裝成功，在 Windows 上安裝比較困難。

首先解決的是第二個問題：在Windows上安裝serialport失敗

解決方法： npm install –global –production windows-build-tools

參考鏈接1：

參考鏈接2：

安裝好之後就可以安裝 serialport 模塊了。

解決第一個問題：用戶電腦的 node 環境

解決方法： electron ——使用 JavaScript, HTML 和 CSS 構建跨平台的桌面應用 （官網鏈接： ）（w3c： ）

使用 electron 搭建的桌面應用可以像平常我們使用的 exe 應用程序一樣直接運行，不需要搭建環境。

npm install -g electron-prebuilt //提示electron-prebuilt已經更名為electron

npm install -g electron //安裝失敗

使用淘寶鏡像安裝問題解決： cnpm install -g electron

參考鏈接：

解決方法： npm install -g electron-rebuild

以後每次重新運行 electron . 的時候再執行一次 “./node_modules/.bin/electron-rebuild` 對原生模塊進行rebuild

參考鏈接：

參考鏈接：

cnpm install -g electron-packager //安裝打包工具

electron-packager . 可執行文件的文件名 –win –out 打包成的文件夾名 –arch=x64位還是32位 –version版本號 –overwrite –ignore=node_modules

因為打包的時候執行的命令帶有 –ignore=node_modules , 即不將 node_modules 裡面的依賴包打包，所以在打包後的新文件中，進入resource 目錄會發現 node_modules 是一個空文件夾，所以自然找不到依賴包。如果去掉打包時的命令參數 –ignore=node_modules ,則需要非常長的打包時間。我的解決方法是將原來 node_modules 文件夾中的相關的依賴包文件複製進打包後的 node_modules 中，雖然是一個比較無腦的方法，每次打包都要拖動相關文件進去，不過我備份了一個 node_modules 文件夾，下一次打包後就把備份的 node_modules 直接複製進去。

node 模塊 ccap : 用於生成驗證碼圖片，可以在 express 後台

res.send(圖片) ，前端的 img 的 src設置為請求這個介面。

ccap的用法可以參考鏈接：

如何使用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 獲取串口數據

由於項目要求，項目為（B/S）架構 ，需要在頁面上讀取串口數據，於是就需要nodejs了

使用 nodejs 的一個插件 ：serialport

現在先做個測試demo

1、先建立測試文件夾 

2、在文件夾中安裝serialport ，在文件夾下的 cmd 中輸入

3、可能會出現 一個警告可用忽略

4、安裝後 編寫讀取串口 js 文件 testport.js

5、運行 js 在文件夾下 cmd 中輸入

執行成功：

可能的問題：

問題一： Flie not found

這個是電腦上沒有安裝串口驅動，或者虛擬串口 

可用 虛擬串口程序

建立測試串口

問題二：Port is opening

需要加入 串口屬性 autoOpen：false

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代碼）

如何使用nodejs搭建開發環境

1.安裝NodeJS

1.編譯環境

源代碼編譯器，通常 Unix/Linux平台都自帶了C++的編譯器（GCC/G++）。如果沒有，請通過當前發行版的軟體包安裝工具安裝make，g++這些編譯工具。

Debian/Ubuntu下的工具是apt-get

RedHat/centOS下通過yum命令

Mac OS X下你可能需要安裝xcode來獲得編譯器

2.網路加密

其次，如果你計劃在Node.js中啟用網路加密，OpenSSL的加密庫也是必須的。該加密庫是libssl-dev，可以通過apt-get install libssl-dev等命令安裝。

3.手動編譯

wget

tar zxvf node-v0.6.1.tar.gz

cd node-v0.10.26

./configure

上面幾行命令是通過wget命令下載最新版本的代碼，並解壓之。./configure命令將會檢查環境是否符合Nodejs的編譯需要。

make

make install

2.安裝NPM

1.NPM的全稱是Node Package Manager, 是NodeJs的第三方安裝庫。

curl | sh

curl 是通過curl命令獲取這個安裝shell腳本，按後通過管道符| 將獲取的腳本交由sh命令來執行。

2.更改第三方庫

npm install underscore

underscore@1.2.2 ./node_modules/underscore

由於一些特殊的網路環境，直接通過npm install命令安裝第三方庫的時候，經常會出現卡死的狀態。幸運的是國內CNode社區的@fire9 同學利用空餘時間搭建了一個鏡像的NPM資源庫，伺服器架設在日本，可以繞過某些不必要的網路問題。你可以通過以下這條命令來安裝第三方庫：

npm –registry “

如果你想將它設為默認的資源庫，運行下面這條命令即可：

npm config set registry ” “

通過npm安裝包。安裝好之後會自動被安裝到 /usr/local/bin 目錄下，而相依的函式庫也會自動安裝到 /usr/local/lib/node 目錄下，實在是非常方便。

3.安裝NodeJS調試環境

1.用npm命令安裝全局模式的 node-inspector組件

sudo npm install -g node-inspector

2.更改埠

修改 node-inspector/lib/config.js的埠

』web-port』: {

desc: 『Port to host the inspector』,

convert: conversions.stringToInt,

defaultValue: 6868

},

3.使用

node-inspector啟動一個調試工具

在chrome瀏覽器中輸入打開chrome的調試模式

使用node debug調試nodeJS項目

node –debug-brk=5858 read.js

可以在chrome中查看到調試信息

4.使用Sublime構建NodeJS

設置Sublime的Builder-

Tools – Build System – New Build System

將如下代碼寫入

{

「cmd」: [“/usr/local/bin/node”, 「$file」],

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

「selector」: 「source.javascript」

}

保存為NodeJs.sublime-build文件

如此可以直接使用Com+B來使用nodejs運行程序

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