Skip to main content

Inspector

Overview

Inspector is a small yet helpful multi-tool, a perfect assistant in web development. We can open it by clicking on the "Bug" icon on the builder panel or by hotkey

Inspector UI

Inspector is a small modal window that can be dragged over the page. It has several modes:

  1. Highlight/select elements in single click.
  2. Highlight/select elements in double click.
  3. Inspect elements mode for displaying a detailed info about CSS properties applied.
  4. Measurements mode for displaying an info about distances between elements.
  5. Inline editing mode.

Highlighting elements modes can be used for creating an overlay over HTML elements for better visual control of their size and getting info about the precise HTML tag used for the element. The overlay includes label with the name of the module/element and its HTML tag name.

Why would we need single/double click modes? The difference is that in the single click mode selecting element that is a module (below 👇 read more about the overlay types) will instantly open settings for this module. Therefore, it is not possible to select/highlight more than one element.

Pro's of "single mode":

  • opens module's settings right away;

Con's of "single mode":

  • not possible to select more than one module;
  • for form fields, like text input, it is harder to focus on the field itself to use its functionality;
  • using an interactive module, especially SmartForm, we might want to keep its setting opened instead of settings of the clicked one module, that will happen open in case of debugging the SmartForm and using their form fields all the time;

Instead, the double click highlighting mode allows selecting more than one module and does not open settings of the selected module upon its selection.

Pro's of "double mode":

  • does not open module's settings right away; it is useful when debugging the SmartForm or similar;
  • possible to select more than module; it allows to bulk duplicate/delete;

Con's of "single mode":

  • does not open module's settings right away;

Con's of "single mode":

What the Inspector is not?

Inspector is not a complete browser's "devtools" replacement! Browser's inspector displays all the information about DOM elements plus it has a JS console. We recommend use it often, it is the number one debug tool!

What the Inspector is?

Inspector is a quick and convenient way to inspect specific module - its CSS settings. It shows the info about CSS properties added inside the builder to the specific module and CSS selectors created in the module settings.

Overlays

Each HTML element in the builder content can be hovered over in order to display an overlay with the info related to this element. These are module's label and/or HTML tag name (for non-modules). Color of the overlay instantly suggests additional information about the type of the element.

Turquoise color highlights HTML elements created by module. Turquoise color for modules

tip

Double click on the element highlighted with turquoise color opens this module settings!

Pink color highlights HTML elements created by Collection. These are "repeater items". Pink color for repeater items

Orange color highlights HTML elements added as content (e.g. span inside Heading module or custom HTML content in Raw HTML module). Orange color for custom HTML

Also we can select a specific HTML element. This time the overlay will be blue. Selecting elements reveals quick controls UI - these icons are located on the Inspector window. It works for elements created by module only! Quick controls allow quick access to module's settings, duplicating the module and deleting it. Selected element

  1. open settings of the selected module
  2. duplicate the selected module
  3. delete the selected module

Inspector modes in the details

We already mentioned that Inspector has 5 modes. Each one is useful for particular case.

Measurement mode helps to check the distances between the elements. The distance in px will be shown on selecting/hovering over the elements. Measurements mode

Inspect mode displays a detailed info about CSS rules applied to the element. Measurements mode

Inline editing mode allows using inline editor for many (but not all) modules. Measurements mode