The source map is an absolute path, but Chrome DevTool assumes a URL

Question

I am using the LESS compiler via gulp -less in my gulpjs build. I turned on sourceMap generation and it seems to work, there are correct file names and line numbers.

The gulp line that generates LESS with source maps is very simple:

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 the URL of the source .less file and is generated as an absolute path to my file system, for example. /Users/myuser/projects/project/web/css/myfile.less .

During development, I serve the site through Apache. When I open a site using Chrome DevTools, I can check the elements, and the source map works because I can see myfile.less , including the correct line numbers in the Styles panel. However, Chrome tries to download fewer files, and it uses the full path - this is the output of sourcemap, but provided that it is the relative URL for my site, so it tries to download http://localhost/Users/myuser/projects/project/web/css/myfile.less , which does not exist.

I tried using workspaces to fix this, but I really couldn’t do it. Is there something wrong with this setting? Did I miss something?

Answer 1

I think you are missing these last steps:

• Create a workspace for your site. Point Chrome to the root directory of your site on your system.
• Right-click on a file with a smaller source size in the Sources panel, then select Map to File System Resource .... Select a less file file in the file system.

Reboot the dev tools (you get a hint) and you should be good. Now, when you click on foo.less:45 in the Styles panel, you should get to this place in foo.less . Now that you have set up your workspace, if you save changes to dev tools, it will be saved in a file with fewer files. Nice!

Pay attention to a rather big mistake with Chrome, which you will probably notice right away. When you go on to add style rules through dev tools, the original mapping breaks up: https://github.com/less/less.js/issues/1050#issuecomment-26195595

Let me know if this helps. I can post screenshots later if necessary.

Answer 2

Try using sourceMapRootpath instead of sourceMapBasepath

 gulp.src('web/css/**/*.less') .pipe(less({ sourceMap: true sourceMapRootpath: './my_less_path' })) 

For me, this solution works partly because the files that I import from another smaller number of files (e.g. bower_components /../ grid.less) still have an absolute path. Still unable to find a solution for this. If someone can help, it will be great ... :)

Answer 3

To answer my own question, the correct way to do this is to use gulp-sourcemaps in the gulp channel instead of passing properties to the LESS plugin. So, the following syntax works for me:

 gulp.src('web/css/**/*.less') .pipe(sourcemaps.init()) .pipe(less()) .pipe(sourcemaps.write()) .pipe(gulp.dest('dist/css')); 

Answer 4

I had a similar problem with typescript source maps - the path on the maps would be generated as "../src/file.ts", where src was at the same level as the output directory.
dir |- src/*.ts |- output/*.js

my web server runs right on the output, so chrome tried to download the existing source file from http: //localhost/src/file.ts
my solution was to create a src symlink inside the output folder and now it is happy. not a real “fix”, but solves the problem.

Answer 5

Try the following:

 gulp.src('web/css/**/*.less') .pipe(less({ sourceMap: true sourceMapBasepath: './my_less_path' }))