Is it possible to work in Chrome developer tools with less files?

Question

Working on the mobile theme for Oxid eshop. I‘m having difficulties to set up a grunt configuration to compile the less files together with a sourcemap, so that I could work with Chrome developer tools. I have latest versions of grunt and npm modules. My Weserver for testing is XAMPP on Windows7.

The File structure (relevant part only)

out
-mobile
--src
---css
---less

As you can see the magic happens in out/mobile/src/less and out/mobile/src/css.

My Gruntfile.js: The less part looks like so:

// Compile specified less files
        less: {
            compile: {
                options: {
                    // These paths are searched for @imports
                    paths: ["out/mobile/src/less"],
                    sourceMap: true,
                    sourceMapFilename: 'out/mobile/src/css/oxid.css.map',
                    sourceMapBasepath: 'out/mobile/src/css',
                },

                files: {
                    // target.css file: source.less file
                    "out/mobile/src/css/oxid.css": "out/mobile/src/less/oxid.less"
                }
            }
        },

Which works: it outputs the css and the souremap.css.map

At the end of generated css file there is

 /*# sourceMappingURL=oxid.css.map */

which looks ok to me

The filepaths in the sourcemap file look like so:

out/mobile/src/less/custom.less

which seems to be ok, too.

Now the chrome devtools ( chromium 31, Chrome 32) files are shown as .less files, not css which is not bad so far. Still when hovering over the filenames the paths are not correct, but something like this:

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

As you can see it ads the less path to the css path which of course can‘t work.

What am I missing? Is there a way to have correct paths? Or is grunt-contrib-less /Chrome dev-tools not capable for this?

Hope for any ideas from the community here. Thank you.

No, I haven't. Still waiting for someone knowing a solution. — Hanna, Jul 11 '14 at 08:04

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

I had the same issue and understand after a bit of digging.

Here is the problem: Chrome actually doesn't know where the real directory is. You should explicitly say that

Ok Chrome here is the directory:

http://localhost/web/out/mobile/src/css/out/mobile/src/less/custom.less

and you don't know what this server path means. Here is the path you should look for it:

c:\out\mobile\src\less\custom.less"

To do this, you should add the less folder to the workspace. Go to sources tab, find the directory like css/out/mobile/src... and right click on it and click add to the workspace. After that, right click one of your less files and click map to the file system resource and you're done. Maybe you might need to refresh page a couple of times because Chrome sometimes can't recognize.

Here is the full tutorial: http://code.tutsplus.com/tutorials/working-with-less-and-the-chrome-devtools--net-36636

Check yourself if you're doing step 1-4 properly.

Is it possible to work in Chrome developer tools with less files?

1 Answers1