本文目錄一覽:
- 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的地方暫停。
原創文章,作者:UWRU,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/133984.html