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.
To save your changes, press CTRL + S when editing the file.
CSS changes are instantly updated but, in the case of HTML and JavaScript, you'll normally need to press Ctrl/Cmd + S to save the file to the file system then refresh the browser. Note that you can also right-click the file tab and select Save as… to save a copy of the file elsewhere.
Just do right click -> save as html -> in type select (complete webpage).
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With