All topics

DocsLeaving feedback

Developer mode

For your team: inspect any element's fonts, spacing and classes, and see the page's console errors while you review.

Developer mode shows the technical side of the page while you review it: the console errors so far, and the fonts, sizes and spacing of anything you point at. It is for your team. Clients never see it.

Turn it on#

Open the settings menu on the toolbar (the sliders) and choose Turn on developer mode, or press I. Do the same, or press I again, to turn it off. Your browser remembers it.

Developer mode is there when all of these are true:

  • Your plan includes developer details: every paid plan, the free trial and AppSumo Tier 2 and 3, but not AppSumo Tier 1.
  • The project's Capture developer details setting is On, in the project's Settings under Developer details. It is On by default. Turn it off and developer mode goes too.
  • You are signed in and on the agency's team.

The errors chip#

With developer mode on, the toolbar shows how many errors the page has logged, or No errors. Press it to see the latest entries (This page so far), up to 8, including warnings.

Errors that stop a script are caught from the moment the page opens. Other console errors and warnings are caught once Drobber knows the project has developer details on, which is a moment after the page loads.

Inspect any element#

Point at anything on the page to inspect it. It is outlined the way browser developer tools do it, with the margin in amber, the padding in green and the content in blue. A card shows:

  • Its tag, id, classes, size and what it is, such as Heading 2, Paragraph, Link, Button or Image.
  • For text: the font actually in use, size and line height, weight, letter spacing, case, alignment and colour.
  • For images: the file's own size, a warning when it is much larger than it needs to be, and missing alt text.
  • Its box: background, padding, margin, border, corners, layout gaps and position.

The inspect button on the toolbar turns the card off and on. Commenting works as normal while it is on. Inspecting needs a mouse, so it does not work on touch screens.

Developer details on comments#

Comments left on the project carry the console, element and environment details. In developer mode, open a comment and choose its Developer tab to see them, or press Copy as bug report. See What each comment records.