vscode gulp / grunt script running vscode chrome debugger extension

Question

I am new to vscode and grunt / gulp frameworks and I was wondering, if there is a possible way for your task to do some task ( let say transpile some files, minify some images etc. ) and then access vscode and run the chrome debugger ?

Any advice how I could accomplish that.

Answer 1

It depends on exactly what you mean. It is easy to accomplish the following workflow.

1. Start a task (like browserSync) that watches your file changes and starts a server.

2. Start the chrome debugger extension via a "launch" command in .vscode/launch.json that connects to that same url started in step 1. Something like

   {
       "version": "0.1.0",
       "configurations": [
           {
               "name": "Chrome : Launch with sourcemaps",
               "type": "chrome",
               "request": "launch",
               "url": "http://localhost:3000",
               "webRoot": "${workspaceRoot}",
               "sourceMaps": true,
               "runtimeArgs": [
               "--remote-debugging-port=9222"
               ]
           }
   }
   

3. Your js will stop at your breakpoints and be debuggable now.

4. Make a change to your js and (via your gulp/grunt task watcher) it will be updated in the chrome browser and still be debuggable as before with no need for you to manually reload.

If you need help with the necessary gulp task let me know. But here is an example gulp.js code (I am using gulp4.0 here, it will not work in 3.x!!):

var gulp = require("gulp");
var browserSync = require("browser-sync").create();
var sass = require("gulp-sass");
// var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
// var rename = require("gulp-rename");
var autoprefixer = require("gulp-autoprefixer");
var cleanCSS = require("gulp-clean-css");
var sourcemaps = require("gulp-sourcemaps");
var cached = require("gulp-cached");
var remember = require("gulp-remember");


function serve(done) {

  browserSync.init({
    server: {
      baseDir: "./",
      index: "home.html"
    },
    ghostMode: false
  });
  done();
}

function reload(done) {
  browserSync.reload();
  done();
}

var paths = {
  styles: {
    src: "./scss/*.scss",
    dest: "./css"
  },
  scripts: {
    src: "./js/*.js",
    dest: "./js"
  }
};

function watch() {
  gulp.watch(paths.scripts.src, gulp.series(processJS, reload));
  gulp.watch(paths.styles.src, gulp.series(sass2css, reload));
  gulp.watch("./*.html").on("change", browserSync.reload);
}

var build = gulp.series(serve, watch);

gulp.task("sync", build);

function sass2css() {
  return gulp.src("./scss/*.scss")
    .pipe(cached("removing scss cached"))
    // .pipe(sourcemaps.init())
    .pipe(sass().on("error", sass.logError))
    // .pipe(sourcemaps.write("./css/sourceMaps"))
    .pipe(gulp.dest("./css"));
}

function processJS() {
  return gulp.src("./js/*.js")
    .pipe(sourcemaps.init())
    // .pipe(concat("concat.js"))
    // .pipe(gulp.dest("./concats/"))
    // .pipe(rename({ suffix: ".min" }))
    // .pipe(uglify())
    .pipe(sourcemaps.write("./maps"))
    // .pipe(gulp.dest("./js"));
}

As I have written it, you start the task "sync" by ctr-shift-p : run task and chose sync

Then - assuming you have the chrome debugger extension installed - launch that via the debug icon : chose "Chrome : Launch with sourcemaps" from the dropdown menu : and run it (with the little green arrow to the left of the dropdown menu).

Good luck.

[EDIT starts here].

Since I wrote this answer 2016, vscode has added the ability to launch multiple tasks at once with the compounds key.

{
    "version": "0.1.0",
    "compounds": [
        {
            "name": "Start server and chrome debugger",
            "configurations": ["Gulp sync", "Chrome : Launch with sourcemaps" ]
        }
    ],
    "configurations": [

        {
            "type": "node",
            "request": "launch",
            "name": "Gulp sync",
            "program": "${workspaceFolder}/node_modules/gulp/bin/gulp.js",
            "args": [
                "sync"
            ]
        },
        {
            "name": "Chrome : Launch with sourcemaps",
            // works with or without preLaunchTask
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceRoot}",

            "sourceMaps": true,
            "runtimeArgs": [
              "--remote-debugging-port=9222"
            ]
        }
}

will now run the gulp "sync" task first and then launch Chrome in debug mode.

When I use this I have

 open: false,

in the browserSync options so it doesn't open an additional default browser window (besides chrome which is about to be launched).