It depends on what you mean. Easy to complete next workflow.
- Run a task (e.g. browserSync) that tracks the changes to your file and starts the server.
Launch the chrome debugger extension using the “run” command in .vscode / launch.json, which connects to the same URL that you 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" ] } }
Your js will stop at your breakpoints and will now be debugged.
- Make changes to js and (through your w820> / grunt task watcher) it will be updated in the Chrome browser and will still be debugged, as before, without the need to manually reboot.
If you need help with the necessary gulp task, let me know. But here is the gulp.js code example (here I use gulp4.0 , 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 wrote, you start the synchronization task using the ctr-shift-p: run command and select sync
Then - if you have the chrome debugger extension installed - launch it using the debug icon: select "Chrome: Launch with sourcemaps" from the drop-down menu and launch it (with a small green arrow to the left of the drop-down menu).
Good luck.
[EDIT starts here].
Since I wrote this answer in 2016, vscode added the ability to run multiple tasks at once using the connect 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, and then launch Chrome in debug mode.
When I use it, I
open: false,
in the Sync browser settings so that it does not open an additional browser window by default (except for the chrome that should be running).