How Can I Permanently Save CSS Changes Made in Chrome DevTools?

Persisting CSS Changes from Chrome Developer Tools Styles Panel

Problem Statement:

Unable to save CSS modifications made in the Styles panel of Google Chrome Developer Tools, despite the documentation suggesting it should be visible in the Resource panel.

Solution:

Chrome now provides the ability to add local folders to its Workspace. By leveraging this feature, you can map a web resource to a local resource and save your CSS changes directly from the Developer Tools.

Steps:

1. Add Folder to Workspace:

   • Navigate to the Sources panel of Developer Tools.
   • Right-click in the left panel and select "Add Folder to Workspace."
   • Select the folder containing your CSS file.

2. Grant Chrome Access:

   • A prompt will appear requesting permission to access the folder.
   • Grant Chrome access.

3. Map Network to Local Resource:

   • Reload the page.
   • Find the corresponding mapped file in Sources panel.
   • Right-click on the file name and select "Map to file system resource."
   • Navigate to the local file and select it.

4. Save Changes:

   • Make your CSS changes in the mapped file.
   • Press CTRL S to save the changes.

Additional Notes:

• You may need to open and edit the mapped file to initiate the application of local changes.
• If you don't see the Styles panel, click on the three-dot icon in the top-right corner of the Elements panel and select "Show styles."

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