Wouldn’t it be great if you could make changes to your code directly in your brower and save them to disk? That would save us a lot of switching back and forth between different environments in our workflow. It seems like Google is moving in this direction with their latest releases of Chrome. With their concept of ‘Workspaces’ it’s now possible to manage projectfiles from within DevTools.
Chrome Canary, the bleeding edge version of Chrome, already has support for SASS right out of the box. When you inspect an element on the page it provides you with a link to the SASS-file and puts the cursor right at the linenumber where you need to make your changes. These changes can then be saved to your local disk. This considerably speeds up development and debugging of your project.
Let’s see how we can set up Chrome and SASS so we can debug and save our changes to disk.
Setting up SASS and DevTools for debugging
I’m assuming you have at least a basic knowledge of what SASS does. If not..no worries, you can read up here.
To make it work we will have to use a version of SASS which has support for ‘sourcemaps’ and compile the SCSS with the right options. At the time of this writing that will be the bleeding edge version of SASS. Support for sourcemaps is planned in the next stable release though. You can check your version of SASS by firing up the command line and type ‘sass -v’. If you want to install the bleeding edge version you can do so by typing ‘sudo gem install sass –pre’.
Now, with SASS installed we can tell it to watch for changes in our SASS stylesheet and enable the ‘sourcemaps’ option. From the commandline type:
sass --sourcemap --watch path/to/stylesheetname.scss:path/to/stylesheetname.css
In Devtools we have to enable the option ‘CSS source maps‘ in the settings dialog. Open up the DevTools with [cmd + opt + i] for OSX and [ctrl + shift + i] for windows and bring up the settings dialog with [ ?] or press the cog icon in the lower right corner. Also enable the option ‘Auto-reload generated CSS’.
When you make some changes to the SCSS in a texteditor and save them, a file called ‘stylesheetname.css.map’ will be automatically generated which maps the precompiled SCSS to the postcompiled CSS. This file is stored in the same directory as the main CSS file.
Now inspect an element on your webpage with the DevTools and it should provide you with a link to the precompiled SCSS sourcefile instead of the postcompiled CSS file. Clicking on the link will open the file and place the cursor at the specified linenumber.
Saving your changes to disk
Instead of having to switch back and forth between the browser and a texteditor it’s much more convenient to make changes in the DevTools and have the page reflect these changes automaticaly on save. Let’s make some changes so we can manage our project files directly from the DevTools. In DevTools open up the settings dialog and choose ‘Workspace’ from the menu on the left side. Now click the button ‘Add folder‘ and select the folder that holds your projectfiles. A dialog box will appear at the top off the screen in which DevTools requests full access to this folder. If you want to provide full access then click ‘Allow‘. Now when you visit the ‘Sources’ tab, the folder should be present in the filetree on the left side. If it’s not there try restarting DevTools.
The folder we just added is our workspace folder but the filetree also shows us a network folder with the files loaded from the local server. To get DevTools to only show us the workspace files we have to map the workspace directory to a network URI. To do so right click on a file in the workspace directory and choose ‘Map to Network Resource…‘. A list with files from the network folder should be shown. Choose the file that corresponds with the workspace file and restart the DevTools.
Now if you inspect an element on the page, follow the link, make some changes and hit [CMD + S] or [CTRL + S] for Windows, your changes are saved to disk and will immediately be visible in the DevTools!