CODEWITHSUNDEEP
google-chromesource-mapsgulp-sassgulp-sourcemaps
Unpossible
Unpossible

Reputation: 10697

Sass Sourcemap with Chrome DevTools

We are using gulp-sass to compile our SCSS, and using gulp-sourcemaps to generate sourcemaps in our dev environment:

...
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.init()))
.pipe(plugins.sass({ 
  outputStyle: "nested"
}))
.pipe(plugins.if(IS_DEV, plugins.sourcemaps.write("./")))
...

Sourcemaps get generated, no issues. When inspecting elements in Chrome DevTools, we can see the source SASS definition, but as soon as we modify an attribute value or selection, we lose the sourcemap and are shown the line in the compiled CSS. See screenshots:

Pre-interaction

Post-interaction

Very annoying and nothing we've tried has fixed this. Any suggestions? Note that in Firefox, we do not see the same issue.

Upvotes: 2

Views: 939

Answers (1)

bhavya_w
bhavya_w

Reputation: 10077

Crux : You cannot modify scss rules properties inside the inspect element panel of chrome devtools. However, we can edit the source files (sass/scss) inside source panel of the chrome using chrome workspaces.

I had a the same problem. I had to scratch my head for a whole day to figure it out the problem and make my sass/scss editable in the browser.Here it goes:

1.) Sourcemaps are meant for referencing your source files not editing your source files (sass/scss) so that you can debug your code. i.e we can refer the the exact line which caused our compiled css rule but not edit it

2.) Chrome does it right by immediately replacing your scss rules with compiled css because chrome works with css. It doesn't compile your scss.

Also When you make any change to the css rule, this rule is also modified in the source file (.css ) also in chrome sources tab. That means the changes we make in the inspector are directly mapped with our css files.

For eg: when I change some property in the inspector it is also changed in the css source file.

Initially

  • Inspector

    enter image description here
  • Source File

    enter image description here

After Changing the property

  • Inspector

    enter image description here
  • Source File

    enter image description here

3.) Regarding Firefox, you might be thinking its working in the case of firefox but i think its a bit misleading. Its misleading because firefox doesn't change anything in any source file ( neither css nor scss ) so we don't know what they actually did, whether they actually compiled our scss file or they used css under the hood.

  • When I say source files it means files present in the source panel of the chrome and style editor in the firefox

4.) Finally, If you really want to edit you sass/scss files on the fly in the source panel of the chrome you've got to look into chrome workspaces. But then again you wont be able to make changes to scss rules properties in the inspect elements tab.

** Again, using chrome workspaces doesn;t actually compiles our scss into css in the browser what actually happens is that the browser maps our files ( in source tab ) to system files ( sort of makes the browser our code editor )

Upvotes: 1

Related Questions