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.