Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
With source maps, we can use our browser's developer tools to view the original Sass source, instead of the compiled CSS, when debugging styles.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Earlier you may have noticed how Sass
generated a file named application.css.map
0:00
in addition to the compiled CSS, well this
is what's called a source map, and
0:06
Sass created this file to make our lives a
little easier, if and when
0:11
we have to debug styles in the browser
using something like Chrome DevTools.
0:15
So with source maps, we're able to see the
original Sass or
0:19
SCSS source, instead of the compiled CSS,
while debugging in the browser,
0:23
and we'll see how that works in just a
bit.
0:28
So if we open up and take a look at our
CSS output,
0:30
you'll notice a comment added at the very
bottom of the style sheet.
0:34
Now, this isn't an error as some may think
it is.
0:38
This just means that we're all set up with
a source map to our CSS.
0:41
And that source map regenerates every time
our Sass files are compiled into CSS.
0:45
So the next thing we need to do to take
advantage of source maps
0:51
is make sure that our browser knows to
look for them.
0:54
So now we'll to enable source maps in the
browser.
0:58
Keep in mind that Chrome, Firefox and
Safari all have support for source maps.
1:02
Once again we're gonna be using Chrome
here, but I've also posted source map
1:07
instructions for Firefox and Safari in the
teacher's notes.
1:11
So, to enable source maps in Chrome, we'll
need to open up Chrome DevTools by
1:16
clicking the top right menu then scrolling
down to More Tools and
1:20
right below that we'll need to click
Developer Tools.
1:25
Once we have Chrome Dev ools open, we'll
need to open up the Settings panel, and
1:29
we can do that by clicking the sprocket
icon in the top right corner.
1:34
And now, in the general settings, we'll
need to scroll down to sources,
1:39
and make sure we check enable CSS source
maps, and
1:44
right below that, make sure we have auto
reload generated CSS checked.
1:48
Right, so now we can close our settings
panel, and we're all set.
1:53
So if we actually tried debugging the CSS
running in the browser with DevTools,
1:58
that could get pretty tricky and
2:03
time consuming because of the differences
with the original SCSS source code.
2:04
But now that we've been enabled to source
maps in the browser, any time we inspect
2:10
an element over in the Styles panel, we
can see how every style is coming
2:14
from the source SCSS right down to the
partial name and line number.
2:20
And we're able to directly edit the source
SCSS and see the changes in the browser.
2:26
And if we click on the file name in the
styles panel, this brings up the source
2:31
panel where we can view and edit the
original SCSS source files.
2:35
So as we can see, this is really great,
2:40
because it takes us right back to the
pre-compiled SCSS code we wrote, and
2:42
these are the files we really care about,
not so much the output CSS.
2:47
So now we're able to see exactly which
placeholder, variable or
2:52
mix in is behind every line of CSS.
2:56
So, with source maps, we can avoid the
hassle of switching between our text
2:59
editor and developer tools, when debugging
code.
3:03
Now, in the teacher's notes, I've posted a
link to Dale Sand's video on how to
3:06
edit and actually save your changes in the
browser from DevTools, using source maps.
3:10
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up