Yesterday, I was looking at an existing page, wondering if it would be improved by rearranging some of the elements. I was about to fire up the git engine (spawn a branch, check it out, do edits, preview them, commit changes, etc., etc.) when I got a weird thought: could I just drag elements around in the Web Inspector in my browser of choice, Firefox Nightly, so as to quickly try out various changes without having to open an editor? Turns out the answer is yes, as demonstrated in this video!
Youtube: “Dragging elements in Firefox Nightly’s Web Inspector”
Since I recorded the video, I’ve learned that this same capability exists in public-release Firefox, and has been in Chrome for a while. It’s probably been in Firefox for a while, too. What I was surprised to find was how many other people were similarly surprised that this is possible, which is why I made the video. It’s probably easier to understand to video if it’s full screen, or at least expanded, but I think the basic idea gets across even in small-screen format. Share and enjoy!

I’m sure you already know but copying any element (in Chrome at least, I think same elsewhere) will get you the HTML. So one other way to put the element back inside its parent is to copy/cut the node, then edit HTML of the parent and paste.

This has been in Chrome for quite some time..good to know it’s made it’s way into FF. Other useful (Chrome) shortcuts are hitting the ‘delete’ key to remove the html completely or hitting the letter ‘h’ to toggle the visibility of the element. Those and right-clicking an element to edit as HTML.. very useful.

I’ve been doing this for so long I forget how long it has been available. I believe it evolved shortly after the advent of Firebug and the Deque extension to Firebug that enabled the testing, troubleshooting, and demonstration of accessibility features for websites. I wish I could remember the name of that extension.