从 Devtools 本地保存 html答案

【问题标题】：Save html locally from Devtools从 Devtools 本地保存 html
【发布时间】：2016-04-04 01:56:42
【问题描述】：

我在 Chrome 和 Sublime 文本编辑器中使用 Emmet Livestyle。我正在本地编辑我的文件，并且可以从 devtools 更新我的 css 和 js，以便这些更改也同时反映在我的本地文件中。但是我怎样才能更新我的 html 代码呢？

【问题讨论】：

标签： html google-chrome-devtools sublimetext3 emmet

【解决方案1】：

我们无法将 HTML 编辑保留回来。因为，好吧，您不是在编辑 HTML。这是发生了什么......

服务器将页面 (HTML) 发送给 Chrome。这是获取、标记化的，然后从中构建 DOM（文档对象模型）。然后页面被丢弃，只有 DOM 保存在内存中。这就是您在“元素”面板上看到的内容。该面板是完整的 DOM，看起来像 HTML 标记以便于使用。

从服务器发送下来的 HTML 可以由 PHP、Ruby、C、手工编码等生成。 DevTools 无法知道。因此，我们无法将 DOM 中的源编辑自动传回。 CSS 和 JS 都可以利用源映射，因此 DevTools 知道将内容发送回哪里。它不是 100%，因为如果你使用一个变量，你不是在编辑变量，而是更改设置值（至少在 CSS 中）。但这对于大多数用途来说已经足够了。随着后端语言生成 HTML，这些类型的问题变得更加复杂、难以管理，并且最终不会为开发人员提供最佳体验。

您可以做的最好的事情是设置workspaces 并开始在 DevTools 中编辑您的源代码。但是，这有一个陷阱，即目前不支持自定义扩展。所以你有一个非常普通的写作经验走这条路。

【讨论】：

【解决方案2】：

Browser 是http client..... html 代码由服务器提供......如果您正在开发并拥有服务器端代码......然后复制您所做的更改在服务器端的级联样式表中制作。

【讨论】：

我正在本地编辑我的文件，从 devtools 中对 css/js 所做的更改会立即反映在我的源文件中，但不会反映在 html 代码中所做的更改。
js/css 放置在任何典型的编辑器/文本区域中都可以应用于网页，如果网页被设计为接受它。但要应用于 html 代码， - 更改将被复制server-side-code。通过 js，您可以尝试通过 DOM 对象并应用 css，如果您的开发工具 Emmit Livestyle 可以接受它，那么您就可以成功，那就是这种情况。我希望特定于浏览器的客户端尝试代码不允许动态 DOM 操作。检查 Emmit Livestyle 是服务器绑定的，这意味着存在服务器代码对应项。因此，W3C 不允许伪造。
如果您只想检查应用 css 的 html 的外观和感觉......您只需要通过 <link> 标签合并 .css 文件，这样您就可以检查它的外观和感觉只需从本地文件系统在浏览器中打开它。与.js 相同。如果您在系统中执行，您也可以通过 .js 进行 DOM 操作。