Zack Shapiro

DomFlags - Create keyboard shortcuts to DOM elements

by•

Add a comment

Replies

Best
Ryan Hoover
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. :)
Zack Shapiro
@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.
Phil LaPier
@zackshapiro I spend a ton of time tweaking inside the inspector too. Keyboard shortcuts and hotkeys are where DomFlags really shines.
Zack Shapiro
@phillapier Did you use Mousetrap for keyboard shortcuts? Love that library
Phil LaPier
@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
tom meagher
Just installed. Great work @phillapier! What made you create DomFlags (and save us all)?
Phil LaPier
@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.
tom meagher
@phillapier Interesting how you shelved it and came back later. Glad you finished, looking forward to using it!
Phil LaPier
@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 :)
ezra
Since this is a chrome extension, couldn't you just store DomFlags in localstorage to persist after refresh?
Phil LaPier
@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?
ezra
@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.
Phil LaPier
@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.
Phil LaPier
For a live demo, open the inspector on domflags.com (with the extension installed).