web essentials browser link not working in asp mvc 6 project

Question

I'm trying to get browser link working so I can use web essentials toolbar in the browser. I'd expect to see some code injected at the bottom of the page source for browser link like in ASP.NET 4 projects but this doesnt seem to be the case with ASP.NET 5.

Has anyone else managed to get this working? Thanks in advanced for any help.

I'm using visual studio 2015 update 1

I've tried running in admin mode and I've turned firewall off but still no connections in browser link in visual studio when running in debug mode.

Edit

This method is definitely being called

app.UseBrowserLink();

This nuget package is definitely refereced Microsoft.VisualStudio.Web.BrowserLink.Loader

I've tried re-installing asp.net 5 rc1 and visual studio 2015 pro as well as using visual studio community which doesnt work either.

Ive tried reinstalling IIS Express 10 and 8 which also doesn't work.

This is beginning to be a real pain. Using the F12 in the browser does the job but its really slow and tedious

if anyone can provide a suggestion of something to try to get this working that would be great. I feel i've exhausted all options.

Here is my project.json:

{
  "userSecretsId": "aspnet5-BusiHub.Web-ce0683d8-2598-4feb-99b6-82d6cf4e8028",
  "version": "1.0.0-*",
  "compilationOptions": {
    "emitEntryPoint": true
  },

  "dependencies": {
    "EntityFramework.Commands": "7.0.0-rc1-final",
    "EntityFramework.MicrosoftSqlServer": "7.0.0-rc1-final",
    "Microsoft.AspNet.Authentication.Cookies": "1.0.0-rc1-final",
    "Microsoft.AspNet.Diagnostics.Entity": "7.0.0-rc1-final",
    "Microsoft.AspNet.Identity.EntityFramework": "3.0.0-rc1-final",
    "Microsoft.AspNet.IISPlatformHandler": "1.0.0-rc1-final",
    "Microsoft.AspNet.Loader.IIS": "1.0.0-beta7",
    "Microsoft.AspNet.Loader.IIS.Interop": "1.0.0-beta7",
    "Microsoft.AspNet.Mvc": "6.0.0-rc1-final",
    "Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-rc1-final",
    "Microsoft.AspNet.Server.Kestrel": "1.0.0-rc1-final",
    "Microsoft.AspNet.StaticFiles": "1.0.0-rc1-final",
    "Microsoft.AspNet.Tooling.Razor": "1.0.0-rc1-final",
    "Microsoft.AspNet.WebApi": "5.2.3",
    "Microsoft.Extensions.CodeGenerators.Mvc": "1.0.0-rc1-final",
    "Microsoft.Extensions.Configuration.FileProviderExtensions": "1.0.0-rc1-final",
    "Microsoft.Extensions.Configuration.Json": "1.0.0-rc1-final",
    "Microsoft.Extensions.Configuration.UserSecrets": "1.0.0-rc1-final",
    "Microsoft.Extensions.Logging": "1.0.0-rc1-final",
    "Microsoft.Extensions.Logging.Console": "1.0.0-rc1-final",
    "Microsoft.Extensions.Logging.Debug": "1.0.0-rc1-final",
    "Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.0.0-rc1-final",
    "System.Web.Optimization.Less": "1.3.4"
  },

  "commands": {
    "web": "Microsoft.AspNet.Server.Kestrel",
    "ef": "EntityFramework.Commands"
  },

  "frameworks": {
    "dnx451": {
      "frameworkAssemblies": { }
    }
  },

  "exclude": [
    "wwwroot",
    "node_modules"
  ],

  "publishExclude": [
    "**.user",
    "**.vspscc"
  ],

  "scripts": {
    "prepublish": [ "npm install", "bower install", "gulp clean", "gulp min" ]
  }
}

Here is my startup.cs

public class Startup
{
    public Startup(IHostingEnvironment env)
    {
        // Set up configuration sources.
        var builder = new ConfigurationBuilder()
            .AddJsonFile("appsettings.json")
            .AddJsonFile($"appsettings.{env.EnvironmentName}.json", optional: true);

        if (env.IsDevelopment())
        {
            // For more details on using the user secret store see http://go.microsoft.com/fwlink/?LinkID=532709
            builder.AddUserSecrets();
        }

        builder.AddEnvironmentVariables();
        Configuration = builder.Build();
    }

    public IConfigurationRoot Configuration { get; set; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        // Add framework services.
        services.AddEntityFramework()
            .AddSqlServer()
            .AddDbContext<ApplicationDbContext>(options =>
                options.UseSqlServer(Configuration["Data:DefaultConnection:ConnectionString"]));

        services.AddIdentity<ApplicationUser, IdentityRole>()
            .AddEntityFrameworkStores<ApplicationDbContext>()
            .AddDefaultTokenProviders();

        services.AddMvc();

        // Add application services.
        services.AddTransient<IEmailSender, AuthMessageSender>();
        services.AddTransient<ISmsSender, AuthMessageSender>();

        services.AddTransient<ApplicationDbContextInitializer>();
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public async void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory, ApplicationDbContextInitializer dbContextInitializer)
    {
        loggerFactory.AddConsole(Configuration.GetSection("Logging"));
        loggerFactory.AddDebug();

        if (env.IsDevelopment())
        {
            // Allow updates to your files in Visual Studio to be shown in the browser. You can use the Refresh 
            // browser link button in the Visual Studio toolbar or Ctrl+Alt+Enter to refresh the browser.
            app.UseBrowserLink();

            app.UseDeveloperExceptionPage();
            app.UseDatabaseErrorPage();
        }
        else
        {
            app.UseExceptionHandler("/Home/Error");

            // For more details on creating database during deployment see http://go.microsoft.com/fwlink/?LinkID=615859
            try
            {
                using (var serviceScope = app.ApplicationServices.GetRequiredService<IServiceScopeFactory>()
                    .CreateScope())
                {
                    serviceScope.ServiceProvider.GetService<ApplicationDbContext>()
                         .Database.Migrate();
                }
            }
            catch { }
        }

        app.UseIISPlatformHandler(options => options.AuthenticationDescriptions.Clear());

        app.UseStaticFiles();

        app.UseIdentity();

        // To configure external authentication please see http://go.microsoft.com/fwlink/?LinkID=532715

        app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });

        // Seed the database with sample data - admin roles, admin users etc
        await dbContextInitializer.InitializeDataAsync();
    }

    // Entry point for the application.
    public static void Main(string[] args) => WebApplication.Run<Startup>(args);
}

Update

I've installed livereload plugin for chrome and configured livereload in gulp as suggested in comment below by vendettamit. Chrome browser is now updating when I modify my CSS/Less files. I'm still lacking the web essentials design and inspect tools due to browser link not working but I hope this will change in future updates to ASP.NET framework and/or visual studio.

my script for gulp if anyone stumbles across this same issue:

    /// <binding BeforeBuild='min, less' Clean='clean' />
"use strict";

var gulp = require("gulp"),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    cssmin = require("gulp-cssmin"),
    uglify = require("gulp-uglify"),
    less = require("gulp-less"),
    livereload = require("gulp-livereload");

var project = require('./project.json');

var paths = {
    webroot: "./wwwroot/"
};

paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.css = paths.webroot + "css/**/*.css";
paths.minCss = paths.webroot + "css/**/*.min.css";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.concatCssDest = paths.webroot + "css/site.min.css";

gulp.task("clean:js", function (cb) {
    rimraf(paths.webroot + "/js/site.min.js", cb);
    rimraf(paths.webroot + "/js/site.js", cb);
});

gulp.task("clean:css", function (cb) {
    rimraf(paths.webroot + "/css/site.min.css", cb);
    rimraf(paths.webroot + "/css/site.css", cb);
});

gulp.task("clean", ["clean:js", "clean:css"]);

gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

gulp.task("min:css", function () {
    return gulp.src([paths.css, "!" + paths.minCss])
        .pipe(concat(paths.concatCssDest))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
});

gulp.task("min", ["min:js", "min:css"]);

gulp.task("less", ["clean:css"], function () {
    return gulp.src('Styles/*.less')
        .pipe(concat('site.less'))
        .pipe(less())
        .pipe(gulp.dest(paths.webroot + '/css'))
        .pipe(livereload());
});

gulp.task("scripts", ["clean:js"], function() {
    return gulp.src('Scripts/*.js')
        .pipe(concat('site.js'))
        .pipe(gulp.dest(paths.webroot + '/js'));
});

gulp.task("all", ["less", "scripts"]);

gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('styles/*less', ['less']);
});

Answer 1

I'm not sure if Live reload is shipped with RC version. There was an issue addressed similar problem with Browser link. Mean while you can try this chrome plugin for live reload.

You can also try the given solution here but looks like it's manual refresh.