DomFlags

Create keyboard shortcuts to DOM elements

1 follower

Create keyboard shortcuts to DOM elements

1 follower

Visit website

Launch tags:Web App•Developer Tools•Tech

Launch Team

CloudflareYour next app belongs on Cloudflare Workers. Deploy for free

Promoted

Since this is a chrome extension, couldn't you just store DomFlags in localstorage to persist after refresh?

Report

12yr ago

Bourbon

Maker

@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?

Report

12yr ago

@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.

Report

12yr ago

Bourbon

Maker

@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.

Report

12yr ago

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. :)

Report

12yr ago

Protocol Jobs

Hunter

@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.

Report

12yr ago

Bourbon

Maker

@zackshapiro I spend a ton of time tweaking inside the inspector too. Keyboard shortcuts and hotkeys are where DomFlags really shines.

Report

12yr ago

Protocol Jobs

Hunter

@phillapier Did you use Mousetrap for keyboard shortcuts? Love that library

Report

12yr ago

Bourbon

Maker

@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

Report

12yr ago

Mute.vc

Just installed. Great work @phillapier! What made you create DomFlags (and save us all)?

Report

12yr ago

Bourbon

Maker

@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.

Report

12yr ago

Mute.vc

@phillapier Interesting how you shelved it and came back later. Glad you finished, looking forward to using it!

Report

12yr ago

Bourbon

Maker

@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 :)

Report

12yr ago

Bourbon

Maker

For a live demo, open the inspector on domflags.com (with the extension installed).

Report

12yr ago

Reviews