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.

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.

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:

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

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

Filter syntax

Filter with	Syntax	Examples
Freeform text	string	hello message:hello
Freeform text with spaces	"string in quotes"	"hello world" message:"hello world"
Regular expressions	/regex/	/^hello world$/ message:/^hello world$/

Logical operators

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

Operator	Syntax	Use	Example
AND	" "	Between conditions column:value or strings "a phrase"	level:warn "hello world"
OR	|	Between conditions column:value or strings "a phrase"	level:warn | "hello world" message:hello | message:world
NOT	!	Before condition column:value	!level:warn !message:goodbye

Parenthesis ( and ) dennote order of operations. Example of use is (message:hello | message:"hello world") !level: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.

Toggle column visibility

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

Resize columns

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

Clear logs

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

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 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 and Split Down are in the Additional actions menu.

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.

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 in the kabob menu.

Logs save to a .txt file.