===========
Web Console
===========


The **Web Console:**

 1. Logs information associated with a web page: network requests, JavaScript, CSS, security errors and warnings as well as error, warning and informational messages explicitly logged by JavaScript code running in the page context

 2. Enables you to interact with a web page by executing JavaScript expressions in the context of the page


.. raw:: html

  <iframe width="560" height="315" src="https://www.youtube.com/embed/C6Cyrpkb25k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  <br/>
  <br/>

.. list-table::
   :widths: 30 70
   :header-rows: 0

   * - :doc:`User interface of the Web Console <ui_tour/index>`
     - Parts of the Web Console UI.

   * - :doc:`The JavaScript input interpreter <the_command_line_interpreter/index>`
     - How to interact with a document using the Console.

   * - :doc:`Split console <split_console/index>`
     - Use the Console alongside other tools.

   * - :doc:`Console messages <console_messages/index>`
     - Details of the messages that the Console logs.

   * - :doc:`Helper commands <helpers/index>`
     - Commands use can use that are not part of JavaScript.

   * - :doc:`Rich output <rich_output/index>`
     - See and interact with objects logged by the Console.

   * - :ref:`Keyboard shortcuts <keyboard-shortcuts-web-console>`
     - Shortcut reference


Opening the Web Console
***********************

You open the Web Console from a menu or with a keyboard shortcut:

- Select the *Web Console* panel in the Web Developer Tools, accessible from the Browser Tools submenu

- Press the :kbd:`Ctrl` + :kbd:`Shift` + :kbd:`K` (:kbd:`Cmd` + :kbd:`Opt` + :kbd:`K` on OS X) keyboard shortcut.


The :doc:`Toolbox <../tools_toolbox/index>` appear at the bottom, left, or right of the browser window (depending on your docking settings), with the Web Console activated (it's just called **Console** in the :ref:`DevTools toolbar <tools-toolbox-toolbar>`