Front End Web Development Environment with VSCode and Chrome Extensions

I would like to drop in a set of html, css and js files into a directory and open VSCode and be able to push a button run and debug the front end code with the Chrome Developer tools and edit with VSCode.

I haven’t found a simple tutorial to do this. I’m a couple of steps away from a complete solution using gulp-webserver.

I’ve created two launch options

  • “Debug Local WebServer” that starts the server. But opens it up in my default browser (not chrome)
  • “Launch Chrome against localhost” that opens up the code in a chrome browser (but have to run the pervious item first to start the web server).

My launch.json file:

{

    "version": "0.2.0",
    "configurations": [
{
    "type": "node",
    "request": "launch",
    "name": "Debug Local Webserver",
    "program": "${workspaceRoot}/node_modules/gulp/bin/gulp.js",
    "args": [
        "webserver"
    ]
},
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

My gulpfile.js

var gulp = require('gulp'),
webserver = require('gulp-webserver');
gulp.task('default', ['webserver']);
gulp.task('webserver', function () {
gulp.src('.')
    .pipe(webserver({
        livereload: true,
        open: true
    }));
});

This approach also required the following gulp installation steps at the command line:
npm install --save-dev gulp-webserver
npm install --save-dev gulp

All a bit of a pain. Once I figure out exactly what to do I would like to make a yeoman configurator.

If all this exist, please point me to it! Can be a different web server, better yet if a web server is not required.

Including bootstrap in Vue.js throwing jQuery not found error

I’m writing a chrome extension using Vue.js, for the interface I need bootstrap. I added the bootstrap like the following but it throwing the the error Uncaught ReferenceError: jQuery is not defined
at Object.dismiss (popup.js:9113)

import jQuery from 'jquery';
import bootstrap from 'bootstrap';
import Vue from 'vue';
import App from '../component/app.vue';

var app=new Vue({
  el:'#app',
  data:{
    name:'vue-chrome-extension'
},
render: h =>h(App)
})

how i can fix this error?

gulp-sourcemaps Generating Incorrect Source Map

I am using Gulp to run build tasks, with the gulpfile.js shown below (require() statements removed for brevity, but I know I’m importing the correct modules). Everything is running swimmingly; there are no errors or warnings of any kind, and all files show up in the correct output folder. However, when I go to debug in Chrome, significant lines appear grayed out (see screenshot below), and I see very strange behavior when setting breakpoints (e.g., the breakpoint actually gets set on a later line). There is clearly some issue with my use of the gulp-sourcemaps module, but I can’t figure out what. All I can figure is that maybe it is not compatible with one of the other modules, but I don’t know which one.

I hate to be that guy that says “solve my bug for me!” but for the life of me I can’t find a solution to this issue. All previous posts seem to deal with Gulp not generating any source map or other build time errors, and that’s not the case here. Any help will be very much appreciated!

// PATHS
var wwwroot = "./wwwroot/";
var src = wwwroot;
var tmp = wwwroot + "tmp/";
var dest = wwwroot + "dist/";
var maps = "maps/";

var js = "js/";
var srcJS = src + js;
var tmpJS = tmp + js;
var destJS = dest + js;

// JAVASCRIPT TASK
gulp.task("convert:scripts", () => {
    // Convert JS files in separate streams
    // Wait for all of these streams by merging them
    return merge(
        convertJS(["derp1.js", "derp2.js"], "derp"),
        convertJS(["herp.js"]),
    );

    // Stream source JS files into the temp directory and transform them
    // Pipe them to the distribution directory, concatenating (if requested) and renaming them in the process
    // Create source maps if we are in the Development environment
    function convertJS(glob, concatName) {
        return pump([
            gulp.src(glob.map(path => srcJS + path), { base: srcJS }),
            gulp.dest(tmpJS),
            isDev() ? sourcemaps.init() : util.noop(),
            eslint({ fix: false }),   // lint
            eslint.format(),
            eslint.failAfterError(),
            concatName ? concat(concatName) : util.noop(),   // yeah, yeah, we're using a truthy value...
            babel(),    // transpile
            uglify(),   // minify
            rename(path => path.extname = ".min.js"),
            isDev() ? sourcemaps.write(maps) : util.noop(),
            gulp.dest(destJS)
        ]);
    }
});

// HELPERS
function isDev() {
    return (util.env.configuration === "debug" || util.env.configuration === undefined) ? true : false;
}

enter image description here

React Developer Tools for Chrome giving warning on minified assets

I have minified my resources using Gulp uglify plugin rather than using webpack’s Uglify plugin as my application is getting bundled by gulp, But when I check react developer tools it is giving error This page is using an unminified build of React , but when i am checking chrome developer tools css and js is minified.

So can this be a bug in React developer tool? As the warning is quite misleading it seems to React developer tool is not checking the actual js or css file for minification, Also I have checked google page speed and it is stating that the assets are minified.

This is the warning message

Minified js