Chrome 开发工具“元素”视图中的实时 HTML 源代码编辑？答案

【问题标题】：Real-time HTML source editing in Chrome dev tools "Elements" view?Chrome 开发工具“元素”视图中的实时 HTML 源代码编辑？
【发布时间】：2016-01-20 02:43:54
【问题描述】：

我的问题/背景故事：我仍在使用 Opera 12（基于 Presto）和它的 Dragonfly 开发工具来快速编辑 CSS 和 HTML。

显然，其他浏览器更现代，通常更快，但 Dragonfly 是唯一允许我实时编辑任何 HTML 元素源的浏览器内工具。

我可以双击开发工具 DOM 视图中的任何元素（而不是笨拙的右键单击 -> Chrome 中的“编辑为 HTML”），然后所有更改都会立即实时反映在主浏览器窗口中.

在我尝试过的 Chrome 和其他浏览器中，这个工作流程很痛苦，因为更改不会实时更新，而只有在使用 Ctrl+Enter（或类似方法）关闭 HTML 编辑器后才会更新。

长话短说： 有没有像 Opera 12 中的 Dragonfly 那样允许实时编辑 HTML 源代码的现代浏览器？甚至可以借助扩展程序？

【问题讨论】：

您可以在chrome中双击并编辑元素或属性。
是的，但只有元素（标签名称）本身和属性，而不是包括元素所有子元素的 HTML 内容。必须使用右键单击->“编辑为 HTML”。

标签： html browser google-chrome-devtools editing opera-dragonfly

【解决方案1】：

你可以试试 Firebug for Firefox http://getfirebug.com/。它的 HTML 视图中有实时 html 编辑器。如果您更喜欢 Chrome 编辑器 https://getfirebug.com/firebuglite，还有 Firebug Lite。此外，在最新版本的 Chrome 中，其开发人员工具允许您通过双击来更改元素类型及其属性。

【讨论】：

我会调查 Firebug，谢谢。过去曾使用过它，但那是很久以前的事了......所以可能从那时起事情发生了变化:) 关于双击编辑：这适用于标签名称和属性，但不适用于 HTML 内容。所以它（大多数情况下）对于我这种用法来说是不够的。
嗯，嗯.... Firebug 很好，但对我来说仍然不能证明从 Dragonfly 的变化是合理的... Dragonfly 仍然更快（Firebug 在编辑时有明显的延迟，大约 1 秒)。除此之外，我更喜欢 Dragonfly 的通用 UI，以及 Chrome 开发工具（即使它们缺乏实时编辑）。
无论如何，谢谢你的回答。不过，我仍然会继续寻找 :)