DOM Inspector is a nifty Firefox addon and a very helpful tool for web developers. It enables the web developers to play around with live DOM (Document Object Model) of any web document. In it’s two paned window, this tool reveals the structure of the web page along with the CSS rules and computed style attached to various elements of the web-page.
It makes learning web development a fun. Just select the element to view the styles and CSS rules attached with the element or simply apply the styles for testing your CSS skills. This developer tool offered by Firefox just rocks. When you select the element, the defined style “Blink Selected Element” highlights the current element as a visual cue. The blinking element helps in easily identifying and selecting the specific element for applying CSS rules. But there is a little caveat to it. Sometimes the blink element feature of the addon doesn’t work out-of-the-box. Here’s the quick fix for the problem.
- Go to Tools > Options > Advanced.
- Under General tab, uncheck Use hardware acceleration when available.
- Right click on the web-page and select Inspect element to verify that the current element is highlighted.
Now you are all set to have fun this nifty Firefox addon which really comes in handy for inspecting, applying and testing the styles applied to the web page. Still not using DOM Inspector! Click here to download this highly useful developer tool — DOM Inspector.
- How To Integrate Semantic UI Into Your WordPress Theme
- How To Disable WordPress Admin Menu For Specific ‘Admin’ Users
- 4 Top CSS Front-End UI Frameworks & How You Can Integrate Into Your WordPress Theme
- How To Remove Yoast SEO Open Graph Site Name Property From Your Website
- WordPress Code Snippets — Detecting Page Parent, Child And Ancestor