Debug SXA theme

Question

We are running Sitecore 9.1.1 and SXA 1.8.1.

We create theme by using npm command (npm run build). This command does bundling, minification and create a zip file. We import that Zip file into the SXA site via Creative Exchange.

We are facing difficulties in debugging JavaScript because it gets minified. We have to make changes (console.log()) and re-create the theme in order to debug. Is there any way to make JavaScript easier to debug?

Answer 1

Option 1: You can disable minification for debugging.

To change the optimization settings for a specific site:

In the Content Editor, navigate to sitecore/content/<Tenant>/<Site>/Presentation/Page Designs.

In the Asset Optimization section, in the Styles Optimizing Enabled and Scripts Optimizing Enabled fields, to override styles and scripts optimization settings, select:

1. Default – to inherit global settings

2. Yes – to always enable optimization for this site.

3. No – to always disable optimization for this site.

Option 2: Visit the config.js included with the SXA theme. Making the configuration changes below will result in a pre-optimized-min file bundled with the variable/function names intact.

Here are the original minifyOptions provided:

minifyOptions: {
    js: {
        compress: {
            hoist_funs: true,
            passes: 1
        },
        toplevel: false
    },
    css: { compatibility: 'ie8' }
}

Here are the updated minifyOptions:

minifyOptions: {
    js: {
        compress: false,
        mangle: false,
        toplevel: false
    },
    css: { }
}

Note: SXA makes use of the npm-uglify-es and npm-clean-css packages.

For 2nd option follow - How do I disable minification for pre-optimized-min items in my theme?