Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

In certain cases when debugging instrumented FE code, there will be diagnostic info which is output from SeaLights to the Chrome DevTools.

This document describes how to filter that out, so that the DevTools will show only the relevant information.

Problem

SeaLights outputs diagnostic information to the Network and Console tabs, which could impact debugging efforts of the instrumented application under test.

Solution

The Google Chrome DevTools have some filtering options that allow showing only the relevant requests

Hiding output from the Console Tab

The following image shows all of the events being reported to the console.

Image RemovedImage Added

To hide a group of events emitting from the same URL, right click the URL and select “Hide messages from URL”:

Image RemovedImage Added

Alternatively, type -url:<URL prefix> in the filter tab at the top of the Console tab (Red). Note the amount of hidden messages displayed on the top right corner (Orange):

Image RemovedImage Added

Hiding output from the Network Tab

The following image displays all network requests made by our application, note that all of them are SeaLights related. The Filter option marked in red allows to specify rules that allow us to hide these requests:

Image RemovedImage Added

To ignore all messages related to SeaLights, in the Filter box, type in -domain:sealights.co.

This will hide all messages related to the sealights.co domain.

Once applied, most of the requests are filtered:

Image RemovedImage Added

Info

In this specific example, the sample application is also hosted on the sealights.co domain.

This means most requests are filtered out besides static content.

For additional information about other filter options, refer to the official Google Chrome documentation.