How Can I Save CSS Changes Made in Chrome DevTools' Styles Panel?

Saving CSS Changes from Chrome Developer Tools Styles Panel

In the context of Google Chrome Developer Tools, you may encounter an issue where the CSS changes made through the Styles panel fail to appear in the Resource panel. This can be particularly frustrating when working locally on a CSS file.

To resolve this situation, Chrome introduced a workaround that involves adding local folders to your Workspace. By doing so, you can map web resources to local resources, allowing you to edit and save changes locally.

Steps to Save CSS Changes:

1. Add Folder to Workspace: Right-click in the left panel of the Sources tab and select "Add Folder to Workspace."
2. Allow Chrome Access: Grant Chrome access to the folder you wish to add.
3. Map Network Resource: Select the web resource in the Network tab and map it to the corresponding local resource.
4. Make Changes: Reload the page and edit the CSS file locally.
5. Save Changes: Press "Ctrl S" (Windows) or "Cmd S" (Mac) to save your changes.

Additional Tips:

• You may have to open the mapped file and make some changes to trigger Chrome's recognition of the local resource.
• Chrome's Workspace feature was originally available through the Canary channel but is now integrated into the stable version of the browser.

Third-Party Add-Ons

While Chrome's built-in functionality provides a solution, you may also consider external add-ons for saving CSS changes. Currently, there are limited options available for Chrome, unlike Firebug's wide range of CSS change-saving tools. However, third-party tools like LiveReload and Stylus provide similar functionality and can enhance your development workflow.

The above is the detailed content of How Can I Save CSS Changes Made in Chrome DevTools' Styles Panel?. For more information, please follow other related articles on the PHP Chinese website!