Pages

This guide introduces the Frosmo Debugger and shows you how to use it to preview and debug modifications during development.

If you don't need to use FProxy or do advanced debugging, consider using the Preview Tool instead of the Frosmo Debugger.

What is the Frosmo Debugger?

The Frosmo Debugger is a web application that allows you to preview and debug modifications on your site during development. You use the Frosmo Debugger mainly to:

  • Preview how modifications look and behave in different placements on the page.
  • Check whether modifications are correctly rendered on the page, and whether displays, true displays, and clicks are correctly tracked for the modifications.
  • Set up the FProxy server for the site for previewing locally stored modification content.

You can also view detailed information about modifications, placements, and events, and change your visitor settings.

Frosmo Debugger

Figure: Frosmo Debugger

For more information about modification development and how the Frosmo Debugger works with FProxy, see Introduction to modification development.

Supported browsers

The following table lists the browsers supported by the Frosmo Debugger.

Table: Browsers supported by the Frosmo Debugger

BrowserVersion
Google ChromeLatest version
Internet Explorer (IE)10 or newer
Microsoft EdgeLatest version
Mozilla FirefoxLatest version
OperaLatest version
SafariLatest version

Frosmo Debugger and workspaces

You cannot use the Frosmo Debugger to preview or debug workspace modifications. While you can launch the Frosmo Debugger in workspace preview mode, the Frosmo Debugger only shows you production modifications in the Preview and Debug tabs. You can, however, preview production modifications in both production and workspace placements. For more information about workspaces and workspace preview mode, see Workspaces.

Launching the Frosmo Debugger

You do not need to separately install the Frosmo Debugger. All you need to do is create a bookmarklet for it in your browser.

To create the bookmarklet:

  1. Open your browser.
  2. Create a new bookmark named "Frosmo Debugger", and enter the following code in the URL field:

    javascript:frosmo.easy.domElements.addScriptTag('//inpref-devtools.s3.amazonaws.com/frosmo-previewtool-dev/load_previewtool.js?baseUrl=https://inpref-devtools.s3.amazonaws.com/frosmo-previewtool-dev')

To launch the Frosmo Debugger:

  1. If you're outside the Frosmo network, either log in to the Frosmo Control Panel, and select your site, or start the FProxy server. This is needed to authenticate your Frosmo access to the site.
  2. On your site, open the page where you want to test modifications.
  3. Select the bookmarklet.

    Launching the Frosmo Debugger

The Frosmo Debugger UI is not persistent across page loads, so if you change the page or reload the current page, you need to relaunch the Frosmo Debugger.

The Frosmo Debugger will only launch on a site that uses the Frosmo Platform.

Using the Frosmo Debugger

You can use the Frosmo Debugger to:

Previewing modifications

You can preview how modifications look and behave in different placements on the page.

To preview a modification:

  1. Launch the Frosmo Debugger.
  2. Select Preview.
  3. Define the following settings:

    • Modification: Select the modification you want to preview. To filter modifications, start writing the name or ID of the modification in the field. To change the selected modification, delete the text in the field, and select a new modification.
    • Variation: Select the variation you want to preview.
    • Placement: Select the placement in which you want to preview the modification. To filter placements, start writing the name or ID of the placement in the field. To change the selected placement, delete the text in the field, and select a new placement.

      Only placements marked with a green tick are valid for the current page (based on the URL matching rules of the placement).

    Previewing a modification

  4. Click Preview. The selected modification variation is displayed in the selected placement, if it was not already.

    Previewing a modification

Debugging modifications

You can check modification status and view detailed information about modifications and placements.

To debug a modification:

  1. Launch the Frosmo Debugger.
  2. Select Debug.
  3. In the Modification field, select the modification you want to debug. To filter modifications, start writing the name or ID of the modification in the field. To change the selected modification, delete the text in the field, and select a new modification.

    Only modifications marked with a green tick are valid for the current page (based on, for example, the modification segments and the URL matching rules of the associated placement).

    Debugging a modification

  4. If you want to find and highlight the modification on the page, click Highlight.

    Debugging a modification

  5. Check whether the modification is correctly rendered on the page, and whether basic events are correctly tracked for the modification. Once the modification meets the requirements for a specific state, the corresponding box changes from red to green.

    • Rendered: Frosmo Core has called the renderer for the modification. The renderer adds the modification to the page DOM. To get rendered does not require that the modification has been in the browser viewport and therefore visible to the visitor.
    • Display: The renderer has triggered a display event for the modification. As a rule, the renderer triggers the display event immediately after rendering a modification, so the modification is rendered and displayed effectively at the same time. The display event does not require that the modification has been in the browser viewport and therefore visible to the visitor.
    • Click: The visitor has clicked a part of the modification for which clicks are tracked, such as a button, link, or any element with the class frosmo-click. Frosmo Core registers the click and triggers a click event for the modification. If the modification has no clickable parts, it cannot get a click.
    • True display: The modification has remained visible and stationary in the browser viewport for at least 3 seconds. In addition, if the modification's width and height are both less than or equal to 300 pixels, the modification must have been fully in the viewport. If the modification's width or height is greater than 300 pixels, at least 75% of the modification must have been in the viewport. Once Frosmo Core registers that the requirements for true display have been met, it triggers a true display event for the modification.

    Debugging a modification

  6. View detailed information about the modification, its placement, and the trigger attached to the placement, if any.

    Debugging a modification

Viewing visitor and site information

You can view detailed information about your visitor status, the site, and the Frosmo variables for the site.

To view visitor and site information:

  1. Launch the Frosmo Debugger.
  2. Select Info.

The following table describes the visitor and site information that you can view in the Info tab.

Table: Visitor and site information

FieldDescription
Visitor information
Console debuggingDisplay or hide debugging information for the current origin (combination of protocol, domain, and port). For more information, see Configuring your visitor settings.
Test modeActivate or deactivate test mode for the site. For more information, see Configuring your visitor settings.
Test segmentActivate or deactivate the test segment for the site. For more information, see Configuring your visitor settings.
SegmentsSegments to which you currently belong. Displays the segment IDs and names.
Target groupsTarget groups to which you currently belong. Displays the target group IDs.
Reset Frosmo contextReset your Frosmo context data to its default values. Resetting the context casts you as a new visitor. For more information, see Configuring your visitor settings.
DecileDecile to which you currently belong. You can change your decile. For more information, see Configuring your visitor settings.
Comparison groupEnable or disable the comparison group for the site. For more information, see Configuring your visitor settings.
ConversionsConversions you have completed on the site since your first visit.
Site information
OriginUnique identifier for the site.
Frosmo serverFrosmo server on which the Frosmo scripts used by the site are stored.
Script locationLocation of the Frosmo script tags in the current page's HTML code. The possible values are HEAD and BODY.
Shared contextCheck whether the site uses a shared context. For more information about shared context, see Glossary.
Data layerCheck whether the site uses the data layer. For more information about the data layer, see Frosmo data layer.
Variables information
easy.context.site

The contents of the site object in the Frosmo context.

The site object contains all site-specific context data that is not automatically added by Frosmo Core. The object is used by developers to store custom context data in a way that does not conflict with the context data stored by Frosmo Core.

Cookie size / Frosmo cookie max sizeThe combined size of all cookies associated with the current page (document.cookie.length), and the maximum combined size of all Frosmo cookies per domain (frosmo.easy.COOKIE_MAX_SIZE). The size is in number of characters.

Viewing visitor and site information

Figure: Viewing visitor and site information

Configuring your visitor settings

You can configure the following visitor settings for yourself:

  • Console debugging (origin-specific)
  • Comparison group (site-specific)
  • Decile (site-specific)
  • Frosmo context reset (site-specific)
  • Test mode (site-specific)
  • Test segment (site-specific)

To configure your visitor settings:

  1. Launch the Frosmo Debugger.
  2. Select Info.
  3. In the Visitor information section, configure the settings:

    • Console debugging: To display debugging information in the browser console and in the Event Log tab, click Enable. To hide the information, click Disable. The information consists of event messages sent by the Frosmo JavaScript library.
    • Test mode: To activate test mode for the site, click Enable. To deactivate test mode, click Disable. For more information about test mode, see Test mode.
    • Test segment: To activate the test segment for the site, click Enable. To deactivate the test segment, click Disable. This feature only works if you've created a segment with a rule that uses a query selector with the key-value pair frosmo=test. The Enable button reloads the current page with the query string ?frosmo=test appended to the page URL, adding you to the test segment. The Disable button reloads the page without the query string. (Whether or not you're removed from the test segment depends on your segment settings.)

      Test mode is the recommended method for quickly hiding modifications from regular visitors for testing purposes, so consider using it instead of the test segment. For more information, see Test mode.

    • Reset Frosmo context: To reset your Frosmo context data to its default values, click Reset. Resetting the context casts you as a new visitor. This means that, in your browser, the Frosmo Platform forgets everything you did on the site before the reset, including the segments you joined, the modifications you last viewed, the conversions you completed, and so on.
    • Decile: To change your decile, select a new one. This allows you to view the site as a visitor belonging to another decile. For more information about deciles, see Glossary.
    • Comparison group: To enable the comparison group for the site, click Enable. To remove yourself from the comparison group and disable the feature, click Disable. The Disable button is shown only when you are in the comparison group.

    Configuring your visitor settings

Viewing event information

You can view detailed debugging information for Frosmo Core events.

To view event information:

  1. Launch the Frosmo Debugger.
  2. Enable console debugging.
  3. Select Event Log.
  4. To filter the events:
    • In the text field, enter one or more keywords (separated by a space) by which to filter the events. The keywords are checked against event names and data.
    • By default, the page only shows events that are deemed important, that is, non-trivial. To view all events, including frosmo.easy.fetch() call events and events tagged as TRIVIAL, select Show all. If you've entered one or more keywords, they are used to filter the results.

The following table describes the information listed for each event in the Event Log tab.

Table: Event information

FieldDescription
Time (ms)The time after Frosmo Core started initializing at which the event occurred (in milliseconds).
EventEvent name.
DataEvent data.
Stack traceTo view the stack trace for the event in the browser console, click Console.

Viewing event information

Figure: Viewing event information

Setting up the FProxy server

If you're developing modification content in your local file system, and want to test the content in your browser before uploading it to the Frosmo back end, you need to use the FProxy server. Using the server involves starting the server application from the shell and enabling the server for your site in the Frosmo Debugger. For instructions on how to set up the server, see FProxy.

  • No labels