从Devtools本地保存html [英] Save html locally from Devtools

问题描述

我在Chrome和Sublime文本编辑器中使用 Emet Livestyle .我正在本地编辑文件，并且可以从devtools更新我的 css 和 js ，以便这些更改也同时反映在我的本地文件中.但是我也该如何更新我的 html 代码?

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 that those changes are reflected at the same time in my local files too. But how can I update my html code too?

推荐答案

我们无法恢复HTML编辑.因为，好吧，您不是在编辑HTML.这是怎么回事...

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

服务器向Chrome发送页面(HTML).对此页面进行标记，将其标记化，然后从中构造一个DOM(文档对象模型).然后，该页面被删除，只有DOM保留在内存中.那就是您在元素"面板上看到的.该面板是完整的DOM，看起来像HTML标记，易于使用.

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.

从服务器向下发送的HTML可以由PHP，Ruby，C以及手动编码的任何方式生成. DevTools无法知道.因此，我们无法自动将DOM中的源编辑转移回去. CSS和JS都可以利用源映射，因此DevTools知道将内容发送回何处.它不是100％，因为说如果您使用的是变量，则不是在回编辑该变量而是在更改设置值(至少在CSS中).但这对于大多数用途而言已经足够了.通过后端语言生成HTML，这些问题变得更加复杂，难以管理，最终将为开发人员提供最佳体验.

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.

您最好的办法是设置工作区，然后在DevTools中编辑您的源代码.但是，这有一个陷阱，即目前不支持自定义扩展.因此，您在这条路线上有非常通用的写作经验.

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.

这篇关于从Devtools本地保存html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！