Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS to Sass Debugging, Best Practices, and Production Debugging in the Browser with Source Maps

Craig Curtis
Craig Curtis
19,985 Points
Posted by Craig Curtis
Craig Curtis
19,985 Points

Chrome on Mac not showing source maps - editing project locally on Sublime

In my settings (now a vertical dot bar, no more gear icon), under Sources, there are only checkboxes for "Enable CSS source maps" and "Auto-reload generated CSS".

After checking these and reloading the browser, after inspecting elements, the DevTools still only show the application.css:XX, not the intended location in the scss files.

I tried Ctrl+C quitting out of Sass, deleting the application.css.map file, recompiling a new one, and starting to sass --watch scss:css again, but to no avail.

I've also googled for similar errors - stack overflow and sitepoint - but to no avail.

*** POSSIBLE REASON **** I'm just viewing the project from my desktop, not from a server

--> Which brings up the next question - what's the easiest way to serve locally. I haven't done this yet. I've tried two npm modules, but failed as well:

https://www.npmjs.com/package/http-server https://github.com/75lb/local-web-server

Docs aren't as noob friendly as I'd hoped.

///////////////////////// FOUND ANSWER AFTER TWEAKING OUT ////////////////////////////

  1. (Have Node installed already)
  2. in the console: npm install http-server -g
  3. go to parent directory of project
  4. in the console: http-server
  5. go to the url: http://127.0.0.1:8080/
  6. have a beer
jamescool
jamescool
44,592 Points

glad you found the answer to this! I was actually experiencing a similar issue this morning.

1 Answer

alexandraz
alexandraz
9,587 Points
alexandraz
alexandraz
9,587 Points

So this only works if the project is on a local server?

jamescool
jamescool
44,592 Points

Yes, I believe so. Once I set up a local server, the .SCSS files were visible in Chrome Dev Tools.