---
title: 打開網頁主控台
slug: Tools/Web_Console/UI_Tour
translation_of: Tools/Web_Console/UI_Tour
original_slug: Tools/Web_Console/Opening_the_Web_Console
---
<p>要開啟網頁主控台：</p>

<ul>
 <li>從 Firefox 選單內的開發者工具中，點選網頁主控台（如果你讓選單出現、或是使用 Mac OS X 的話，點選「工具」選單）、</li>
 <li>或是按下快速鍵 <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd>（OS X 是 <kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd>）</li>
</ul>

<p><a href="https://developer.mozilla.org/zh-TW/docs/Tools/DevTools_Window" title="/zh-TW/docs/Tools/DevTools_Window">網頁工具箱</a>將出現在瀏覽器視窗底部，網頁主控台也會隨之啟動（<a href="/zh-TW/docs/Tools/DevTools_Window#Toolbar" title="/zh-TW/docs/Tools/DevTools_Window#Toolbar">網頁工具箱</a>只會稱它為「主控台」）：</p>

<p><img alt="網頁主控台" src="https://mdn.mozillademos.org/files/13282/console.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 845px;"></p>

<p>網頁主控台介面主要有三大部分：</p>

<ul>
 <li><a href="/zh-TW/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">工具欄</a>：位於頂部。包含了諸如「網路」、「CSS」、還有「JS」之類的按鍵。它用於過濾顯示訊息。</li>
 <li><a href="/zh-TW/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">命令行</a>：位於底部。你可以用它輸入 JavaScript 表達式。</li>
 <li><a href="/zh-TW/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">訊息顯示窗格</a>：位於工具欄與命令行之間，並佔據了視窗的大部分，是網頁主控台顯示訊息的地方。</li>
</ul>