Блог

Как мне отладить задачу gulp, определенную в my gulpfile.js , с помощью отладчика, такого как отладчик Google Chrome, пошагово просматривая код задачи построчно?

С Node.js версия 6.3 вы можете использовать этот --inspect флаг при выполнении своей задачи.

Для отладки задачи gulp с именем css :

1. Узнайте, где находится ваш исполняемый файл gulp. Если gulp установлен локально, это будет at node_modules/.bin/gulp . Если gulp установлен глобально, запустите which gulp (Linux / Mac) или where gulp (Windows) в терминале, чтобы найти его.
2. Запустите одну из этих команд в соответствии с вашей версией Node.js . При необходимости ./node_modules/.bin/gulp замените путь к вашей установке gulp с шага 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. Используйте Chrome для просмотра chrome://inspect .

The --debug-brk (Node.js 6.3 ) и --inspect-brk (Node.js 7 ) флаги используются для приостановки выполнения кода в первой строке кода вашей задачи. Это дает вам возможность открыть отладчик Chrome и установить точки останова до завершения задачи.

Если вы не хотите, чтобы отладчик останавливался на первой строке кода, просто используйте --inspect флаг.

Вы также можете установить Node.js Расширение Inspector Manager (NIM) для Chrome, помогающее выполнить шаг 3. Это автоматически откроет вкладку Chrome с готовым к работе отладчиком в качестве альтернативы ручному переходу по URL-адресу.

Для всех, кто использует VS Code 1.10

1. Откройте панель отладки.
2. Нажмите на значок настроек.
3. Нажмите на кнопку Добавить конфигурацию.
4. Выберите Node.js : Задача глотка.

Вот как должен выглядеть ваш файл launch.json.

 {
  // 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"
      ]
    }
  ]
}
 

Если вы используете webstorm, вы можете щелкнуть правой кнопкой мыши задачу на панели gulp и выбрать debug.

Спасибо пользователю 2943490, в Windows я обнаружил, что эта версия работает для меня:

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

Если вы используете gulp-nodemon, вы можете сделать это в своем gulpfile. Просто передайте ему опцию execMap:

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

Надеюсь, это поможет.

Версия (node v8.11.3, npm 6.2.0, gulp 3.9.1)

Windows 10 и git bash

Установить Node.js V8 — диспетчер инспекторов (NiM) и настройка по вашему усмотрению

Попробуйте это:

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

Мне понравился ответ @Avi Y. но я полагаю, что люди оценили бы более полный сценарий :

 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');
});});