diff options
Diffstat (limited to 'files/zh-cn/tools/index.html')
| -rw-r--r-- | files/zh-cn/tools/index.html | 228 |
1 files changed, 228 insertions, 0 deletions
diff --git a/files/zh-cn/tools/index.html b/files/zh-cn/tools/index.html new file mode 100644 index 0000000000..160567490a --- /dev/null +++ b/files/zh-cn/tools/index.html @@ -0,0 +1,228 @@ +--- +title: Firefox 开发者工具 +slug: Tools +tags: + - Mozilla 开发 + - Web 开发 + - 'Web 开发:工具' + - 向导 + - 工具 + - '本地化:优先级' + - 网页开发 + - '网页开发:工具' +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Firefox 开发者工具是指Firefox集成的一系列web开发者工具，可用于在 PC 和移动设备上对HTML、CSS 及 JavaScript进行测试，编辑和调试</p> + +<p class="summary">这段内容包括所有关于如何在Android调试Firefox、扩展DevTools以及整个浏览器调试相关的工具和知识的详细索引。</p> + +<p>如果你在寻找有关使用 Firefox 开发者工具的信息，你来对地方了——这个页面提供了核心工具和附加工具的详尽信息，以及更深层的信息，比如如何连接调试 Firefox 安卓版，如何拓展开发者工具和如何调试浏览器。</p> + +<p>请探索侧边栏的链接，进一步浏览页面。如果你有任何有关开发者工具的反馈或问题，请在邮件列表或 IRC 频道（请查阅<a href="/zh-CN/docs/Tools#Join_the_Developer_tools_community">底部的社区链接</a>）上向我们发送消息。如果你有任何特别关于文档的反馈或问题，<a href="https://discourse.mozilla.org/c/mdn">MDN 讨论</a>适合发帖。</p> + +<div class="note"> +<p><strong>注意</strong>：如果你是 Web 开发的初学者并且使用开发者工具，我们的<a href="/zh-CN/docs/Learn">学习 Web 开发</a>文档可能会对你有所帮助 — 查看<a href="/zh-CN/docs/Learn/Getting_started_with_the_web">初识 Web</a> 和 <a href="/zh-CN/docs/Learn/Discover_browser_developer_tools">什么是浏览器开发者工具？ </a>作为一个较为合适的出发点。</p> +</div> + +<h2 id="核心工具">核心工具</h2> + +<p>在右侧的开发工具, 在 Windows 或者 Linux 使用 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> 或<kbd>F12</kbd>, 或者在 Mac OS X <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> , 有几个按钮可用于执行操作或更改工具设置.</p> + +<p>右手边的省略号菜单包括了若干命令，让你执行操作或改变工具设定。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="height: 290px; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td>这个按钮只有在页面中包含多个 iframe 时才会显示。点击显示当前页面的 iframe 列表，选择你想操作的哪个。</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td>点击这个按钮来给当前页面截图。（<strong>注意：</strong>这个特性默认不会打开，只有在设置里开启，图标才会显示。）</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td>切换至响应式布局设计。</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td>打开包括停靠模式、显示或隐藏分离式控制台和开发者工具设置的菜单。这个菜单还包括开发者工具的文档和 Mozilla 社区的链接。</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td>关闭开发者工具。</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="页面查看器">页面查看器</h3> + +<p><a href="/zh-CN/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>查看和编辑页面内容和布局。可视化页面的许多方面，包括盒子模型，动画和网格布局。</p> +</div> + +<div class="column-half"> +<h3 id="Web_控制台">Web 控制台</h3> + +<p><a href="/zh-CN/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>查看由页面和 JavaScript 交互记录的信息</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_调试器">JavaScript 调试器</h3> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>停止，浏览，检查和修改页面中运行的 JavaScript。</p> +</div> + +<div class="column-half"> +<h3 id="网络监视器">网络监视器</h3> + +<p><a href="https://wiki.developer.mozilla.org/zh-CN/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>查看加载页面时的网络请求。</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="性能工具">性能工具</h3> + +<p><a href="https://developer.mozilla.org/zh-CN/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>分析网站的响应，JavaScript 程序和布局性能。</p> +</div> + +<div class="column-half"> +<h3 id="响应式设计模式">响应式设计模式</h3> + +<p><a href="/zh-CN/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>查看网站或 app 在不同终端和网络类型上的外观和行为。</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="无障碍环境">无障碍环境</h3> + +<p><a href="/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>提供了一种访问页面的无障碍树的方法，允许你查看遗漏或需要注意的东西。</p> +</div> + +<div class="column-half"> +<h3 id="应用面板">应用面板</h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Application"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/17307/just-application-panel.jpg"></a></p> + +<p>提供现代web应用（或者叫改进web应用）预览和调试工具。包括服务工和web应用清单的预览。</p> +</div> +</div> + +<div class="note"> +<p><strong>注意</strong>：称呼开发者工具的 UI 的整体性的术语是 Toolbox（工具箱）。</p> +</div> + +<h2 id="更多工具">更多工具</h2> + +<p>这些开发者工具也内置在 Firefox 中。但不像上面的“核心工具”一样常用。</p> + +<div class="twocolumns"> +<dl> + <dt id="Memory"><a href="/zh-CN/docs/Tools/Memory">内存</a></dt> + <dd>判断哪些对象正在使用内存。</dd> + <dt id="Storage_Inspector"><a href="/zh-CN/docs/Tools/存储查看器">存储查看器</a></dt> + <dd>查看存在于页面中的 cookie、本地存储、indexedDB 和 会话存储。</dd> + <dt id="DOM_Property_Viewer"><a href="/zh-CN/docs/Tools/DOM_Property_Viewer">DOM 属性查看器</a></dt> + <dd>检查页面上 DOM 属性，函数等。</dd> + <dt id="Eyedropper"><a href="/zh-CN/docs/Tools/Eyedropper">页面取色器</a></dt> + <dd>从页面中选择一种颜色。</dd> + <dt id="Scratchpad"><a href="/zh-CN/docs/Tools/Scratchpad">便笺</a></dt> + <dd>Firefox 内置的文本编辑器，可让您编写和执行 JavaScript。</dd> + <dt id="Style_Editor"><a href="/zh-CN/docs/Tools/Style_Editor">样式编辑器</a></dt> + <dd>查看和编辑当前页面的 CSS 样式。</dd> + <dt id="Shader_Editor"><a href="/zh-CN/docs/Tools/Shader_Editor">着色器编辑器</a></dt> + <dd>查看和编辑 <a href="/zh-CN/docs/Web/WebGL">WebGL</a> 使用的顶点和片段着色器。</dd> + <dt id="Web_Audio_Editor"><a href="/zh-CN/docs/Tools/Web音频编辑器">网络音频编辑器</a></dt> + <dd>检查音频上下文中音频节点的图形，并修改其参数。</dd> + <dt id="Screenshot"><a href="/en-US/docs/Tools/Taking_screenshots">截图</a></dt> + <dd>对整个页面或单个元素的屏幕截图。</dd> + <dt id="Measure_a_portion_of_the_page"><a href="/en-US/docs/Tools/Measure_a_portion_of_the_page">测量部分页面</a></dt> + <dd>测量网页的特定区域。</dd> + <dt id="Rulers"><a href="/zh-CN/docs/Tools/Rulers">标尺</a></dt> + <dd>在网页上添加水平和垂直标尺的叠加层。</dd> +</dl> +</div> + +<div class="column-container"> +<div class="column-third"> +<p><img alt="" src="https://mdn.mozillademos.org/files/15588/logo-developer-quantum.png" style="display: block; margin: 0px auto;"></p> + +<p style="text-align: center;">体验最新的开发者工具和特性，试一试 Firefox 开发者版本吧！</p> + +<p><a href="https://www.mozilla.org/zh-CN/firefox/developer/">下载 Firefox 开发者版本</a></p> +</div> +</div> + +<h2 id="连接开发者工具">连接开发者工具</h2> + +<p>如果您使用<a href="/zh-CN/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">快捷键</a>或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是，你也可以将这些工具连接到其他目标上，无论是在当前的浏览器中，还是在不同的浏览器中，甚至是不同的设备上。</p> + +<div class="twocolumns"> +<dl> + <dt id="about:debugging"><a href="/zh-CN/docs/Tools/about:debugging">调试工具</a></dt> + <dd>调试在浏览器中运行的插件、内容页签及工作者线程。</dd> + <dt id="Connecting_to_Firefox_for_Android"><a href="/zh-CN/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">连接到 Android 的 Firefox</a></dt> + <dd>将开发者工具连接到在 Android 设备上运行的 Firefox。</dd> + <dt id="Connecting_to_iframes"><a href="/zh-CN/docs/Tools/Working_with_iframes">连接到 iframe</a></dt> + <dd>将开发者工具连接到当前页面中的特定iframe。</dd> + <dt id="Connecting_to_other_browsers"><a href="/zh-CN/docs/Tools/Firefox_Tools_Adapter">连接到其他浏览器</a></dt> + <dd>将开发者工具连接到 Android 上的 Chrome 和 iOS 上的 Safari。</dd> +</dl> +</div> + +<h2 id="调试浏览器">调试浏览器</h2> + +<p>默认情况下，开发者工具将附加到网页或Web应用程序。 但是你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。</p> + +<div class="twocolumns"> +<dl> + <dt id="Browser_Console"><a href="/zh-CN/docs/Tools/Browser_Console">浏览器控制台</a></dt> + <dd>查看由浏览器本身和插件记录的信息，并在浏览器里运行 JavaScript 代码。</dd> + <dt id="Browser_Toolbox"><a href="/zh-CN/docs/Tools/Browser_Toolbox">浏览器工具箱</a></dt> + <dd>将开发工具附加到浏览器本身。</dd> +</dl> +</div> + +<h2 id="扩展开发者工具">扩展开发者工具</h2> + +<p>对于有关拓展 Firefox 开发者工具的信息，详见在 MDN 的<a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions">浏览器拓展</a>板块的<a href="https://developer.mozilla.org/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">拓展开发者工具</a>。</p> + +<h2 id="从_Firebug_迁移">从 Firebug 迁移</h2> + +<p>Firebug 已经寿终正寝（若想了解原因，请查看页面<a href="https://hacks.mozilla.org/2016/12/firebug-lives-on-in-firefox-devtools/">Firebug 存在于 Firefox 开发者工具</a>），我们明白，迁移到一个不太熟悉的开发者工具是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换，我们写了一个简便的指南 — <a href="/zh-CN/docs/Tools/Migrating_from_Firebug">Firebug 迁移</a>。</p> + +<h2 id="贡献">贡献</h2> + +<p>如果你想帮助改进开发者工具，这些资源将帮助你入门。</p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-touch">参与其中</a></dt> + <dd>我们的开发者文档解释了如何参与。</dd> + <dt><a href="http://firefox-dev.tools/">提交故障</a></dt> + <dd>一个可用来帮助发现故障的工具。</dd> +</dl> +</div> |