Quick tip on how to debug browsersync issues

sage
,
1

This tip may be obvious for many of you, additionally the sage9 browsersync works for 99% of you without any issues.
Nevertheless there are times when it doesn’t so this information may be helpful.

Sage 9 uses browsersync-webpack-plugin which unfortunately have been discontinued and doesn’t have too much of the docs. This plugin is basically a wrapper over the BrowserSync plugin so only problem is to find a way to pass the options to the instance running below.

So for example if you want to debug the connections and proxying of your BS instance then you need to edit webpack.config.watch.js and add following poperties to BrowserSyncPlugin options so it looks like this

    new BrowserSyncPlugin({
        [...],
        advanced: {
            browserSync: {
               logLevel: 'debug',
            },
        },
        [...]
    }),

Ths way you will get such output in the console like:

[BS] [debug] Found a free port: 3000
[BS] [debug] Setting Option: port - 3000

or

[BS] [debug] Proxy running, proxing: https://whatever.test
[BS] [debug] Running mode: PROXY

Here you can find the list of the options you may pass to BS instance, please pay attention to BS version you have in your project → Browsersync options

This might be helpful for anyone of you fighting with the white blank screen on localhost or refresh loops etc.

The topic is much more advanced and there are further steps to debugging your full webpack setup. Nevertheless I hope that this short tip will help someone there.

4 Likes
2

This is discontinued? I can’t find anything about that.

3

Sage9 uses browsersync-webpack-plugin which is a wrapper around the BrowserSync itself.

And according to the author of the plugin (which as I believe is a member of Roots team) the plugin is discontinued -> https://github.com/QWp6t/browsersync-webpack-plugin

You may find some similar plugins to create the wrapper around BS or use BS directly as I do in my project