Log viewer#

The log viewer component integrates into web tooling across frameworks like Angular or React. You can customize the component to suit your requirements and enable stakeholders to access logs with minimal code and hardware setup.

This guide assumes that you have pw_console set up and running. See Starting the Console.

Example of pw_console log viewer with **Open in browser** selected, no logs, and a pop-up with the URL to the web log viewer. The other pane shows logs since 'Open in Browser' is not selected.

Press Shift+O or click Open in browser in the log pane to start a websocket log server.#

Filter logs#

Filters by default apply to all columns.

Filter example with the query 'log', the log viewer highlights and filters matches.

Log viewer highlights and filters matches to ‘log’.#

To filter on a specific column, add the header name with a colon before the filter. For example, the message column uses the format message:<filter>.

The supported qualifiers are:

  • severity: Filters log level, such as info, debug, warning, error, and critical.

  • <column_name>: Any column header name can be prefixed.

Filter syntax#

Filter with


Freeform text


Freeform text with spaces

"string in quotes"
"hello world"
message:"hello world"

Regular expressions

/^hello world$/
message:/^hello world$/

Logical operators#

The language interprets spaces as AND between conditions column:value or strings "a phrase".




" "
Between conditions column:value
or strings "a phrase"
severity:warn "hello world"


Between conditions column:value
or strings "a phrase"
severity:warn | "hello world"
message:hello | message:world


Before condition column:value

Parenthesis ( and ) dennote order of operations. Example of use is (message:hello | message:"hello world") !severity:error.

Pause and resume autoscroll#

The log viewer autoscrolls to the bottom as new entries appear. Autoscroll pauses when the view scrolls up. To resume autoscroll, scroll to the bottom of the view or press the Jump to bottom button.

Autoscroll pauses when view scrolls up, **Jump to bottom** on center bottom of page resumes autoscroll.

Toggle column visibility#

Column visibility changes with the checkboxes under the toggle column menu.

Toggle fields button in topbar opens checkbox list of fields to toggle visibility.

Resize columns#

Use resize handles between columns to adjust the width of content.

Mouse cursor changes to column resize cursor between columns.

Clear logs#

To remove logs and display new logs, click the Clear logs button.

Clear logs button in topbar removes all logs from view.

Example of Clear logs button press.#

Toggle word-wrap#

To toggle between word wrapped and clipped context, click the Word wrap button.

Example of word wrap button on, where longer messages become multiple lines in height.

Example of Word wrap active.#

Split views#

To split a log view, click the Split right button or the Split down button in the Additional actions (kabob) menu.

Split Right/Split Down can be found under the additional actions menu in the toolbar.

Split Right and Split Down are in the Additional actions menu.#

Clicking on Split Right/Split Down creates a view to the right of or below the active view.

This creates a copy of the active view.#

Resize views#

To resize split views, click and drag the resize handle between them. You can also focus on the resize handle element and use and to adjust the size of the views.

Resize split views with the handle located at the border of the views.

The resize handle can be found between adjacent views.#

Download logs#

To download a .txt file of logs click the Download logs button under the kabob menu.

Download logs is found under the more actions button in the top menu.

Download logs in the kabob menu.#

Logs save to a .txt file

Logs save to a .txt file.#