Debugging in the Browser with Source Maps3:16 with Guil Hernandez
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.
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 up