Saving your CSS changes in the Google Chrome inspector
Max Glenister
In the process of rapid prototyping and trying out new CSS styles I often find myself making changes to styles within the inspector in Google Chrome. This works quite well, but I’ve always had a process like the following:
- Try some CSS changes in the inspector
- Copy the new CSS styles (or even type them!) in to my local stylesheet
- Refresh the page, or open the page in a new tab and compare the CSS styles
- Repeat until correct
Today I realised that the inspector in Google Chrome saves states of your CSS edits as you make them, so you can revert to an earlier state, and even export the modified stylesheet from a given state.
It turns out this has been available in Webkit for nearly 18 months! You can read some more information about it over on Surfin’ Safari or check out my primer below.
A quick primer on how to export CSS changes from the inspector
Make your changes
Click the ‘Sources’ tab in the inspector
Find the CSS file that you made changes to (notice it now has an asterisk next to it)
Right click in the file, and choose “Local modifications…” You can now see a list of the changes you’ve made
Right click in the file again, and choose “Save as…”
Related posts
- Replacing the macOS audio switcher with SwiftBar
The built-in audio output menu in macOS has always felt a bit limited. The icons aren’t very helpful, the device names can’t be customised, and if you’ve got a few different outputs, it becomes tricky to quickly tell what’s what.
- Some Notes About Android Virtual Devices
Running AVD emulator from the Windows command line/Powershell/mingw32 This assumes you’ve got Android Studio installed. First you need to have the tools path in your $PATH variable, to do this edit Path in Windows’ Environment variables to include for example: C:\Users\Max\AppData\Local\Android\Sdk\tools Then you can use emulator.exe from anywhere. The Android Studio docs fail to mention this. $ emulator -no-boot-anim -accel auto -writable-system -no-snapshot -gpu host -avd K10_API_22 Installing Google Play Services I’ve been messing around with older device profiles, and trying to run things in Chrome on Android 5.0 (API level 21). You’ll need to sideload the Google Play services system APKs (from a gapps package for your target system, e.g. for Android 5.0, but you might find that the /system partition is full. No problem, you can sideload to /sdcard and symlink: $ adb remount # Fails... $ adb push .\GmsCore.apk /system/priv-app $ adb: error: failed to copy '.\GmsCore.apk' to '/system/priv-app/GmsCore.apk': No space left on device # Works... $ adb push .\GmsCore.apk /sdcard/system/priv-app $ adb push .\GoogleLoginService.apk /sdcard/system/priv-app $ adb push .\GoogleServicesFramework.apk /sdcard/system/priv-app $ adb push .\Phonesky.apk /sdcard/system/priv-app # Symlink them $ adb shell ln -s /sdcard/system/priv-app/GmsCore.apk /system/priv-app/GmsCore.apk $ adb shell ln -s /sdcard/system/priv-app/GoogleLoginService.apk /system/priv-app/GoogleLoginService.apk $ adb shell ln -s /sdcard/system/priv-app/GoogleServicesFramework.apk /system/priv-app/GoogleServicesFramework.apk $ adb shell ln -s /sdcard/system/priv-app/Phonesky.apk /system/priv-app/Phonesky.apk $ adb shell stop $ adb shell start Messing around with /etc/hosts It’s trivial to edit the /etc/hosts on your AVD, but it only works if you have blank new line at the end of the hosts file. $ adb pull /etc/hosts hosts $ nano hosts # make your changes to the hosts file locally... $ adb push hosts /etc/hosts
- VPN Connection Indication on Windows
As of tomorrow I’m going to be switching to working remotely. Same job, just from the comfort of my home office (and without 2-3 hours of commute daily!). With this change I figure I’ll have about 8-10 hours of extra time per week to work on things.
Discussion
- 2012
- JH
Cool suggestion but I didn’t see any children on my css file: http://prntscr.com/izf8u - all those files called “css” are Google Fonts included for testing and the other style.css seems to be coming from the inspector.
It looks as if this has now been moved to the ‘Sources’ section of the Developer Tools, with a much more intuitive way to access local modifications - http://uk.omg.li/LVeE
- 2013
- U
Hey Max,Your right they did move it to the ‘Sources’ section but how do you save the revisions. I was only able to save using the contextual menu when clicking on the actual css file using save as… but when I open up the css it stills only shows original css and not any of the changes?
- AL
I’m having the same problem here. The only way I found is to copy/paste every changed file… And currently I’m using Chrome 26
Apologies for the delay replying, Disqus doesn’t seem to notify me of the discussions…After you’ve made changes to your page styles, if you locate the stylesheet you’ve changed in the ‘sources’ tab, and right click on the filename or in the source code, you can hit ‘save as’.This worked for me, and reflects the changed styles. Hope that helps!
Hi Andreas, see my reply to Uri above – apologies for the delay!
- 2014
- NM
The way I got this to work is to click on the CSS file name (appears above the name of class / element you are changing in the Styles tab inspector). This opens up the “changed” CSS. You can save it from here now.HTH.
- SS
I just have to thank yo men, thankx a llot, that’s why i love Internet, there’s allways an answere to what im looking for and free :D
Join the conversation
Reply from your own site with a Webmention (how?).