Automatically Save CSS changes made in Chrome DevTools (Using Workspace)

When you open your inspector and change some of the CSS of your website, you want all that code to automatically save on your CSS file instead of copying and pasting the code. This is possible and it just takes a couple of minutes to setup using Chrome DevTools Workspace.

[aten]

Thank you man. I had to search through 5 videos befor finding yours .Your a life saver.

[musikkimies]

Dude, this video is 🔥🔥🔥! Thank you for teaching this! -- I shared this video to a development group I'm a part of. Hopefully it will drive some traffic to your channel. Thanks again.

[js]

This video was perfect!!! Thank you for tackling such a small but important problem!

[touficahammed]

Perfect. While working, suddenly this idea came to mind. Cause it takes lots of time to copy and paste. Thanks, dude. Help me perfectly. +1

[charlieparkeris]

This isn't working as expected. If I go into the sources tab and make edits to the file from there, it works. But if I'm in the elements tab, I can make changes, but they don't save. If I hot cmd+s from the sources area, it saves fine. If I hit cmd+s from the elements area, it tries to save a new version as if I'm downloading the webpage.

[csacicero]

Fantastic! simply amazing!!! I didn't know it was possible to do this, I did some tests through inspect, but I always lost the code after refresh, so I had to copy everything... your tip will save many hours of work from now on. Thank you very much and congratulations!

[SDEKICK]

Awesome Tutorial thank you! Is there a way to get this to work with SCSS/SASS?

[Timooooooooooooooo]

I think I remember somebody in the DevTips Discord showing this off a while ago. It's pretty cool! I haven't used it yet

[kantheshamurthysb]

Hello, Do I need to do some additional setting to make this work for web frameworks like Angular (because it is currently not working in Angular)?

[hendrik]

It doesn’t work for me. My files do not show up green

[VV-wlgb]

That's a fantastic way to improve the workflow! Does a similar feature exist for Firefox as well?

[ticey]

Is there any way to save html changes as well?

[stevegarza]

Great video, I followed all the steps but when I click on the + Add folder to the workspace it doesn't show index.html, main.js, and style CSS. How do I add those? Thank you for the video and help.

[muditchoudhary]

Thanks for sharing 😄
It's very helpful 👍

[yevheniibabenko]

cool, it works even after 3 years later

[Mohit-yevo]

bro how to get the root folder of any website please tell, i do not have any idea about root folder

[irrishcharlie]

I watched your video, It's actually a lot simpler than I had expected, but for some reason as soon as I close the page all of my edits return to their defaults. I redesigned this page 3 times since yesterday with the same results. Any thoughts or ideas would be greatly appreciated. Thank You

[Killer_X_So]

Where you het that files? Please answer

[VidarrKerr]

I have a page I use daily online and I removed a lot of the clutter using the dev tools. How can I save those changes and load them whenever I view that page? Is this even possible?

[Abhinav_-gsej]

can we undo the recent changes in devTools if we want previous data?