Save html locally from Devtools

Question

I am using Emmet Livestyle with Chrome and Sublime text editor. I am editing my files locally and can update my css and js from the devtools so

Answer 1

We cannot persist HTML edits back. Because, well, you aren't editing HTML. Here is what is going on...

The server sends Chrome the page (HTML.) This is taken, tokenized, then a DOM (Document Object Model) is constructed out of it. The page is then trashed and only the DOM is kept in memory. That is what you are seeing on the Elements panel. That panel is the full DOM as it is, made to look like HTML markup for ease-of-use.

That HTML sent down from the server, can be generated by PHP, Ruby, C, hand-coded, whatever. There is no way for DevTools to know. So, there is no way for us to transfer source edits in the DOM back automatically. CSS and JS both can take advantage of sourcemaps so DevTools know where to send things back. It isn't 100%, since say if you are using a variable you aren't editing the variable back but changing the set value (at least in CSS.) But it is good enough for the majority of uses. With HTML generation by backend languages, these kinds of kinks become even more complex, unmanageable, and will end up providing not the best experience for developers.

The best thing you can do is setup workspaces and move to editing your source in DevTools. However, this has the pitfall that custom extensions are not supported at this time. So you have a very generic writing experience going this route.

Answer 2

Browser is a http client..... html code is supplied from the server...... If you're developing and owner of the server side code.... Then replicate the changes you made in the cascading style sheet at the server side.