Open Bug 1425005 Opened 7 years ago Updated 2 years ago

SASS /css - view original sources

Categories

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

Product:
DevTools
Component:
Inspector: Rules
Version:
57 Branch
Platform:
x86
Windows 10
Type:
enhancement

Tracking

(Not tracked)

Status:
REOPENED

People

(Reporter: sd, Unassigned)

References

(Blocks 1 open bug)

Details

(Whiteboard: [specification][type:bug][dt-q])

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.
sd, if this is a public website, please share the URL. If not, can you attached a screenshot showing the red bar?
Component: Editing → Developer Tools: CSS Rules Inspector
Flags: needinfo?(sd)
OS: Other → Windows 10
Product: Mozilla Developer Network → Firefox
Hardware: All → x86
Version: unspecified → 57 Branch
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.
Blocks: source-maps
Priority: -- → P4
Product: Firefox → DevTools
Giving up on more info from reporter. I'd support closing.
Flags: needinfo?(sd)

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.

Status: UNCONFIRMED → RESOLVED
Closed: 6 years ago
Resolution: --- → INCOMPLETE
Status: RESOLVED → REOPENED
Ever confirmed: true
Resolution: INCOMPLETE → ---

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

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

Flags: needinfo?(florens)

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

Flags: needinfo?(florens)
Priority: P4 → P3
Whiteboard: [specification][type:bug] → [specification][type:bug][dt-q]

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.

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.