强制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 面板不会对您编辑的部分进行聚焦，因此您要么始终从第一个属性开始，要么编辑整个元素。