Web Console UI Tour - Firefox Developer Tools 编辑

The Web Console's interface is split into three horizontal sections, detailed in the sections below.

Toolbar

The toolbar across the top contains a number of features:

• Garbage can: Click this icon to clear the contents of the console.
• Funnel: Click this icon to filter the messages that are displayed in the console.
• Filter categories: You can click a filter category (such as Errors, Warnings, CSS, or XHR) to display just those types of messages.
• Settings ("gear" menu): New in Firefox 71, you can click the gear icon to access the new 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 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 Console messages 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 Ctrl + Shift + L (Windows, macOS, and Linux) or Cmd + K on macOS.

Command line

The command line starts with double angle brackets (>>). Use it to enter JavaScript expressions.

In Firefox 71 onwards, there is a new "split pane" icon on the right hand side of the command line — clicking this will open the new console multi-line mode.