Debugging Sass with Sourcemaps3:08 with Guil Hernandez
Sass creates a sourcemap to help you see the original Sass/SCSS source while debugging in the browser. Sourcemaps contain information that links each line of your output CSS to the Sass/SCSS source, right down to the partial file and line of code.
- Live Editing SCSS in the Browser
- Sass Source Maps + Chrome = Magic
- Enabling source maps in Firefox and Safari
Debugging compiled CSS using the browser's developer tools can be frustrating and 0:00 time consuming because of the differences with the SCSS or SaaS source code. 0:05 For example, say you need to inspect a card div to track down a styling buck 0:10 selecting a card displays only the compiled CSS in the styles panel. 0:16 Well let's say you pinpointed the bug and you're ready to fix it. 0:22 Well your SaaS code is usually spread out over many partials. 0:24 And if you're new to this project or it's been a while since you made 0:29 edits to the site finding the source code can be tricky. 0:32 So SaaS creates a source map to help you see the original SaaS or 0:35 SCSS source while debugging in the browser. 0:39 The source map itself is the style.css.map file 0:42 created when compiling your SaaS to CSS. 0:47 It contains information that links each line of your output CSS 0:50 to the SCSS source, right down to the partial file in line of code. 0:54 Now, the comment you see at the very bottom 0:58 of your output CSS is what points to the source map. 1:01 The source map regenerates every time you save changes in your SaaS files. 1:05 To take advantage of source maps, 1:09 you'll need to enable the source maps feature in your developer tool settings. 1:11 Chrome, Firefox and Safari all have support for source maps. 1:15 But I'm going to use Chrome dev tools. 1:19 I've also posted instructions on enabling source maps in Firefox and 1:21 Safari in the teacher's notes. 1:24 So to enable source maps in Chrome, first open the Chrome developer tools. 1:26 Then click to open the customize and control menu in the top right corner and 1:34 click Settings. 1:39 This brings you to the Preferences tab. 1:41 Then under sources, check enable CSS source maps. 1:45 Click the Close icon to close the settings window and 1:52 now you're all set to use source maps. 1:54 So let's try it. 1:56 When you inspect an element here in the elements panel, 1:57 the styles panel displays the SCSS source file and line number of each rule set. 2:02 The best part when you click on a file name 2:09 it navigates you to the sources panel. 2:11 Or you can view the code you really care about, the precompiled SaaS. 2:14 So here we're looking at the scss source for the card component. 2:20 With source maps you avoid the hassle of switching between your text editor and 2:25 developer tools when debugging. 2:30 In the teacher's notes, I've posted resources that will teach you how to 2:31 edit and save fast changes in your project from your dev tools using source maps. 2:35 I've also posted links to Treehouse videos and 2:40 resources that will help you go forward with Sass. 2:41 I hope you had fun learning the basic of SaaS and that you'll take what you've 2:45 learned in this course to extend the block project even further. 2:48 Use the knowledge you've gain to build your own projects using SaaS. 2:52 And consider converting your existing projects from plain CSS to SaaS. 2:55 Remember, we're always here to help. 2:59 So if you have any questions about SaaS, 3:00 feel free to reach out to the Treehouse staff or other students in the community. 3:02 Thanks everyone and happy coding. 3:05
You need to sign up for Treehouse in order to download course files.Sign up