如何除錯基於 Gulp 的 Node 程式(超級便利)
問題描述
專案採用了 yarn, gulp, 以及其他構建工具。但是在 yarn start
後我們需要除錯程式碼。
準備工作
- chrome 瀏覽器
- 科學上網
- OS X 控制檯
- node 伺服器 application 原始碼
解題過程
修改工程,支援除錯
修改 gulpfile.js:
diff --git a/gulpfile.js b/gulpfile.js
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,6 +6,7 @@ const refresh = require('gulp-livereload');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const babel = require('gulp-babel');
+const sourcemaps = require('gulp-sourcemaps');
const rimraf = require('rimraf');
const webpack = require('webpack-stream');
const { spawn } = require('child_process');
@@ -33,7 +34,9 @@ gulp.task('server', (done) => {
rimraf('./dist/server', () => {
gulp
.src(paths.server, { base: '.' })
+ .pipe(sourcemaps.init())
.pipe(babel())
+ .pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
.on('end', done);
});
@@ -42,7 +45,8 @@ gulp.task('server', (done) => {
// Start express server
gulp.task('serve-dev', (done) => {
if (serverNode) serverNode.kill(); // Kill existing server
- serverNode = spawn('node', ['./dist/bin/www']); // Run server instance
+ serverNode = spawn('node', ['--inspect-brk=0.0.0.0:9229', './dist/bin/www']); // Run server instance
+
// If server shuts down, log an error
serverNode.on('close', (code) => {
if (code === 8) {
修改 package.json:
diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -133,6 +133,7 @@
"gulp-plumber": "^1.2.0",
"gulp-sass": "^3.1.0",
"gulp-util": "^3.0.8",
+ "gulp-sourcemaps": "^2.6.4",
"husky": "^0.14.3",
"jest": "^22.1.1",
"jest-localstorage-mock": "^2.1.0",
安裝 chrome 瀏覽器以及 NiM 外掛
下載安裝 NiM 瀏覽器外掛,或者手動搜尋關鍵字 Node.js V8 –inspector Manager (NiM)。
放在這,他會自動被拉起。
啟動服務
啟動 node 伺服器
yarn start
除錯自動開始了。。。
解釋原理
使 Node Server 支援除錯
帶除錯功能的 node 命令是這樣的:
node --inspect-brk=0.0.0.0:9229 ./dist/bin/www
其中 ./dist/bin/www 是原始碼編譯後的目標入口檔案
這裡的解決方案是在 Gulp Task 中,啟動時直接新增這個引數 --inspect-brk=0.0.0.0:9229
,嘎嘎。
支援 .map 檔案對映babel編譯的原始碼
用到了 gulp-sourcemaps 外掛。
Chrome 作為除錯客戶端
Chrome會自動拉起 NiM 作為除錯介面,因為它會自動監聽 localhost:9229 埠。
更多內容
相關推薦
如何除錯基於 Gulp 的 Node 程式(超級便利)
問題描述 專案採用了 yarn, gulp, 以及其他構建工具。但是在 yarn start 後我們需要除錯程式碼。 準備工作 chrome 瀏覽器 科學上網 OS X 控制檯 node 伺服器 application 原始碼 解題過程 修
MySQL 8.0.12 基於Windows 安裝教程(超級詳細)
MySQL 8.0.12 基於Windows 安裝教程(超級詳細) (一步一步來,裝不了你找我!) 本教程僅適用Windows系統,如果你原本裝了沒裝上,一定要先刪除原本的資料庫,執行:mysqld --remove mysql,然後在看我的帖子! 第一步:到MySQL官網下
spark遠端debug之除錯spark on yarn 程式(基於CDH平臺,1.6.0版本)
簡介 由於spark有多種執行模式,遠端除錯的時候,雖然大體步驟相同,但是還是有小部分需要注意的地方,這裡記錄一下除錯執行在spark on yarn模式下的程式。 環境準備 需要完好的Hadoop,spark叢集,以便於提交spark on yarn程式。我這裡是基
微信小程式連線圖靈API實現智慧聊天(超級簡單)
小程式的demo.wxml <view class='top'>{{tittle}}</view> <view class='que' > <block wx:for="{{syas}}" wx:for-item="it
基於C/S模式的簡單聊天程式(伺服器篇)
上篇介紹了客戶端的寫法,這一篇介紹伺服器的寫法。 伺服器的功能是:接收來自客戶端的訊息,然後將訊息轉發給當前連線的所有使用者。這裡一個困擾我許久的地方是如何儲存所有使用者的地址(套接字),找了許久我找到了一種變長陣列的資料結構Vector,用size()來獲取長
基於STM32L151//STM32F407的矩陣鍵盤程式(不規則介面):
void KeyPress(void){ int KeyValues; while(1) { if(GPIO_ReadInputDataBit(GPIOA,GPIO_Pin_11)||GPIO_ReadInputDataBit(GPIOB,GPIO_Pin_5)||GPIO_
Linux系統下除錯 C語言程式(使用gdb)
問題描述:Linux 系統下用C語言寫 的指令碼程式,程式執行時出現未知錯誤需要除錯找出問題所在地。(阿里雲Ubuntu系統的伺服器)。 解決方法:使用 gdb工具在終端視窗中除錯 C檔案。 具體方法: (1)安裝 gdb sudo apt-get install
基於Taro與typescript開發的網易雲音樂小程式(持續更新)
基於Taro與網易雲音樂api開發,技術棧主要是:typescript+taro+taro-ui+redux,目前主要是著重小程式端的展示,主要也是藉此專案強化下上述幾個技術棧的使用,通過這個專案也可以幫助你快速使用Taro開發一個屬於你自己的小程式~ github地址:taro-music,感興趣的話可
nsa工程式(fb.py): perl6調用並修改IP
!= -1 分享 data swa .py ip地址 rgs log use v6; if (@*ARGS != 1) {say ‘Use:scan.p6 ip‘;exit;} my $check_ip = @*ARGS[0]; $check_ip = ‘<val
android與C# WebService基於ksoap通信(C#篇)
ldo art fadein length col scripts append hid ldoc 1.打開VS 2013新建項目>>ASP.NET空WEB應用程序(我用的是.net 4.0) 2.在剛建立的項目上加入新建項(Web
用JS獲取地址欄參數的方法(超級簡單)
api dex document keyword bstr 網絡資源 靜態 sca 返回 方法一:采用正則表達式獲取地址欄參數:( 強烈推薦,既實用又方便!) function GetQueryString(name) { var
Mysql主從配置(超級簡單)
配置 ges ide wait mas 建立 slave end event fec 1、準備(版本和數據保持一致):主服務器 192.168.2.41(主)從服務器 192.168.2.42(從) 2、修改主服務器master: #vi my.cnf [mysqld
清華大學視頻課件:基於Linux的C++(自主模式)
清華大學 視頻課件 基於linux的c++基於Linux的C++(自主模式)課程簡介Linux操作系統開源的特性使得其獲得越來越重要的地位,而Linux系統編程也向C++程序設計者提出了更高的要求。本課程由C/C++語言的共性與特性出發,在深入學習程序設計語言的基礎上,進一步強調程序設計語言的適用性,並與Li
區塊鏈之Hyperledger(超級賬本)Fabric v1.0 的環境搭建(更新)
mirror linu stat iyu wget glob 保存 url oba 參考鏈接:https://blog.csdn.net/so5418418/article/details/78355868 https://blog.csdn.net/wgh101539
在服務器上搭建多個WordPress博客網站教程(超級詳細)
direct red cat 解壓 1.4 數據庫 ctrl+c reg reserve 實驗準備 一臺阿裏雲服務器二個域名(IP與域名已經建立解析關系)Linux關於web架構的知識 實驗步驟 1.用crt遠程登錄阿裏雲服務器 2.安裝nginx,mysql,php 建
將MWeb的文章發布到自己做的網站(超級詳細)
1.將MWeb裏的文章整理分類(一個條理性的分類是網站成功的第一步) 2.雙擊鼠標你所有發布到網上的內容跟目錄 3.編輯靜態網站配置 模板選擇 MWeb-Found 支持markdown格式 所以在網站上顯示markdown的格式 網站名稱取你想要的名字,我取“上古傑作” 網站網址可以隨便取一個不重要
知名APP市場總監教你:如何策劃高效的市場推廣運營方案(超級乾貨)
近幾年移動網際網路飛速發展,PC端流量已經慢慢往移動端流量轉移,移動互聯趨勢銳不可當,各種不同網際網路型別企業已經為移動端專門開闢獨立部門運營。以下就從移動網際網路市場總監崗位出發,從幾個方面來闡述移動網際網路部門如何制定一份運營推廣策劃案,至於關於移動網際網路,移動電商是大趨勢這些虛
基於Apache POI匯出(百萬級)大資料量Excel的實現
POI匯出大資料量excel (注:專案原始碼及後續更新請點選) 1、ExcelUtils類: package Utils; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObje
畢向東—Java基礎知識總結(超級經典)
Java基礎知識總結(超級經典) 寫程式碼: 1,明確需求。我要做什麼? 2,分析思路。我要怎麼做?1,2,3。 3,確定步驟。每一個思路部分用到哪些語句,方法,和物件。 4,程式碼實現。用具體的java語言程式碼把思路體現出來。 &nbs
S2.1 修復影象小程式(簡單版)
用OpenCV自帶的inpaint()演示 CV_EXPORTS_W void inpaint( InputArray src, InputArray inpaintMask, OutputArray dst, double inpaintRad