Chrome extensions for developers: a starter kit built around AyeTab
One local toolbox for everyday conversions, plus the framework debugger you ship with, and nothing else.
By ClaudeGPT Si Newsroom, Editorial team
3 min read
The Chrome extensions for developers worth installing fall into two groups: one general toolbox for the small conversions you do all day, and a debugger for the framework you actually ship. AyeTab is the free toolbox to start with, because it puts formatters, decoders and generators on your new tab and runs all of them inside the browser.
Start with one toolbox, not ten single-purpose add-ons
A common pattern is to install a JSON viewer, then a Base64 helper, then a colour picker, then a timestamp converter. Each one asks for its own permissions, adds its own toolbar icon and gets updated on its own schedule. After a year you have a crowded toolbar and no clear idea what each extension can read.
AyeTab replaces that pile with a single extension. It takes over the new tab page, lists its tools on the left and opens the one you pick on the right. The same tools also open in Chrome's side panel, so you can decode something without leaving the page you are debugging.
What you get in it:
- Format and validate: JSON, HTML, CSS, JavaScript, SQL and XML formatters.
- Encode and decode: Base64, URL encoding, HTML entities, a JWT debugger and a hash generator (MD5, SHA-1, SHA-256, SHA-512).
- Convert: YAML and JSON, JSON and CSV, Unix time, colour formats, PX to REM, cURL to fetch or Python, and JSON to TypeScript or Go types.
- Inspect: a regex tester, a text diff, a cron parser and an X.509 certificate decoder.
- Assets: a favicon generator, an SVG optimiser, an image converter and a WCAG contrast checker.
Add your framework's debugger
A toolbox does not see inside your running app. For that, install the devtools that match your stack. Each one adds a panel to Chrome DevTools:
| Extension | What it adds | Install it if |
|---|---|---|
| AyeTab | General developer utilities on the new tab and in a side panel | You write code in a browser-heavy workflow |
| React Developer Tools | React debugging tools inside Chrome DevTools | You ship React |
| Vue.js devtools | A DevTools panel for debugging Vue.js apps | You ship Vue |
| Redux DevTools | A view of application state changes | Your app uses Redux or a similar state container |
For performance and accessibility audits you may not need an extension at all: Lighthouse, Google's open-source auditing tool, runs from inside Chrome DevTools.
How to set the kit up
- Install AyeTab from the Chrome Web Store. Your next new tab shows the tool list.
- Press Ctrl+K (Cmd+K on a Mac) and type a tool name to jump to it. Press ? to see the other shortcuts.
- Star the tools you use most. Favorites pin to the top of the list.
- Try smart paste: paste a JWT, a JSON blob, a Base64 string or a URL, and AyeTab suggests the tool that fits.
- Add only the framework devtools you need. Remove any extension you have not opened in a month.
If you want the default Chrome new tab back, disable or remove AyeTab and it returns.
Why local tools matter for developers
The text developers paste into utilities is often sensitive: a production token, a customer record from a support ticket, an internal config file. A website that formats or decodes text may send your input to its server. AyeTab does the work in the browser, with no upload and no account, and keeps working offline once installed. Its listing asks only for side panel and storage permissions. Favorites, recents and your wallpaper stay on your machine, and you can export your preferences as JSON.
Prefer not to install anything? The AyeTab web app has the same tools in a normal tab.
When something else fits better
If your work is mostly inside one framework's component tree, that framework's own devtools will matter more to you day to day than any general toolbox. AyeTab is the layer underneath, for everything that is not framework-specific.