Browser Bits

Chrome extensions for developers: inspect, debug, export

Front-end work keeps asking the same small questions. What font is that, why is this JSON unreadable, what does the heading structure look like, is that contrast ratio going to pass. These extensions answer them in the tab you already have open.

7 of 16 are live on a store.

What to look for

Prefer the activeTab shape

Font Inspector, Heading Outline and Copy All Links declare activeTab and scripting, which means nothing runs until you click the toolbar icon. Page Ruler stops at activeTab and storage, with no host permissions, but it does register a content script on every site — it just draws nothing until you press Start Measuring. Tools that ask for host access to all sites at install — SEO Toolkit, BugSnap, JSON Formatter — are loaded on every page instead, including internal dashboards and staging admin. Chrome lets you change this per extension: in chrome://extensions, set site access to 'on click' and it stays quiet until invoked.

A bug report carries more than you meant to send

BugSnap collects a screenshot, console logs and environment info into one report. Console output routinely contains auth tokens, user IDs and email addresses, and a screenshot captures whatever else was on screen. Read the report before it goes into a ticket that a lot of people can see.

A JSON viewer replaces the response you were looking at

JSON Formatter takes over pages that render raw JSON and draws a collapsible tree instead. Check two things: that you can still reach the unformatted text when you need it, via view-source: or by turning the extension off, and how it behaves on a large payload, since the parsing and rendering happen inside that tab.

Dashboards built on an API inherit that API's limits

GitHub Unfollowers talks to api.github.com, while the Velog stats dashboard and AI Credit Meter read sites you're already signed into, with host permissions naming exactly those domains. They can only show what your session or token is allowed to see, they hit the same rate limits any other client would, and if one asks you for a token, the scope you grant is the ceiling on what it can do.

Questions people ask

Is there a Chrome extension to find out what font a website uses?

Yes — Font Inspector is the one in this category. You click a piece of text and it reports the resolved font family, weight, size, line-height, letter-spacing and color, and copies the lot as CSS. It reads computed styles from the page, so what you get is the font actually being rendered, not just the first name in the font-family list.

Why use an extension when DevTools can do this?

DevTools can do most of it, and if you already live in the Elements panel you may not need any of these. The difference is steps and audience: measuring a gap, pulling a heading outline, or copying every link off a page is one click here versus a panel, a selection and some scrolling. It also matters that opening DevTools changes the viewport, which is annoying when you're checking a responsive layout.

What does 'read and change all your data on the sites you visit' actually mean?

That's Chrome's summary of host permissions plus the ability to inject scripts — it's a capability, not a description of behaviour. It means the extension can run code on those pages if it chooses to. The way to narrow it is chrome://extensions, where each extension's site access can be set to on-click or restricted to specific sites, and the ones here that declare activeTab already work that way by default.

Can I install these on a work machine?

That's a question for your organisation's policy first — managed Chrome profiles often have an allowlist, and an extension outside it simply won't install. Beyond policy, the practical concern is that an extension with all-sites access sees internal tools too, so a separate Chrome profile for work is the cheapest way to keep browsing-time utilities away from company pages.