Skip to content

Latest commit

 

History

History
35 lines (25 loc) · 991 Bytes

README.md

File metadata and controls

35 lines (25 loc) · 991 Bytes

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!