1
00:00:00,270 --> 00:00:06,280
Earlier you may have noticed how Sass
generated a file named application.css.map

2
00:00:06,280 --> 00:00:11,320
in addition to the compiled CSS, well this
is what's called a source map, and

3
00:00:11,320 --> 00:00:15,660
Sass created this file to make our lives a
little easier, if and when

4
00:00:15,660 --> 00:00:19,960
we have to debug styles in the browser
using something like Chrome DevTools.

5
00:00:19,960 --> 00:00:23,485
So with source maps, we're able to see the
original Sass or

6
00:00:23,485 --> 00:00:28,430
SCSS source, instead of the compiled CSS,
while debugging in the browser,

7
00:00:28,430 --> 00:00:30,830
and we'll see how that works in just a
bit.

8
00:00:30,830 --> 00:00:34,490
So if we open up and take a look at our
CSS output,

9
00:00:34,490 --> 00:00:38,460
you'll notice a comment added at the very
bottom of the style sheet.

10
00:00:38,460 --> 00:00:41,370
Now, this isn't an error as some may think
it is.

11
00:00:41,370 --> 00:00:45,350
This just means that we're all set up with
a source map to our CSS.

12
00:00:45,350 --> 00:00:50,340
And that source map regenerates every time
our Sass files are compiled into CSS.

13
00:00:51,340 --> 00:00:54,860
So the next thing we need to do to take
advantage of source maps

14
00:00:54,860 --> 00:00:58,470
is make sure that our browser knows to
look for them.

15
00:00:58,470 --> 00:01:02,290
So now we'll to enable source maps in the
browser.

16
00:01:02,290 --> 00:01:07,020
Keep in mind that Chrome, Firefox and
Safari all have support for source maps.

17
00:01:07,020 --> 00:01:11,490
Once again we're gonna be using Chrome
here, but I've also posted source map

18
00:01:11,490 --> 00:01:15,040
instructions for Firefox and Safari in the
teacher's notes.

19
00:01:16,090 --> 00:01:20,490
So, to enable source maps in Chrome, we'll
need to open up Chrome DevTools by

20
00:01:20,490 --> 00:01:25,440
clicking the top right menu then scrolling
down to More Tools and

21
00:01:25,440 --> 00:01:29,390
right below that we'll need to click
Developer Tools.

22
00:01:29,390 --> 00:01:34,010
Once we have Chrome Dev ools open, we'll
need to open up the Settings panel, and

23
00:01:34,010 --> 00:01:39,040
we can do that by clicking the sprocket
icon in the top right corner.

24
00:01:39,040 --> 00:01:44,650
And now, in the general settings, we'll
need to scroll down to sources,

25
00:01:44,650 --> 00:01:48,900
and make sure we check enable CSS source
maps, and

26
00:01:48,900 --> 00:01:53,500
right below that, make sure we have auto
reload generated CSS checked.

27
00:01:53,500 --> 00:01:57,290
Right, so now we can close our settings
panel, and we're all set.

28
00:01:58,770 --> 00:02:03,380
So if we actually tried debugging the CSS
running in the browser with DevTools,

29
00:02:03,380 --> 00:02:04,820
that could get pretty tricky and

30
00:02:04,820 --> 00:02:10,020
time consuming because of the differences
with the original SCSS source code.

31
00:02:10,020 --> 00:02:14,730
But now that we've been enabled to source
maps in the browser, any time we inspect

32
00:02:14,730 --> 00:02:20,060
an element over in the Styles panel, we
can see how every style is coming

33
00:02:20,060 --> 00:02:26,440
from the source SCSS right down to the
partial name and line number.

34
00:02:26,440 --> 00:02:31,160
And we're able to directly edit the source
SCSS and see the changes in the browser.

35
00:02:31,160 --> 00:02:35,750
And if we click on the file name in the
styles panel, this brings up the source

36
00:02:35,750 --> 00:02:40,860
panel where we can view and edit the
original SCSS source files.

37
00:02:40,860 --> 00:02:42,600
So as we can see, this is really great,

38
00:02:42,600 --> 00:02:47,390
because it takes us right back to the
pre-compiled SCSS code we wrote, and

39
00:02:47,390 --> 00:02:52,250
these are the files we really care about,
not so much the output CSS.

40
00:02:52,250 --> 00:02:56,430
So now we're able to see exactly which
placeholder, variable or

41
00:02:56,430 --> 00:02:59,860
mix in is behind every line of CSS.

42
00:02:59,860 --> 00:03:03,470
So, with source maps, we can avoid the
hassle of switching between our text

43
00:03:03,470 --> 00:03:06,510
editor and developer tools, when debugging
code.

44
00:03:06,510 --> 00:03:10,990
Now, in the teacher's notes, I've posted a
link to Dale Sand's video on how to

45
00:03:10,990 --> 00:03:15,910
edit and actually save your changes in the
browser from DevTools, using source maps.