CODEWITHSUNDEEP
htmlcssgoogle-chromegoogle-chrome-devtools
user63457
user63457

Reputation: 701

Chrome devtools: save changes made in the elements tab to your workspace

I'm using Chrome 65 on Mac. I have set up a workspace in Chrome under the 'Sources > Filesystem' tab. I'm able to edit files and Chrome will save these changes to the actual file on my disk. But I would like to use the live editing capabilities of the 'Elements' tab to alter HTML & CSS and let Chrome save these changes.

I have found many answers, but none work with the current version of Chrome.

Upvotes: 8

Views: 6548

Answers (2)

thSoft
thSoft

Reputation: 22660

Simply saving the website (File > Save Page As...) works for me.

Upvotes: 0

seveninstl
seveninstl

Reputation: 834

You may not be able to save the file locally as you can with you CSS changes (from the "Sources" tab), but you can copy and paste elements using Chrome 65 and above (maybe older versions too). Copying the element also copies all of its children and their children. So, if you copy the <html> element, you will get the entire page - everything between <html> and </html>.

Right click on the element, go to Copy > Copy element. Then paste the clipboard content into your favorite editor or IDE and save. Not as convenient as saving from the Sources tab, but it does allow you to get/save all the changes you've made in the Elements tab.

Upvotes: 2

Related Questions