Description: DomFlags is a browser extension for web developers to create shortcuts to DOM elements. Created by Phil LaPier.
web design (198937) web development (13962) keyboard (1137) extension (1068) dom (974) chrome (529) shortcut (47) devtools (17) domflags (1) web inspector (1)
<!DOCTYPE html> <html lang= "en" > <head></head> <body data-attr= "body" > <div class= "bg" ></div> <section class= "main" > <section class= "browser layer" > <div class= "header" > <div class= "browser-button first" domflag ></div> <div class= "browser-button second" ></div> <div class= "browser-button third" ></div> </div> <span class= "layer" ></span> <div class= "body" > <div class= "inner" > <h1 class= "heading-1" domflag > Domflags </h1> <h2 class= "heading-2" > bookmarks for deeply nested dom element
DomFlags are like bookmarks for navigating the DOM tree. They help you track and navigate to important elements so styling can be a breeze. The extension has auto-inspect features that help you re-engage elements with pinpoint accuracy to speed your DevTools flow.
Every seasoned designer or developer working with the DevTools has struggled with tricky elements that are difficult to inspect, or seem to get lost in the chaos of the DOM. And sometimes the DevTools just doesn't do a great job at keeping focus on the elements you're styling. DomFlags was built as a solution to track these important elements. Combined with keyboard shortcuts, DomFlags offers a fast and intuitive method to navigate the DOM.