summaryrefslogtreecommitdiffstats
path: root/devtools/docs/user/web_console/ui_tour
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/docs/user/web_console/ui_tour')
-rw-r--r--devtools/docs/user/web_console/ui_tour/index.rst50
-rw-r--r--devtools/docs/user/web_console/ui_tour/web_console.pngbin0 -> 12845 bytes
2 files changed, 50 insertions, 0 deletions
diff --git a/devtools/docs/user/web_console/ui_tour/index.rst b/devtools/docs/user/web_console/ui_tour/index.rst
new file mode 100644
index 0000000000..50495744b5
--- /dev/null
+++ b/devtools/docs/user/web_console/ui_tour/index.rst
@@ -0,0 +1,50 @@
+===================
+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 (New in Firefox 71), 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 <../the_command_line_interpreter/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.
+
+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 :ref:`multi-line mode <command_line_interpreter_multi_line_mode>`.
diff --git a/devtools/docs/user/web_console/ui_tour/web_console.png b/devtools/docs/user/web_console/ui_tour/web_console.png
new file mode 100644
index 0000000000..e8f5e27203
--- /dev/null
+++ b/devtools/docs/user/web_console/ui_tour/web_console.png
Binary files differ