問題描述

專案採用了 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 埠。

更多內容