Chrome is not using the generated source map

1

Up until recently the sourcemap was being being picked up by chromedev. I’ve noticed while working on the the project, that sometimes the sourcemaps just doesn’t get picked up. Most of the time I can ignore this, and eventually the problem just magically goes away.

However, presently sourcemap support has failed, and isn’t being restored. The map just isn’t being being picked up.

Here is the relevant part of from my Gruntfile.js

options: {
          compress: false,
          // LESS source map
          // To enable, set sourceMap to true and update sourceMapRootpath based on your install
            sourceMap: true,
            sourceMapFilename: 'assets/css/main.css.map',
            sourceMapRootpath: '/app/themes/mytheme/',
        }

The sourcemap is indeed in the place indicated by sourceMapFileName.
The sourceMapRootpath parameter is correct.

I came across this post: Sourcemap only references main.css (no .less files)`
In my Gruntfile, I seem to have the correct configution for autoprefixer:dev:options:map. As follows:

 map: {
            prev: 'assets/css/'
          }

What could the issue be?

2

So your theme is definitely in /app/themes/mytheme/?

Could also be that you made some local changes. I know that when I first pull up inspector after a page load the source maps work fine, but if I make any local changes to the styles in dev tools the source maps disappear until I refresh the page.

3

Hi cfx.

Yes, the theme is definately in that location.

Regarding local changes: the absence of the mappings in dev tools is unaffected by page reloads.
If I refresh the page or even restart my browser, no mappings can be seen.

Just to be clear: I can see from chromedev’s network pane that the sourcemap is being delivered to the browser. It’s just that the mappings aren’t showing.

This is my full Gruntfile: https://gist.github.com/sunilw/36dbe20fd294a21bcc4b

4

So you’re using Bedrock and have your wp-content contents inside or symlinked to the app dir?

5

Yep, using bedrock.

Complete path looks theme looks like this:
/var/www/mysite/web/app/themes/mytheme

Path to wp-content looks like this:
/var/www/mysite/web/wp/wp-content

I think I might have discovered the problem. There are at least a couple of issues filed against grunt-contrib-less with a topic line similar to this:
“sourceMapFilename does not support compiling multiple Less files”

I did a little testing: In my Gruntfile.js, if I remove instructions for less to compile more then one less file, then chromedev shows me the linenumbers in the one remaining less file.

That issue on github is just over a year old and still unresolved. The other similar issue I found is also about a year old and unresolved.

There may be a workaround. I’m going to experiment with this:

6

Well the obvious workaround is to only have Grunt compile one LESS file and target body classes instead of using multiple LESS files, multiple CSS files, and conditional enqueues.

7

Indeed, that is the way forward.

Thanks cfx.