Have you ever wanted your changes from Chrome’s DevTools to stick – or wanted to edit Sass files directly in the inspector? If your typical workflow involves making design changes within DevTools only to return to your text editor for application, you know the pitfalls. It’s hard to remember what changes you actually made and if you’re not using LiveReload you’ll need to refresh the browser to see them in action. The whole thing is exhausting.
Thankfully, there’s a better way. By using workspaces and Sass source maps with DevTools you’ll be able to edit your Sass directly within the inspector. On top of that, your changes will persist to your source files! No longer will you have to hop between the browser and your text editor. By setting up a workspace, Chrome acts as your editor.
Sass source maps
Sass is a preprocessor. That means it’s a language that compiles down to another, in this case our old friend CSS. That’s where Sass source maps come in. They provide a way of bridging the divide between CSS and Sass. When DevTools spots a Sass source map it can point directly to the Sass source files rather than the generated CSS. This is incredibly helpful when it comes time to debug or tweak design.
A workspace in Devtools is really just a way for Chrome to understand where the source files for the current page live. This gives DevTools the power to act as your editor. In this post we’re modifying Sass files, but the amazing thing about a workspace in DevTools is that you can edit any type of file and have your changes persist to disk. For further reading, I recommend the Chrome docs on the matter.
Let’s get busy
If you don’t have Sass installed already, you’ll need to do that. Let’s venture
out to the Terminal and run a simple command. Open that bad boy up and type:
gem install sass. It will look something like this.
Make sure DevTools is ready to go
The second thing you’ll need to do is make sure Chrome knows you’re going to use
source maps. To do this pop open the inspector with
command + option + i
(⌘ + ⌥ + i) or right click anywhere on the page and select
element. Now Hit the little gear in the top right hand corner to access your
settings. Find “Sources” under the “General” column and then make sure both
“Enable CSS source maps” and “Auto-reload generated CSS” are checked.
Run a sass watch
Now head back to your terminal and get Sass cranked up. You’ll want to tell Sass
the file to compile and output on this step. The syntax for this is as such. Run
sass --watch input.scss:output.css. (Starting with Sass version 3.4 source
maps are output by default. If you’re using any version between 3.3–3.3.14
you’ll have to add an extra flag like so
sass --watch --sourcemap
input.scss:output.css, maps aren’t available prior to version 3.3.) The watch
flag we’re using tells Sass to keep its eye on your Sass files for changes. Now
every time you make a change and save, things will recompile automatically.
Create a workspace
Marvelous, now let’s create a workspace in Chrome. Reopen the inspector using:
command + option + i (⌘ + ⌥ + i) and click your old friend the
gear. After that, click on “Workspace” from the left menu. Lastly, click “Add
folder” and then select your project folder. Chrome is going to ask you for full
access to that directory – go ahead and allow it.
Map to network resource
Okay, just one more step for all our work to come together. We need to tell
DevTools where the source files exist locally. To do this, find your
file within the folder we just added to the workspace. Once you find it, give it
a right click and finally “Map to network resource.” That’s it! Chrome
will refresh and you’re ready to go.
Edit directly in DevTools
Now go ahead and inspect an element. You’ll see that Chrome knows exactly where
in your Sass file the styles reside thanks to the source map. When I
click on a declaration it takes me directly to the proper spot in the source
Sass file – amazing.
From here, we can edit away. For instance, I’m not really feeling the background color on this page. I think I’ll change it. You can see in the .gif that when I change the background color in Chrome and save it it’s reflected in my source file. What?! Awesome right?
What about Rails?
Unfortunately, if you’re using the
sass-rails gem there’s a bit of an issue at
the moment. Sass brought source maps into the fray with version 3.3. Sass-rails
uses an older version (3.2) of Sass that doesn’t output source maps. So, until
Sass-rails updates its Sass dependency to a newer version you’re out of luck.
There is a gem called Sass-rails-source-maps that offers an approach to try and get things working. Have at it, but I couldn’t get things going on my end.
If you’re using Git and want to keep things tidy it’s probably a good idea to
*.css.map to your global
.gitignore. This is typically in your home
Now you know how to use Sass source maps and create a workspace in DevTools to great effect. It’s a technique that helps you save time, work smarter, and frees you from the shackles of moving back and forth between your editor and browser. Have fun with it!