强制 Chrome/Firefox 开发人员工具像 Firebug 一样更直接地呈现编辑

Question

在 Firebug 中，当您编辑 HTML 或 CSS 元素时，更改会在短暂暂停后在屏幕上生效，即使仍在编辑时也是如此。在 Chrome 和 Firefox 开发者工具中，更改仅在您失去编辑焦点时生效。

请参阅下面的 Firebug 编辑比较，其中在编辑 HTML 的同时对页面进行了更新：

与 Chrome 相比，Chrome 暂停后不会更新页面：

这非常令人恼火，因为它会降低通过即时反馈即时更改项目的效率。使用 Chrome/Firefox 开发人员工具，您必须键入、失去焦点、查看更改、重新聚焦、再次键入，然后再次失去焦点。

有没有办法让 Chrome/Firefox 上的这种行为更像 Firebug？如果没有，有没有更快的方法来查看更新，而不必失去焦点并重新关注每一个小变化？我想使用另外两个开发者工具包中的一些功能，但是无法获得更流畅的编辑是非常难以克服的。

Answer 1

在 Firefox DevTools 中，目前无法让他们的 Inspector 立即进行更新。虽然已经有 bug 815464 提交来改变这种行为。

对他们来说更好的工作流程是在编辑值后按 Enter。然后您可以按 Space 再次打开编辑器。这样做不会失去焦点。

Chrome DevTools 也不提供在更改 HTML 时进行实时更新的方法。因为我找不到相关的问题来改善行为，所以我在issue 546883 中提出了这个请求。

他们的 Elements 面板允许与 Firefox DevTools 的 Inspector 面板类似的工作流程。在那里，您可以通过按 Enter 开始和停止内联编辑，或者通过按 F2 使用更大的 HTML 编辑器并通过 Ctrl+ 停止编辑输入。不幸的是，Chrome 的 Elements 面板不会关注您编辑的部分，因此您要么总是从第一个属性开始，要么编辑整个元素。