作者Firefox 16 现已进入 Beta 频道，它包含一个很棒的功能，在 Aurora 16 博客文章 中简要提及，并在 Joe Walker 的一篇独立文章 中首次推出，Joe Walker 是该功能的创建者。我们在全新的开发者工具栏中专门划分了一部分给“命令行”，有时我们也会称之为 GCLI（图形命令行界面）。命令行提供快速键盘控制工具，并可以访问没有其他用户界面的功能。
我制作了这篇博客文章的视频版本，以便您能够看到命令行的实际操作。
要访问开发者工具栏和命令行，您可以使用 Shift-F2 键盘快捷键，也可以从 Web 开发者菜单中选择开发者工具栏。如果您想要更快的键盘快捷键（毕竟，这是一个键盘密集型功能！），您可以使用 自定义快捷键 附加组件覆盖您不使用的快捷键。
此命令行旨在快速键入和可发现。它将为您完成命令和参数，以节省您的输入时间。该命令还为命令及其选项提供了大量内置帮助。以下是对初始命令行版本随附的命令列表的介绍。
控制您的工具
我个人不喜欢去触碰触控板。把手从键盘上移开只会减慢我的速度。问题在于，记住所有键盘快捷键并不容易，而且传统的键盘导航有时并不像触控板那样快。让我们看看新的命令行如何帮助解决这个问题。
假设我忘记了 Web 控制台的键盘快捷键。我可以触碰触控板并点击 Web 控制台按钮，该按钮方便地位于全新的开发者工具栏上。或者，我可以记住命令行的键盘快捷键并运行命令 console open。瞧！控制台打开了。我实际键入以运行该命令的是“con<tab>o<tab><enter>”，这确实是快速输入。
想要了解您还可以对 Web 控制台执行哪些操作吗？键入 help console。
我甚至不确定 Web 控制台的“清除”按钮是否有键盘快捷键。运行 console clear 命令比尝试记住很少使用的快捷键更容易。
以下是当前控制开发者工具的命令。
- console – 打开、清除和关闭 Web 控制台
- dbg 和 break – 调试器和断点的许多控制
- edit – 在页面中加载的任何 CSS 文件上打开样式编辑器
- inspect – 为页面的某个部分打开页面检查器
- resize – 控制响应式设计视图
- tilt – 控制 3D 页面视图
让我们看一个更有趣的示例。当前的 mozilla.org 设计是 响应式设计。我想看看标题如何在较小的屏幕上显示。如果我一直在处理该页面，我可能会知道页面中使用的某些 ID 和结构，因此我可以输入类似以下的命令。
inspect "#home-news h3"
“inspect”命令将 CSS 选择器作为参数，用于选择页面上的节点。在任何页面上跳转到页面检查的简单方法是键入 inspect body，因为每个页面只有一个。在键入 inspect "#home-news h3" 后，我将看到类似以下内容。
在样式面板中，我可以看到此标题的字体大小设置为 28px。它在手机大小的屏幕上会是什么样子？许多手机报告其大小为 320×480。让我们通过键入以下命令来试试。
resize to 320 480
这将同时打开响应式设计视图并设置大小。以下是结果的样子。
在样式面板中，我们现在可以看到，具有最大宽度的媒体查询已生效，标题的字体大小已降至 24px。我们还可以向下滚动并查看原本并排排列的三个列现在已堆叠在一起。您可以使用 resize off 命令关闭响应式设计视图，也可以点击 <esc> 几次以返回正常浏览模式。
全新的开发者功能
我们还添加了一些命令，为您提供了全新且有用的功能。让我们看看其中的一些。
把手伸进曲奇罐
“cookie”命令突出了为什么此命令行是“图形”命令行，而不是您过去使用的 70 年代风格的命令行。在 mozilla.org 上运行 cookie list，我看到
输出显示了我目前为此网站保存的所有曲奇。如果我想删除该曲奇，我只需键入 cookie remove WT_FPC，或者，如果我认为这样更容易，我可以点击曲奇旁边列出的“删除”操作，该命令将自动输入到命令行中。我也可以使用“cookie set”命令为自己添加新的曲奇。
为了娱乐和利益而进行截图
“screenshot”命令非常方便。在 mozilla.org 上，我运行了以下命令
screenshot heading.png 0 false h1
这表示创建名为“heading.png”的文件，在拍摄之前等待 0 秒，不包括可见浏览器窗口外部的任何内容，最后只获取由“h1” CSS 选择器选择的元素。结果保存在我的“下载”目录中，看起来像这样。
命令行在每个参数的内联中提供提示。按 F1 可以获得有关当前参数的更多帮助。
停止闪烁！
“pagemod”命令允许您快速对页面进行一些批量更改。如果您正在查看页面，并且有东西在您面前闪烁，您可以使用“pagemod remove element”命令将其删除。通过键入以下命令，查看页面上所有内容在没有类的情况下会是什么样子。
pagemod remove attribute class *
或者，看看不同的标题是什么样子。
pagemod replace "Out of Date News" "The New Hotness"
以下是一个有趣的命令，可以尝试在流行网站上运行。
pagemod remove element iframe
看看您是否能发现消失的部分。
更多好东西：获取 HTML、重新配置 Firefox
“export html”命令将打开一个新标签页，其中包含页面当前状态的 HTML 快照。
“addon”命令允许您快速启用和禁用附加组件。这对隔离可能导致问题的附加组件或禁用不常用的附加组件非常有用。
“pref”命令允许您轻松更改 Firefox 的众多配置选项之一。例如，如果您想进行一些 Firefox 附加组件开发，您可能会发现此命令非常方便。
pref set devtools.chrome.enabled true
之后，使用“restart”命令重启浏览器，您会发现 Scratchpad 等工具已获得了用于在浏览器中进行黑客攻击的额外功能。虽然现在许多附加组件都是无重启的，但您会发现仍然有一些流行的附加组件在启用或禁用时需要重启，而重启命令在这种情况下也非常方便。
添加您自己的命令
命令行的最佳功能之一是它是一种高度可扩展的用户界面形式。添加更多命令不会在您整天观看的 UI 中添加视觉混乱。预计在未来的 Firefox 版本中将出现更多命令，以及在附加组件中出现的全新命令。
在未来的命令行文章中，我们将向您展示如何创建您自己的命令。这比您想象的要容易得多！
107 条评论