DevUtils Sidebar

35+ dev tools in Chrome's Side Panel: JSON, JWT, regex, hashes, vault, notes, aliases, image, QR. 100% local.

DevUtils Sidebar is a productivity workspace that lives inside Chrome's side panel — open it once with ⌘+Shift+K / Ctrl+Shift+K and your notes and your dev tools follow you across every tab. No popups, no detached windows, no context switch. Read the docs, draft the code, format the JSON, jot the note — all without leaving the page. ═══════════════════════════════════════════════════ A WORKSPACE BUILT AROUND NOTES ═══════════════════════════════════════════════════ The Notes tool is the heart of the side panel. It's a full Markdown editor with the shortcuts you already know: • Type `#`, `##`, `###` for headings; `- ` for bullets; `1. ` for ordered lists; ```​```js``` for syntax-highlighted code blocks (36+ languages via highlight.js). • Paste rich content and it auto-formats — markdown stays markdown, JSON pretty-prints inside a fenced block, code stays as code. • Inline links render as styled `[text](url)`; click any link to open a compact action chip with edit / copy / open / remove. Hover shows the destination. Cmd/Ctrl+click opens in a new tab. • Pin notes you reach for daily, organize the rest into folders, and let the editor zoom (60 – 200 %) match your eyes. • Recent / pinned / folder views make it easy to track what you've been working on — your notes are a working journal, not a graveyard. The point isn't to replace your IDE notepad or your "real" doc tool — it's to keep the *quick* thinking close to the work you're doing. Comfortable to write in, fast to find again, never another tab to switch to. ═══════════════════════════════════════════════════ 40 DEV TOOLS, ONE PANEL, ZERO INSTALLS ═══════════════════════════════════════════════════ Everything you usually paste into "json format online" or "base64 decoder" or "regex tester" — already here, already offline, already one keystroke away: ▸ FORMATTERS — JSON, SQL, YAML, XML, HTML, CSS, JavaScript, JSON Schema → TypeScript, Mock Data ▸ ENCODERS — Base64 (URL-safe), URL / Query-String, HTML Entity, JWT decode + sign (HS256/384/512), Hash (MD5 / SHA-1 / SHA-2…), HMAC ▸ GENERATORS — UUID, Password (crypto-safe, entropy display), QR (designer styles, VietQR, Wi-Fi), Image converter (PNG/JPEG/WebP/AVIF/ICO) ▸ CONVERTERS — Unix timestamps, Timezone compare, Date diff, cURL → curl/fetch/axios, Color (HEX/RGB/HSL/HSV + WCAG contrast) ▸ INSPECTORS — Regex tester, URL parser, Cron parser, Diff checker, HTTP Headers, Text counter / case / sorter, Localhost scanner (live list of running dev servers) ▸ EDITORS — Plain text, CSV / TSV (spreadsheet grid), XLSX workbooks, PDF viewer ▸ WORKSPACE — Notes (above), Aliases (`du <key>` → URL from the address bar), Vault (AES-GCM-256, PBKDF2-SHA-256 with 600 000 iterations) Spotlight (⌘K / Ctrl+K) is a fuzzy launcher across every tool. Open tools land in tabs at the top of the panel so multiple workflows stay side-by-side without losing state. ═══════════════════════════════════════════════════ PROFILE SHARING — ONE FOLDER, EVERY CHROME PROFILE ═══════════════════════════════════════════════════ Settings → Data → Folder sync lets you point the extension at any directory on disk (Documents, Dropbox, iCloud Drive, your Git repo, your own NAS — whatever you trust). From that moment on: • Your notes, aliases, prefs, and the encrypted vault envelope live in that folder as plain JSON files (`notes.json`, `aliases.json`, `prefs.json`, `vault.json`). • Open Chrome on another machine (or another Chrome profile on the same machine), point it at the same folder, and you're working against the same data instantly — no account, no sign-in, no "syncing…" spinner. • Two profiles editing the same note? The panel polls the folder every 1 – 10 seconds (your choice) and reflects external edits as they land. A "modified by another device" notice appears when a collision is detected so nobody silently loses work. • The files are plain JSON — you can edit them in any text editor, pipe them through your scripts, version-control them with git, diff them, back them up. No middleman, no SaaS bill, no vendor sync infrastructure. The folder is yours; what's in it stays in it. ═══════════════════════════════════════════════════ YOU OWN YOUR DATA ═══════════════════════════════════════════════════ • Zero outbound network requests by default. The extension has no `host_permissions` for any remote origin. • No accounts. No telemetry. No analytics. No third-party SDKs. • Your data lives in `chrome.storage.local` (per-profile, on-device, managed by Chrome) and — if you opt in — in a folder you picked. • The Vault is end-to-end encrypted on your machine: AES-GCM-256 with a key derived from your passphrase via PBKDF2-SHA-256 (600 000 iterations). The key exists in memory only while the vault is unlocked and is wiped after 15 minutes of inactivity, when you press Lock, or when the side panel closes. • Backup whenever you want — a single JSON file you can save anywhere, restore on a new machine, or commit to a private repo. The only optional permissions, requested at runtime when you turn the matching feature on: • `bookmarks` — only when you flip "Show aliases in the address bar" or enable "Notes via bookmarks" cross-profile transport. Revoking the toggle removes the managed folder. • `http://localhost/*` + `http://127.0.0.1/*` — only for the Localhost tool's port scan. Reaches your own machine only; no remote origin is reachable. Revocable from the tool. Full privacy policy: <YOUR_PRIVACY_POLICY_URL> ═══════════════════════════════════════════════════ KEYBOARD ═══════════════════════════════════════════════════ ⌘+Shift+K / Ctrl+Shift+K Open / close the side panel ⌘K / Ctrl+K Spotlight launcher ⌘1–9 / Ctrl+1–9 Switch to tab 1 – 9 Cmd/Ctrl + K (in editor) Add link to selection Cmd/Ctrl + click on a link Open in a new tab ↑ / ↓ / ← / → Navigate the tool grid Enter Open / commit Esc Close popovers, exit search ═══════════════════════════════════════════════════ WHY A SIDEBAR? ═══════════════════════════════════════════════════ A new tab breaks your reading flow. A floating popup blocks the page you were just looking at. A separate app pulls you out of Chrome entirely. The side panel is the one place that's *always within reach but never in your way* — visible at the edge of the same window you're already in, ready when you need it, ignored when you don't. Built on React 19, TypeScript, Vite 6, Manifest V3. 529 unit tests. Requires Chrome 116+. Open-source, MIT. We hope DevUtils Sidebar quietly becomes the thing you reach for every day — comfortable, fast, and entirely yours.