TipsMake.com-在接下来的文章中，我们将介绍并指导您如何利用和使用 Firefox 中支持的 Web Developer 工具包。组件包括一个用于分析、检查网站、通过 HTTP 实现任何类型的 JavaScript 代码、请求和消息的应用程序。最近，Mozilla 在 Firefox 10 版本中集成了 Inspector 工具并更新了 Scratchpad。这种组合使“火狐”成为为数不多的适合在线应用程序开发人员和 Web 开发人员的理想浏览器之一。
页面检查器：
通过选择该区域，右键单击并选择 Inspect（按 Q）检查任何网页上的特定部分，或者您可以直接从 Web Developer 菜单启动 Inspector：
.png)
您将看到一个工具栏显示在屏幕底部，用于Inspector 控件。选择某些组件时，其余的都将被模糊：
.png)
如果你想选择一个新的细节，点击工具栏上的Inspect按钮，移动光标，选择一个新元素然后Firefox 将在鼠标位置正下方突出显示它：
.png)
此外，Inspector简洁恰当的布局也帮助我们轻松区分不同的父子对象。
HTML 检查器：
点击HTML按钮显示当前选中的HTML代码：
.png)
在这里，我们可以扩展或收缩HTML标签。如果您想以简单的方式查看整个代码，请从 Web Developer 菜单中选择 View Page Source 。
.png)
CSS 检查器：
点击Style按钮以显示应用于所选部分的CSS格式。
.png)
还有一个CSS属性面板，用户可以通过点击Rules按钮或Properties在它们之间切换 ，如果您想快速搜索信息，请在搜索框中输入相应的数据。
.png)
或者直接从规则面板快速轻松地编辑CSS，取消选中任何框关闭规则，点击相应链接更改规则，手动分配新规则。顶部面板中的对象。例如，这里我们添加了 CSS font-weight:bold 属性 ; 使文本变为粗体。
.png)
JavaScript 便签：
新的 Scratchpad 功能已由 Mozilla 开发人员集成到 Firefox 10 中，现在可以标记必要的语法和命令。 p>
.png)
之后选择某段代码，选择执行>；运行菜单，选中的代码会直接在打开的标签页上运行。
.png)
网页控制台：
事实上，这是旧版浏览器中 错误控制台 部分的替代品-新版 Firefox 将很快将其删除。
.png)
主控制台部分显示四种不同类型的通知：
- 网络中发送的请求、信号。
- JavaScript 错误消息。
- CSS 错误消息。
- 来自网络开发者部分的通知。
那么来自Web Developer的通知是什么？这些只是从 window.console 对象显示的消息。例如，我们可以直接在 Scratchpad 中运行 JavaScript 代码 window.console.log ('Hello World'); 将这条消息打印到 Console 。此外，Web 开发者可以将此功能与 JavaScript 集成以提高调试能力。
.png)
刷新当前页面，我们将看到系统创建的网络需求以及许多其他通知。
.png)
使用搜索框过滤数据，点击请求显示详情，具体为：
.png)
在 Firefox 10 中，Web 控制台可以与 Page Inspector 协同工作。参数 $0 是 Inspector 表中的选定对象。因此，如果您想隐藏任何对象，只需在控制台部分选择并运行命令 $ 0.style.display='none'。
.png)
如果您想了解更多关于如何使用控制台及其相关功能，请访问Mozilla开发者网络官方网站。
获取更多工具：
另外，Get More Tools 选项会切换到 Web Developer 的 Toolbox 上的添加 Mozilla Add-Ons 网站系统，包括许多面向程序员、Web 应用程序开发人员的实用程序，一些应用程序支持，如 Firebug 或 Web Developer Toolbar。
评论