Create keyboard shortcuts to DOM elements

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