Skip to main content

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.

The Developer Toolbox docked at the bottom of a shop page

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.

The popup's top bar, with the toolbox button lit while the toolbox is open

On the bar itself, ? opens these docs and ✕ closes the toolbox. 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 at the top of Settings > Toolbox, under Open automatically:

  • 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. 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.

Settings > Toolbox in the popup: the position, and the list of tools with a switch each

  • 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.

Plans​

Some tools are free, some come with Tweak Basic and some 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​

ToolWhat it doesPlanOn by default
Design modeEdit any text on the page in placeFreeYes
Layout outlinesOutline every element to see the boxesFreeYes
MagnifierZoom in on the pixels under the pointer and read their colourFreeYes
Marker penDraw on the page to point something outFreeYes
Text toolType a label anywhere on screenFreeYes
NetworkThrottle the tab to a preset connection, or take it offlineFreeYes
World clocksThe time in the places you work with, under the barFreeNo
Tech stackSee what the site is built withFreeYes
ScreenshotSave or copy what is on screen, the whole page or an areaFreeYes
EraserClick anything on the page to remove itBasicYes
MoveDrag anything on the page to a new spotBasicYes
DuplicateDouble-click anything on the page to copy itBasicYes
Cookies and storageRead, edit and copy the page's cookies and web storageBasicYes
RedactBlack out text or images before a screenshotBasicNo
Grab textCopy text with a click or a drag, even off rows that open on a clickBasicNo
MarkdownSave or copy the page's content as MarkdownBasicNo
Time zone overrideMake the page believe it runs in another time zoneBasicNo
Time utilsConvert timestamps, do date math, read durations and cronBasicYes
Responsive gridsSee the page at several screen sizes at onceMaxYes
Edge casesFill a field or a form with awkward dataMaxNo
Skip form validationLift the page's form checks so any value reaches the serverMaxNo


Was this page helpful?

Need something else? Request a feature