1425005 - SASS /css - view original sources

Status: REOPENED

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[sd]

What did you do?
================
1. firefox developer 57.0.2 (64-bit)
2. select some text on my webpage right click and choose  inspect element  
3. under the rules tab in the inspector if i right click anywhere as documented  and choose  show "orginal sources" because i want to see and edit my scss  files locally. 

What happened?
==============
it says  stylesheet could not be loaded. Red bar at top.

What should have happened?
==========================
i should be able to see the stylesheet original scss file under the tab of the inspector  and edit it etc  or be taken to the line number of the scss file so i know where to edit.

Is there anything else we should know?
======================================
NB: the stylesheet itself is being loaded ..  

The browser inspector just doesn't when i choose  show original sources. 

I've used a different browser for this function ie  chrome and that works..
hence i feel its something firefox inspector does differently.

I really prefer firefox  for debugging my webpages.

I'm thinking to myself 

Is it because the stylesheet contains fontface?
Is it because I have line numbers enabled?
Is it because I have debugInfo enabled?





Extract from Grunt file

sass: {
            dev: {
                options: {
                    style: 'expanded',
                    sourcemap: 'auto',
                    trace: false,
                    debugInfo: false,
                    lineNumbers: true,
                },
                files: {
                    'compiled/styles-human.css': 'sass/styles.scss',
                }
            },


I've never 100% found the solution or remember it (until just now - typically)...as to why i can't use firefox to debug my stylesheets.
Even if i just do a sass compile of a standard build of bootstrap for example.


if i set lineNumbers to false in my grunt file options for the compiling of the stylesheet.. Firefox  loads the stylesheet and works as expected.

Should i not be compiling with linenumber conmments? is that not supported, or is it to do with the length of the stylesheet.

Comment 1

[John Whitlock [:jwhitlock]]

sd, if this is a public website, please share the URL. If not, can you attached a screenshot showing the red bar?

Comment 2

[Tom Tromey :tromey]

Recent versions (not sure if this started in 57 or 58) will show a more detailed error message
in the console when source mapping fails.  That information would be interesting.
If your site isn't public, another thing to do would be to look at the source map examples
here: https://github.com/tromey/source-map-examples
... and see if it's possible to modify one of them to show the problem.

Comment 3

[John Whitlock [:jwhitlock]]

Giving up on more info from reporter. I'd support closing.

Comment 4

[Florens Verschelde :fvsch]

Closing because we're missing a test case or public website.
Bug reporter mentioned "my webpage" but the domain in the user's email now points at a parked domain.

Please reopen if you can provide more information.

Comment 5

[Andrei Petcu]

Can we please re-open this? I just made a project to reproduce it with :D
Video https://vimeo.com/332627353
Demo site https://andreicristianpetcu-angular-hello-world.glitch.me/
Glitch https://glitch.com/~andreicristianpetcu-angular-hello-world
Github https://github.com/andreicristianpetcu/angular-hello-world

Comment 6

[Andrei Petcu]

Hmmmm reporter wanted SASS source mappings. My use case has SCSS. It should be the same from a source map point of view, right?

Comment 7

[Andrei Petcu]

Is the use case I made good?
need to refresh the page a few times for glitch to load

Comment 8

[Martin Balfanz [:mbalfanz]]

Thanks for providing the testcase! I can reproduce the issue now.

Comment 9

[Andrei Petcu]

Another affected user https://discourse.mozilla.org/t/finding-sass-sources/47220

Comment 10

[steve]

I can add some details here, so we don't need to reference other threads. I'm currently using FF 70.0.1 (64-bit) on Linux Mint 18.3. The issue specifically is with sass sourcemaps, which are generated with gulp sourcemaps usually like this:

gulp.task('dev:styles', function() {    
  return gulp.src(basePaths.css_src)    
  .pipe(maps.init())    
  .pipe(    
    $.sass({    
      sourceComments: 'map',    
      sourceMap: 'sass',    
      sourceMap: basePaths.css,    
      outputStyle: 'nested',    
      includePaths: sassPaths    
    })    
    .on('error', $.sass.logError)    
  )    
  .pipe(maps.write())    
  .pipe(gulp.dest(basePaths.css_dist));    
}); 

Using Chromium (!) inspector I can see the original sass file sources; using Firefox I can't. Since I don't use Chromium for anything else, I'd like to figure out what has happened to Firefox, which has worked in the past. I wish I could pin the change to a version number, I really can't remember when I started noticing this issue.