Can't edit styles in Chrome Dev Tools while using Browser-sync

418 views Asked by At

I use the latest Chrome version on Mac (83.0.4103.116), Gulp + Browser-sync. In DevTools, after the Browser-sync applies the changes in style.css and reloads the page, I can't edit any style, it looks like default and blocked: screenshot

It's very strange that when I'm reloading the page manually (Cmd+R), the styles are available for change again till the next Browser-sync reloading. screenshot

I've tried to reload the browser, to uninstall and install Browser-sync again, I didn't change the gulpfile.js.

So I can't even guess what's going wrong. What am I missing?

Gulpfile.js code:

var gulp = require('gulp');
var sass = require('gulp-sass');
var bsync = require('browser-sync').create();


gulp.task('default', function() {
    bsync.init({
        server: ''
    });

gulp.watch('*.html')
    .on('change', bsync.reload);
gulp.watch('sass/**/*.scss')
    .on('change', gulp.series('launch-sass'))    
});

gulp.task('launch-sass', function() {
return gulp.src('./sass/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('./css'))
    .pipe(bsync.stream());
});
0

There are 0 answers