Skip to main content

Saving Your Changes

Changes made directly in DevTools are temporary. To save them permanently, follow these steps:

Updating Your Source Files Manually​

  1. Copy your modified CSS rules from the DevTools Styles pane.
  2. Paste them into your actual CSS file using your favorite code editor.
  3. Save the file and refresh your webpage to confirm the changes.

Using Chrome Workspaces (Optional)​

Chrome Workspaces allows you to map local files to those served by your web server, enabling you to save changes directly from DevTools.

  1. Open the Sources panel.
  2. Click the gear icon (⚙️) to access Settings.
  3. Under Workspaces, click Add Folder and select your project folder.
  4. Map the network resources to your local files.
  5. Now, changes you make in DevTools will automatically update your local files.

Learn More: Check out the Chrome DevTools Workspaces documentation for detailed instructions.