DevTools Bookmarklet (work in progress)

A developer bookmarklet for quickly toggling grids, outlines, accessibility checks, and layout diagnostics on any website.

✨ Features

• Toggle grid overlay (.container or .container-fluid)
• Toggle column outlines
• Accessibility helpers:
  • Heading hierarchy
  • ARIA roles
  • Alt attributes
  • Color contrast warnings
• LocalStorage support to persist state
• Auto-hide toolbar on scroll
• Minified version auto-generated via Gulp

🛠 Installation

1. Clone or download this repo

2. Run:

   npm install
   npm run dev
   

🔗 How to Use the Bookmarklet

The easiest way to install and use the DevTools bookmarklet:

1. Visit the DevTools Bookmarklet Launcher Page.
2. Drag the 🛠 DevTools Bookmarklet link to your bookmarks bar.
3. Click the bookmarklet on any website to activate the developer toolbar.

That's it—no coding or manual setup required!