---
title: 工具箱
slug: Tools/Tools_Toolbox
translation_of: Tools/Tools_Toolbox
---
<div>{{ToolsSidebar}}</div><p>该工具箱集中提供了大部分开发工具并构建到了 Firefox 中。</p>

<p>你可以从 Web 开发者菜单（OS X 和 Linux 在“工具”菜单中，Windows 系统在“Firefox”菜单下）中选择“切换工具”打开它。或通过已激活的任何工具（如：调试器、查看器）切换打开。另外你可以按快捷键打开，Ctrl + Shift + I （Windows 和 Linux）、 Cmd + Opt + I （ OS X）。</p>

<p>默认情况下，工具箱窗口停靠在 Firefox 底边，但你可以根据自己喜好独立出来。下图为停靠在 Firefox 中的样子：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">窗口本身分为两个部分：顶部工具栏和下面的主面板：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="工具栏"><a id="Toolbar" name="Toolbar">工具栏</a></h2>

<p>该工具栏包含几个控制部分：激活特定工具、停靠/独立窗口、关闭窗口。</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="节点选择器（Node_picker）">节点选择器（Node picker）</h3>

<p>在最左边有一个按钮来激活节点选择器。允许您从页面中选择一个元素进行查看。查看“<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Select_an_element">选择元素</a>”。</p>

<h3 id="工具箱托管的工具（Toolbox-hosted_tools）">工具箱托管的工具（Toolbox-hosted tools）</h3>

<p>然后有一组标签按钮，允许您在工具箱中的不同工具之间切换。其中可能包括了以下工具：</p>

<ul>
 <li><a href="/zh-CN/docs/Tools/Web_Console" title="Web_Console">Web 控制台</a></li>
 <li><a href="/zh-CN/docs/Tools/Debugger" title="Debugger">JavaScript 调试器</a></li>
 <li><a href="/zh-CN/docs/Tools/Page_Inspector" title="Page_Inspector">页面查看器</a></li>
 <li><a href="/zh-CN/docs/Tools/Style_Editor" title="Style_Editor">样式编辑器</a></li>
 <li><a href="/zh-CN/docs/Tools/Profiler" title="Profiling_with_the_Built-in_Profiler">JavaScript 性能分析器</a></li>
 <li><a href="/zh-CN/docs/Tools/Network_Monitor" title="Profiling_with_the_Built-in_Profiler">网络监视器</a></li>
</ul>

<p>注意：并不是所有集成的工具总是会完整的在这里列出：只有实际可用的工具才会在相应的情况下显示出来（例如，不是所有的工具都支持远程调试，所以如果调试目标不在当前 Firefox 中的实例，就不会显示所有的工具）。</p>

<p> </p>

<h3 id="附加工具（Extra_tools）">附加工具（Extra tools）</h3>

<p>接下来有一组按钮，可以从<a href="#Settings">开发者工具箱选项</a>添加或删除。在默认情况下这组按钮包含：</p>

<ul>
 <li><a href="/zh-CN/docs/Tools/Web_Console#The_split_console">切换分离式控制台</a></li>
 <li><a href="/zh-CN/docs/Tools/Responsive_Design_View">响应式设计模式</a></li>
</ul>

<p>在默认情况下，以下工具不包括在工具栏中，但是你可以从<a href="#Settings">设置</a>中将它们添加进来：</p>

<ul>
 <li><a href="/zh-CN/docs/Tools/Paint_Flashing_Tool">高亮重绘的区域</a></li>
 <li><a href="zh-CN/docs/Tools/Page_Inspector/3D_view">3D 视图</a></li>
 <li><a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a></li>
 <li><a href="/zh-CN/docs/Tools/Eyedropper">从页面中抓取一种颜色</a></li>
 <li>进行整页截图： Firefox 32 新增。对一个完整的 web 页面进行截图并将它保存在您的下载目录</li>
 <li><a href="/zh-CN/docs/tools/Working_with_iframes">选择一个 iframe 作为当前的目标文档</a>：Firefox 34 新增。</li>
</ul>

<h3 id="工具箱的控制（Toolbox_controls）">工具箱的控制（Toolbox controls）</h3>

<p>最后的一组按钮了：</p>

<ul>
 <li>关闭窗口</li>
 <li>在停靠在浏览器底部和侧边之间切换</li>
 <li>在独立窗口和附加在浏览器窗口中显示之间切换</li>
 <li>访问<a href="#Settings">开发者工具箱选项</a></li>
</ul>

<h2 id="选项"><a name="Settings">选项</a></h2>

<p>单击“选项”按钮（<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="display: inline-block; height: 22px; width: 30px;">）允许您访问工具箱本身和它所承载工具的设置项：</p>

<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/10411/devtools-settings.png" style="display: block; height: 669px; margin-left: auto; margin-right: auto; width: 644px;"></p>

<h3 id="默认的_Firefox_开发者工具">默认的 Firefox 开发者工具</h3>

<p>通过启用这组复选框决定了哪些工具显示在工具箱中。新工具通常已经包实装在 Firefox 中但默认不启用。</p>

<h3 id="可用的工具箱按钮">可用的工具箱按钮</h3>

<p>这组复选框决定“附加工具”<a href="#Toolbar">工具栏</a>中显示哪些按钮。默认启用节点选择器、切换分离式控制台和响应式设计模式。</p>

<p>Firefox 32 添加了一个按钮用于完成网页的截图，默认情况不启用。</p>

<h3 id="选择开发者工具箱主题">选择开发者工具箱主题</h3>

<p>允许您在亮色和暗色主题之间进行切换：</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="常用首选项">常用首选项</h3>

<p>该设置适用于多个工具。其中只有一个选项：</p>

<ul>
 <li>启用持续日志：如果您启用此选项，Web 控制台将不会在您导航到新页面时清除已输出内容</li>
</ul>

<h3 id="查看器">查看器</h3>

<ul>
 <li>控制是否显示浏览器样式：a setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. 该设置是在Firefox 32新增的。Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</li>
 <li>默认颜色单元：设置查看器的表现颜色
  <ul>
   <li>Hex</li>
   <li>HSL(A)</li>
   <li>RGB(A)</li>
   <li>颜色名</li>
  </ul>
 </li>
</ul>

<h3 id="Web_控制台">Web 控制台</h3>

<ul>
 <li>启用时间戳：控制 Web 控制台是否显示时间戳。从 Firefox 28 开始 Web 控制台默认为隐藏时间戳。</li>
</ul>

<h3 id="样式编辑器">样式编辑器</h3>

<ul>
 <li>显示原始来源：当使用 CSS 预处理器支持源地图，这使得样式编辑器显示原始预处理器资源，而不是生成的 CSS。<a href="/zh-CN/docs/Tools/Style_Editor#Source_map_support">了解更多关于样式编辑器支持 CSS source maps</a>。选中与此项，<a href="/zh-CN/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">页面查看器的规则视图还将提供原始来源的链接</a>。</li>
 <li>自动补全 CSS：使拥有样式编辑器提供自动补全建议功能。</li>
</ul>

<h3 id="JavaScript_分析器">JavaScript 分析器</h3>

<ul>
 <li><em>显示 Gecko </em>平台数据：该设置用来控制配置文件是否应该包括 Gecko 平台符号表。</li>
</ul>

<h3 id="编辑器首选项">编辑器首选项</h3>

<p><a href="http://codemirror.net/">CodeMirror</a> 源代码编辑器偏好设置， 它包括在 Firefox 和几个开发人员所使用的工具，包括<a href="/zh-CN/docs/Tools/Scratchpad">代码草稿纸</a>和<a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a>。</p>

<ul>
 <li>检测缩进：基于当前内容进行新行自动缩进</li>
 <li>自动关闭括号</li>
 <li>使用空格缩进</li>
 <li><em>缩进尺寸</em></li>
 <li>快捷键绑定：选择默认 CodeMirror 快捷键或几种流行编辑器的快捷键
  <ul>
   <li>Vim</li>
   <li>Emacs</li>
   <li>Sublime Text</li>
  </ul>
 </li>
</ul>

<h3 id="高级设置">高级设置</h3>

<ul>
 <li>禁用缓存：禁用浏览器缓存来模拟首次加载性能。从 Firefox 33 起该设置被加入进来，意味着如果它被开启，打开工具箱时缓存将被禁用。当工具箱关闭时缓存将被重新启用。</li>
 <li>禁用 JavaScript：重新加载当前标签页，并禁用 JavaScript</li>
 <li>使服务通过HTTP工作：enable Service Worker registrations from insecure websites</li>
 <li>启用 chrome 及附加组件调试 （Firefox 38.0.5b3 及以下)）或 启用 chrome 及附加组件调试工具箱（Firefox 40.0 a2 及以上）：使您能够使用开发工具调试浏览器环境，不仅仅只是 Web 内容</li>
 <li>启用远程调试：允许开发者工具<a href="/zh-CN/docs/Tools/Remote_Debugging">调试远端 Firefox 实例</a></li>
</ul>

<h2 id="Main_Pane">Main Pane</h2>

<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p>