Source map is absolute path but Chrome DevTool assumes it's a URL

Question

I am using LESS compiler via a gulp-less in my gulpjs build. I have enabled sourceMap generation, and it kind of works, the proper file names and line numbers are there.

The gulp line that generates LESS with source maps is very straight-forward:

var less = require('gulp-less');

// [...]

gulp.src('web/css/**/*.less')
    .pipe(less({
        sourceMap: true
    }))
    .pipe(gulp.dest('dist/css'));

The only problem is that the source map contains a URL to the original .less file and it is generated as an absolute path to my file system, e.g. /Users/myuser/projects/project/web/css/myfile.less.

During development, I serve the site via Apache. When I open the site with Chrome DevTools, I can inspect elements, and the source map is working because I can see the myfile.less including correct line numbers on the Styles panel. However, Chrome is trying to load the less file, and it is using the full path is the sourcemap output but assuming it's a relative url to my site, so it tries to load http://localhost/Users/myuser/projects/project/web/css/myfile.less which doesn't exists.

I tried using workspaces to fix it, but didn't really manage. Is there something wrong in this setup? Am I missing something?

Answer 1

I think you're missing these final steps:

1. Create a workspace for your site. Point Chrome to your site's root directory on your system.
2. Right-click on a source-mapped less file in the Sources panel, then select 'Map to File System Resource...'. Select the less source file on filesystem.

Reload the dev tools (you'll get a prompt) and you should be good. Now, when you click on the foo.less:45 in the Styles panel, you should be brought to that spot in foo.less. Now that you've setup the workspace, if you save your changes in the dev tools, it will persist to the source less file. Nice!

Note there's a pretty big bug with Chrome which you'll probably notice right away. When you go to add style rules via the dev tools, the source mapping gets busted: https://github.com/less/less.js/issues/1050#issuecomment-26195595

Let me know if this helps. I can post screenshots later, too, if needed.