Force Chrome/Firefox developer tools to render edits more immediately like Firebug
In Firebug, when you edit an HTML or CSS element, the changes take effect on the screen after a short pause, even while still editing. In the Chrome and Firefox developer tools, the changes only take effect when you lose focus of the editing.
See a comparison below of editing in Firebug, where updates are made to the page while still editing the HTML:
Compare that to Chrome, which does not update the page after pausing:
This is extremely infuriating as it leads to less productivity in being able to change items on the fly with somewhat immediate feedback. With the Chrome/Firefox developer tools, you have to type, lose focus, see the changes, re-focus, type again, and then lose focus again.
Is there anyway to make this behavior on Chrome/Firefox more like Firebug? If not, is there any quicker way to see the updates without having to lose focus and re-focus on every little change? There's features in these other two developer toolkits I would like to use, but the inability to get more fluid edits is something very difficult to overcome.
In the Firefox DevTools there is currently no way to let their Inspector do the updates immediately. Though there's already bug 815464 filed to change this behavior.
A better workflow for them is to hit Enter after you've edited the value. Then you can open the editor again by pressing Space. Doing so you don't lose the focus.
The Chrome DevTools don't offer a way to do live updates when changing the HTML, neither. Because I couldn't find a related issue to improve the behavior, I requested this in issue 546883.
Their Elements panel allows a similar workflow as the Firefox DevTools' Inspector panel. There you can start and stop inline editing by pressing Enter or use the bigger HTML editor by pressing F2 and stop editing via Ctrl+Enter. Unfortunately Chrome's Elements panel does not focus the part you edited, so you either always start at the first attribute or you edit the whole element.