meyerweb.com

Skip to: site navigation/presentation
Skip to: Thoughts From Eric

Element Dragging in Web Inspectors

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!

Eight Responses»

    • #1
    • Comment
    • Wed 18 Jan 2017
    • 1040
    Shane Hudson wrote in to say...

    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.

    • #2
    • Comment
    • Wed 18 Jan 2017
    • 1042
    Brian Haferkamp wrote in to say...

    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.

    • #3
    • Comment
    • Wed 18 Jan 2017
    • 1124
    Benjamin wrote in to say...

    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.

    • #4
    • Comment
    • Wed 18 Jan 2017
    • 1148
    Vasu Tummala wrote in to say...

    This is in Safari/Webkit as well, and I think predates the Blink spin-off

    • #5
    • Comment
    • Thu 19 Jan 2017
    • 0505
    Cliff Tyllick wrote in to say...

    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.

    • #6
    • Pingback
    • Thu 19 Jan 2017
    • 0750
    Received from Dew Drop - January 19, 2017 (#2405) - Morning Dew

    […] Element Dragging in Web Inspectors (Eric Meyer) […]

    • #7
    • Comment
    • Fri 20 Jan 2017
    • 1619
    Will Kessel wrote in to say...

    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!

    • #8
    • Comment
    • Tue 24 Jan 2017
    • 1845
    Erin wrote in to say...

    Thanks for sharing! I sent this over to my team today and there were many happy gifs in response.

Leave a Comment

Line and paragraph breaks automatic, e-mail address required but never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Remember to encode character entities if you're posting markup examples! Management reserves the right to edit or remove any comment—especially those that are abusive, irrelevant to the topic at hand, or made by anonymous posters—although honestly, most edits are a matter of fixing mangled markup. Thus the note about encoding your entities. If you're satisfied with what you've written, then go ahead...


January 2017
SMTWTFS
December February
1234567
891011121314
15161718192021
22232425262728
293031  

Sidestep

Feeds

Extras