Source code
Revision control
Copy as Markdown
Other Tools
# Web Console UI Tour
The Web Console's interface is split into three horizontal sections, detailed in the sections below.
```{image} web_console.png
:alt: Web console" alt="Screenshot of FF web console
:class: center
```
(web-console-ui-tour-toolbar)=
## Toolbar
The toolbar across the top contains a number of features:
- **Garbage can:** Click this icon to clear the contents of the console.
- **Funnel (filter):** Enter text to filter the messages that are displayed in the console message pane. {ref}`Plain-text <web-console-ui-tour-filtering-by-text>` and {ref}`regular expression <web-console-ui-tour-filtering-by-regular-expressions>` filtering are supported.
- {ref}`Filter categories <web-console-ui-tour-filtering-by-category>`: Toggle a filter category (such as Errors, Warnings, CSS, or XHR) to display messages of that type in the message page (the UI shows the number of hidden message for unselected categories).
- **Settings ("gear" menu):** Select the gear icon to access the settings menu, where you can toggle the following features on and off:
- **Persist Logs**: When enabled, the console doesn't clear on page reload, or new page load.
- **Show Timestamps**: When enabled, timestamps are shown on the left-hand side of each message row to say when the messages were logged.
- **Group Similar Messages**: When enabled, similar types of messages are grouped together, with an indicator of the number of occurrences.
- **Enable Autocompletion**: When enabled, the JavaScript interpreter attempts to autocomplete while you type.
- **Instant Evaluation**: When enabled, the interpreter displays the evaluated results of an expression, when possible, before you press {kbd}`Enter` to submit it.
## Message display pane
This is where the messages appear, both those generated by the code in the page, and those generated by the commands entered on the command line.
See {doc}`Console messages <../console_messages/index>` for a lot more detail on what the messages can contain.
:::{note}
You can clear the contents of the console by entering the keyboard command {kbd}`Ctrl` + {kbd}`Shift` + {kbd}`L` (Windows, macOS, and Linux) or {kbd}`Cmd` + {kbd}`K` on macOS.
:::
## Command line
The {doc}`command line <../the_command_line_interpreter/index>` starts with double angle brackets (>>). Use it to enter JavaScript expressions.
Clicking on the "split pane" icon on the right hand side of the command line will open the console {ref}`multi-line mode <command-line-interpreter-multi-line-mode>`.