Version 1.1 Released

DevTools reimagined

When it comes to building interfaces, DevTools is clunky, slow, and cramped. MageTools is a faster, easier alternative. Built by Mark.

Get it free
The MageTools interface
Showing the styles for the focused element
Faster style checking

Inspect styles with a click.

Unlike DevTools, MageTools doesn't resize the page or take multiple clicks to open. It starts up faster than DevTools and lets you freely click any element to see its styles.

Faster attribute inspection

Quick-view HTML.

MageTools makes it easy to inspect an element's HTML just by hovering over it. View classes, IDs, hrefs, URLs, and any other attributes, front and center.

Hovering over an element to see its HTML attributes
Showing the parents and children for the focused element
Easier DOM navigation

Jump to parents and children.

MageTools makes it easy to jump between parent and child elements with a tree view. Easily find the elements you're looking for. Double-click one to jump straight into its styles.

Live CSS editor

Test CSS in real time.

MageTools gives you a real-time CSS editor. Live-preview your changes without leaving your browser.

The CSS editor inside MageTools
The attributes editor inside MageTools
Live attribute editing

Live-edit HTML attributes.

Edit image URLs, placeholder text, inline styles, and even classes in real time. Perfect for previewing changes in frameworks like Tailwind.

Faster navigation

Use keyboard shortcuts.

MageTools uses intuitive keyboard shortcuts like the number keys to make navigation a breeze. You shouldn't need to memorize key combinations for browser tools.

  • 1 Show styles for focused element
  • 2 Show parents and children
  • 3 Open CSS editor
  • 4 Open HTML attribute editor
  • Left Move to left side of screen
  • Right Move to right side of screen
  • Esc Close MageTools
  • ? Set your own opening shortcut

MageTools is a privacy-friendly extension. It doesn't require any special permissions and can't access any page until you invoke it.

Basic
Free
  • View styles on click
  • View attributes on hover
  • Navigate between parent and child elements
  • Use easy keyboard shortcuts
  • Try out CSS rules in real time
  • Edit HTML attributes in real time
Install on the Chrome store
Professional
Pay what you want
  • View styles on click
  • View attributes on hover
  • Navigate between parent and child elements
  • Use easy keyboard shortcuts
  • Try out CSS rules in real time
  • Edit HTML attributes in real time
Pay what you want