blob: 6848e5d67cddcd6e9a2f1b485a6eb2b8c6efd8a9 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
---
title: Opening the Web Console
slug: Tools/Web_Console/UI_Tour
translation_of: Tools/Web_Console/UI_Tour
original_slug: Tools/Web_Console/Opening_the_Web_Console
---
<div>{{ToolsSidebar}}</div><p>To open the Web Console:</p>
<ul>
<li>either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li>
<li>or press the <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> on OS X) keyboard shortcut.</li>
</ul>
<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/11669/console.png" style="display: block; height: 324px; margin-left: auto; margin-right: auto; width: 952px;"></p>
<p>The Web Console's interface is split into three horizontal sections:</p>
<ul>
<li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed</li>
<li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li>
<li><a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li>
</ul>
|
