Developer Toolbox 🆕

The Developer Toolbox is a toolbar tweak paints on the page you are looking at. Each button is one small tool for checking, breaking, annotating or capturing that page: edit its text in place, outline every box, throttle its network, circle a bug and take the screenshot, all without opening the browser's developer tools.

Open it

Any of these opens the toolbox on the current tab, and the same gesture closes it:

• The toolbox button in the popup's top bar.
• The keyboard shortcut Ctrl + Shift + Y (⌘ + Shift + Y on a Mac). It works with the popup closed, and you can change it like any other shortcut.
• By itself, on every page or on the sites you list. See Open it automatically.

The close button's tooltip names the shortcut as your browser has it bound, so it stays right after you change it.

On the bar itself, ? opens these docs and ✕ closes the toolbox. When the bar holds more tools than the window is wide, scroll it sideways (the mouse wheel works too). Closing it switches off everything the tools applied: design mode, outlines, throttling, marks and labels. Changes made to the page itself (text you typed, elements you erased) stay until you reload. Until you close it, the toolbox belongs to the tab: it comes back after a reload with the tools you left on, and other tabs are not affected.

Esc puts away the tool you are holding (the marker, the eraser, an open menu), one layer at a time. It never closes the toolbox.

Open it automatically

If you reach for the toolbox on most pages, let it open by itself. The first time you open it, the bar offers to: pick Open in all sites or Always open on this site, or ✕ to leave it as it is. The offer shows once.

You can change your mind any time in the first row of Settings > Toolbox: pick where it opens in the dropdown, and turn it on or off with the switch beside it.

• Active on every page opens the toolbox on every page you load.
• Active on specific sites opens it only on the sites you list. A site is part of an address, such as example.com, or a regular expression, matched the way auto-enabled sites are. You can fill the list before you turn the switch on. This list only opens the toolbox: it does not start tweak's rules on those sites.

Closing the toolbox holds for that page. It opens again the next time the page loads.

An auto-enabled site with Mount the developer toolbox switched on still opens it too.

Settings > Toolbox

Open the ⋮ menu in the popup, pick Settings, then Toolbox.

• Position: Docked bottom (the default), Docked top, or a Floating bar you can drag anywhere and fold away to the tweak logo. A docked bar pushes the page aside instead of covering it.
• Tools: a switch per tool decides whether it is on the bar. Drag a row to reorder the bar, or focus its handle and use the up and down arrows. The search field filters the list, and the switch above the list turns every tool on or off at once.

Most tools are on the bar from the start. The ones marked "no" under On by default below are switched off until you turn them on here. Eraser, Move and Duplicate share one button on the bar, placed where the first of them is in your list.

Pick the tools from the bar

You do not have to leave the page to change the bar. Click the tweak logo on the bar to open Tools on the bar, the whole list of tools: click a tool to put it on the bar or take it off, and drag it (or focus it and press Alt+↑ / Alt+↓) to move it. The bar and Settings > Toolbox stay in step. Eraser, Move and Duplicate are one row there, as they are one button on the bar: a click puts all three on the bar or takes them all off, and they move together.

A keyboard shortcut per tool

Every tool can have a keyboard shortcut of its own. In Settings > Toolbox, click Add shortcut on the tool's row, then press the keys: a shortcut needs Ctrl or Alt (⌘, ⌃ or ⌥ on a Mac). Esc cancels and Backspace removes the shortcut. A combination another tool already uses, or one the browser keeps for itself, is refused in place.

The shortcut works only while the toolbox is on the page, and does exactly what a click on the tool's button does. Without the toolbox, the page gets the keystroke as usual. The tool's tooltip on the bar names its shortcut.

Plans

Eleven tools are free, nine more come with Tweak Basic and four more with Tweak Max (see the table below). A tool your plan does not include still shows on the bar, dimmed: click it to see which plan unlocks it. In Settings > Toolbox the same tools carry a Basic or Max badge. Compare plans.

Give feedback about the toolbox

Using the toolbox? Tell us which tools you reach for, what is missing and what gets in your way.

Give feedback

The tools

Tool	What it does	Plan	On by default
Design mode	Edit any text on the page in place	Free	Yes
Layout outlines	Outline every element to see the boxes	Free	Yes
Magnifier	Zoom in on the pixels under the pointer and read their colour	Free	Yes
Marker pen	Draw on the page to point something out	Free	Yes
Text tool	Type a label anywhere on screen	Free	Yes
Network	Throttle the tab to a preset connection, or take it offline	Free	Yes
World clocks	The time in the places you work with, under the bar	Free	No
Tech stack	See what the site is built with	Free	Yes
Screenshot	Save or copy what is on screen, the whole page or an area	Free	Yes
QR code	Open the page on your phone by scanning its address	Free	No
Fonts	Hover text to see its typeface, size, colour and contrast	Free	No
Eraser	Click anything on the page to remove it	Basic	Yes
Move	Drag anything on the page to a new spot	Basic	Yes
Duplicate	Double-click anything on the page to copy it	Basic	Yes
Cookies and storage	Read, edit and copy the page's cookies and web storage	Basic	Yes
Redact	Black out text or images before a screenshot	Basic	No
Grab text	Copy text with a click or a drag, even off rows that open on a click	Basic	No
Markdown	Save or copy the page's content as Markdown	Basic	No
Time zone override	Make the page believe it runs in another time zone	Basic	No
Time utils	Convert timestamps, do date math, read durations and cron	Basic	Yes
Responsive grids	See the page at several screen sizes at once	Max	Yes
Edge cases	Fill a field or a form with awkward data	Max	No
Smart autofill	Fill a form, or one field, with realistic data it accepts	Max	No
Skip form validation	Lift the page's form checks so any value reaches the server	Max	No

---

Was this page helpful?

Need something else? Request a feature

  Thanks for your feedback!