aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/tools/tools_toolbox
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/tools/tools_toolbox
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/tools/tools_toolbox')
-rw-r--r--files/zh-cn/tools/tools_toolbox/index.html167
1 files changed, 167 insertions, 0 deletions
diff --git a/files/zh-cn/tools/tools_toolbox/index.html b/files/zh-cn/tools/tools_toolbox/index.html
new file mode 100644
index 0000000000..b54074b7cf
--- /dev/null
+++ b/files/zh-cn/tools/tools_toolbox/index.html
@@ -0,0 +1,167 @@
+---
+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>