DomFlags

Create keyboard shortcuts to DOM elements

get it

Reviews

Discussion

You need to become a Contributor to join the discussion - Find out how.
Ryan HooverPro@rrhoover · Founder, Product Hunt
This is one of the nerdiest hunts yet. Love it. It gives @zackshapiro an opportunity to hotkey all the things so of course he posted it. :)
12
Zack ShapiroHunter@zackshapiro · Director of Engineering at BUMP (YC W18)
@rrhoover I just realized I have a hotkey problem. As someone who spends a lot of time in Chrome Inspector tweaking and testing things, I got super excited for DomFlags.
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@zackshapiro I spend a ton of time tweaking inside the inspector too. Keyboard shortcuts and hotkeys are where DomFlags really shines.
12
Zack ShapiroHunter@zackshapiro · Director of Engineering at BUMP (YC W18)
@phillapier Did you use Mousetrap for keyboard shortcuts? Love that library
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@zackshapiro Looks like a convenient library. The chrome extension API provides a way to implement keyboard shortcuts, but your limited to 4 by default. The user can add more in: chrome://extensions/configureCommands
17668
tom meagher@tomfme · now is good.
Just installed. Great work @phillapier! What made you create DomFlags (and save us all)?
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@thomasmeagher There comes a point where you reach the local maximum of your tools, and you either stay stuck there or build a solution. The idea grew from my frustration for the inability to track DOM elements, particularly with JS based frameworks where DOM nodes are magically swapped in and out of the page. So I shopped the idea around and heard positive feedback. I initially prototyped the idea in early winter where the interface was just a clickable panel. I shelved it, but picked it back up in spring and have been developing it since. The real "ah-ha" moment was when I added keyboard shortcuts. They make DomFlags 10x more useful. Like any tool, it'll take some effort to adopt it in your workflow, but when you do, you'll wonder how you ever worked without it.
17668
tom meagher@tomfme · now is good.
@phillapier Interesting how you shelved it and came back later. Glad you finished, looking forward to using it!
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@thomasmeagher Shelved partially because I needed more time to think through features and the marketing approach. And partially because of time constraints. I've still got a few more features I'm thinking about building. Also, open the inspector on the landing page for a live demo :)
4467
ezra@ezrasuki · developer
Since this is a chrome extension, couldn't you just store DomFlags in localstorage to persist after refresh?
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@ezrasuki That idea briefly crossed my mind. But I'll have to explore that idea further to see if it'll work. The entire DOM node would need to be stored, and i'm not sure if the devtools would maintain a reference to that same node after a page refresh. I'm definitely adding this to the list of future features. How high is your interest in it?
4467
ezra@ezrasuki · developer
@phillapier Yeah now I can see how it's a more challenging than I had initially thought. Just to share what was going on in my head: normally when you install an extension you expect it to be "omnipotent", and having to update my code to make it work didn't really click with me at first.
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
@ezrasuki I encourage you to watch the YouTube demo video for more insight into the features:
. Think of the extension more like a missing feature of the DevTools. Like console.log but for the DOM.
31050
Phil LaPierMaker@_lapier · Product Designer at Dropbox
For a live demo, open the inspector on domflags.com (with the extension installed).