wake-up-neo.com

Wie kann ich eine Gulp-Aufgabe debuggen?

Wie debugge ich eine in meinem gulpfile.js definierte Schluckaufgabe mit einem Debugger wie dem Google Chrome-Debugger, indem ich den Code der Aufgabe Zeile für Zeile schrittweise durchschalte?

javascriptnode.jsdebugginggulp
27
user2943490

Mit Node.js Version 6.3 und höher können Sie das Flag --inspect verwenden, wenn Sie Ihre Task ausführen.

So debuggen Sie eine Schluckaufgabe namens css:

  1. Finden Sie heraus, wo sich Ihre ausführbare Datei befindet. Wenn gulp lokal installiert ist, ist dies node_modules/.bin/gulp. Wenn gulp global installiert ist, führen Sie which gulp (Linux/Mac) oder where gulp (Windows) in einem Terminal aus, um es zu finden.

  2. Führen Sie einen dieser Befehle entsprechend Ihrer Version von Node.js aus. Falls erforderlich, ersetzen Sie ./node_modules/.bin/gulp durch den Pfad zu Ihrer Schluckinstallation von Schritt 1.

    • Node.js 6.3+: node --inspect --debug-brk ./node_modules/.bin/gulp css
    • Node.js 7+: node --inspect-brk ./node_modules/.bin/gulp css

  3. Navigieren Sie mit Chrome zu chrome://inspect.

Die Flags --debug-brk (Node.js 6.3+) und --inspect-brk (Node.js 7+) werden verwendet, um die Codeausführung in der ersten Codezeile Ihrer Task anzuhalten. Dadurch haben Sie die Möglichkeit, den Chrome-Debugger zu öffnen und Haltepunkte festzulegen, bevor die Aufgabe abgeschlossen ist.

Wenn Sie nicht möchten, dass der Debugger in der ersten Codezeile angehalten wird, verwenden Sie einfach das Flag --inspect.

Sie können auch die Node.js Inspector Manager (NIM) -Erweiterung für Chrome installieren, um bei Schritt 3 zu helfen. Dadurch wird automatisch eine Chrome-Registerkarte mit dem sofort einsatzbereiten Debugger geöffnet, als Alternative zum manuellen Aufrufen einer URL .

45
user2943490

Wenn Sie Webstorm verwenden, können Sie mit der rechten Maustaste auf die Aufgabe im Gulp-Fenster klicken und Debug auswählen.

 enter image description here

10
Blowsie

Für alle, die VS Code 1.10+ verwenden

  1. Öffnen Sie das Debug-Fenster.
  2. Klicken Sie auf das Einstellungssymbol.
  3. Klicken Sie auf die Schaltfläche Add Configuration .
  4. Wählen Sie Node.js: Gulp Task.

So sollte Ihre launch.json-Datei aussehen.

{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.Microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Gulp task", "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js", "args": [ "yourGulpTaskName" ] } ] }

9
starkm

Wenn Sie gulp-nodemon verwenden, können Sie dies in Ihrer gulpfile ..__ tun, indem Sie die Option execMap übergeben:

gulp.task('default', function() {
    nodemon({
        script: 'server.js',
        ext: 'js',
        execMap: {
            js: "node --inspect"
        }
    })
}

Hoffe das hilft.

4
Avi Y.

Danke user2943490, unter Windows fand ich diese Version für mich geeignet:

node --inspect --debug-brk ./node_modules/gulp/bin/gulp.js --verbose

2
Col Wilson

Die Antwort von @Avi Y hat mir gut gefallen.

gulp.task('nodemon', ['sass'], function(cb) {
var started = false;
    consoleLog('nodemon started');
return nodemon({
    //HERE REMOVE THE COMMENT AT THE BEGINING OF THE LINE YOU NEED
    //exec: 'node --inspect --debug-brk node_modules/gulp/bin/gulp.js', 
    exec: 'node --inspect --debug-brk',
    //exec: 'node --inspect',
    script: path.server,
    ignore: ['*/gulpfile.js', 'node_modules/*'],
    verbose: true
}).on('start', function() {
    if (!started) {
        cb();
        started = true;
    }
}).on('restart', function() {
    consoleLog('nodemon restarted the server');
});});
0
marcdahan