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.
Eric:
Thanks for sharing this. I just checked in my production version of Chrome and it works in Chrome, too. In Chrome I was able to move things back and forth without having to create a new div.
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.
This is in Safari/Webkit as well, and I think predates the Blink spin-off
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.
[…] Element Dragging in Web Inspectors (Eric Meyer) […]
Been doing this for a while – I thought everybody else knew about it and that I was the last to pick it up! I spend close to a third of my dev time in the inspectors – even more during debug!
Thanks for sharing! I sent this over to my team today and there were many happy gifs in response.
Comments (8)
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.
Eric:
Thanks for sharing this. I just checked in my production version of Chrome and it works in Chrome, too. In Chrome I was able to move things back and forth without having to create a new div.
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.
This is in Safari/Webkit as well, and I think predates the Blink spin-off
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.
Pingback ::
Dew Drop - January 19, 2017 (#2405) - Morning Dew
[…] Element Dragging in Web Inspectors (Eric Meyer) […]
Been doing this for a while – I thought everybody else knew about it and that I was the last to pick it up! I spend close to a third of my dev time in the inspectors – even more during debug!
Thanks for sharing! I sent this over to my team today and there were many happy gifs in response.