It is wonderful to be able to use Chrome’s Web Inspector development tools to tweak the CSS of a web page to get elements just right. However, what is the best way to apply these changes to the actual stylesheet? One could, of course, just move these changes by recreating the tweaks to the CSS document manually. There is a way, though, to actually save out the modified CSS file right from the Web Inspector. To do this, simply click on the CSS link at the right-hand side of the Styles palette:
Clicking on the link will open up the modified CSS file in the Web Inspector’s Sources tab:
Right-clicking on the opened CSS file will allow you to view the changes made to the CSS file via the Elements tool (Local Modifications) as well as save out the changed CSS file which you can use to replace the old CSS.
