How to save CSS changes of Styles panel in Chrome Developer Tools?

html

devtools

css

local-overrides

byAnton Shumikhin·Oct 14, 2024

For persistent local editing, set up a Workspace in Chrome DevTools.
Add your project folder to the workspace by right-clicking inside the Sources tab and selecting Add folder to workspace.
Grant Chrome access to the folder.
Map local files to network resources in the Network panel by right-clicking them and selecting Map to file system resource.
Changes made in the Styles panel are now auto-saved to your local CSS file post-mapping.

Mapping verification: Be sure the correct .selector { color: red; } is synced to see changes in the local project files after reloads.

Step-by-step guide: Saving CSS changes made easy

Workspace setup: Your local IDE inside DevTools

Workspaces in DevTools allow code interaction just like a local IDE. They link your local files to web resources. Start by adding a folder to the workspace and changes made will be saved to your actual local file system.

// In simple terms:
// Workspace == Your locally hosted IDE for DevTools

Local Overrides: Your playground for code experiments

To experiment safely without altering the original source files, use the Local Overrides feature. This feature is also a part of Workspace. Designate any local folder to store overrides. After editing, use the CTRL + S shortcut to save changes.

// Remember:
// CTRL + S == Save a life (Or at least save your changes)

File Mapping: The cornerstone of persistent changes

Properly linking your local files to the corresponding web resources is essential for persisting changes. Use the Network panel to identify files needing mapping. Once mapped, the local file versions are used upon reloading, keeping your changes intact.

// Don't forget: 
// Good mapping == Happy reloading

Locating and saving modifications: Keeping tabs on your changes

The Local Modifications tab helps you keep track of all changes, virtually creating an edit history. Save any changes you made in the built-in code editor by right-clicking in the Sources panel.

// Because: 
// Saving your work == Saving your time (Especially if you've made a ton of changes)

Common Scenarios: Turning problems into solutions

Playing hide and seek with changes

When changes don't persist after a reload, check the mapping of network resources to local files. Are they correctly set up? Also, try to reload DevTools itself after you setup your workspace.

// In programming, remember:
// If at first you're not seeing, reload and load, until you are

Working with code versions

Like version tracking in Git, DevTools Workspaces ensure code integrity between your repository and your live site, by mapping them accurately.

Finding our saved changes

Where are the saved changes? In the "Frames" section of the Resources panel, not "Local Storage". Get a visual diff of your changes.

// Mountaineer's tip:
// Searching for changes in "Frames" is like finding a cabin on a snowy mountain; 
// "Local Storage" is the snow. Don't dig the snow!