Measurements, colors, and code with developer mode

Whoever codes the interface finds everything they need from each screen in the portal, without asking for screenshots or measurements.

Open developer mode

In the viewer, click Dev in the bottom bar, or the Dev tab in the panel on the right. It stays on when you move from one screen to another.

Measure and inspect an element

1. Move the cursor over the screen to measure what's under it.
2. Click an element to select it.
3. With one selected, hover over another to see the distance between the two. With Alt, the distance to the edge.

For the selected element you see its size and its selector, its text, its Typography (font, size, weight, line height, letter spacing, and color), and its Box (margin, padding, corners, border, and background). Each value copies with one click.

At the bottom, Copy CSS and Copy HTML, and the checkboxes to see the code. If it's an SVG icon, Copy the SVG code.

Assets and colors

• Screen assets: the images and icons it uses, to view them on a light, dark, or checkered background, and download them one by one.
• Screen colors: each color, in HEX, RGB, or HSL; a click copies it and, on hover, it highlights where it's used.

Download

The same tab has the Downloads for the screen or the whole delivery, if the studio turned them on: see Download the delivery files.

For the studio

Developer mode is turned on per delivery in What the client sees › Tools › Developer mode. It depends on the studio's plan:

If the plan doesn't include it, the switch shows off and says From the Professional plan. With the Public link it never shows: that one is for viewing only. With a password, anyone who gets into the delivery sees it.