开发者工具终端

Addy Osmani

DevTools 终端是一款新的 Chrome 开发者工具扩展程序，可将终端的强大功能引入到浏览器中。如果您经常需要在 Chrome 和命令行之间切换上下文来执行各种任务（例如拉取资源、使用 git、grunt、wget 或甚至 vim），那么您可能会发现此扩展程序非常有用，可以节省大量时间。

为什么要在浏览器中使用终端？

在开发过程中，您可能习惯使用一些不同的工具：用于编写的 Text Editor、用于测试和调试的浏览器，以及用于更新软件包、curl 头文件或甚至使用 Grunt 进行构建过程的终端。

在开发过程中，如果需要在工具之间切换上下文，可能会分散注意力并导致效率低下。我们之前曾介绍过，对于某些类型的项目，您可以使用 Workspaces 直接在 Chrome 开发者工具中调试和编写代码，而无需离开浏览器。

开发者工具终端（由 Dmitry Filimonov 开发）实现了这一目标，让您可以在同一窗口中编写代码、调试和构建。您可以使用 Tab、Ctrl 键，甚至 Git 颜色，让它看起来像您在日常工作流中习惯使用的终端。

工作流程

我现在在 Chrome 中创作内容的个人工作流程大致如下：

• DevTools 终端：使用它可以git clone GitHub 代码库、touch 新文件或运行 yo (yeoman) 来创建应用。如果需要，我还可以启动新的服务器来预览应用
• 工作区：在 Chrome 中修改和调试我的 Web 应用。如果我之前启动了服务器，则可以将本地项目映射到网络文件。我可以使用 Sass 或 Less，并将 CSS 预处理器更改映射回 CSS 文件。
• DevTools 终端：我现在可以提交到源代码控制系统，使用软件包管理器 (npm、bower) 拉取依赖项，或运行构建流程 (grunt、make) 来生成同一应用的优化版本。
• 虽然可能需要一段时间才能习惯窗口排列方式，但能够在浏览器内完成我所需的大部分工作，这让我感到很高兴。

安装

您可以从 Chrome 应用商店安装 DevTools 终端。如果您是 Mac 或 Linux 用户，将其添加到 Chrome 后，只需点击“审查元素”或按 Ctrl + Shift + I 即可打开开发者工具，然后您就可以通过新的“终端”标签页访问该工具。 Windows 用户需要使用 Node.js 代理将扩展程序连接到系统终端。如需实现此设置，请通过 npm 安装 devtools-terminal 模块：npm install -g devtools-terminal

然后，打开一个新的命令行窗口并运行 devtools-terminal。接下来，打开开发者工具，然后在“终端”标签页中，使用默认配置选项连接到服务器。您可以根据需要进一步自定义端口和地址。

限制

开发者工具终端确实存在一些值得注意的限制。与 Mac 上的 Terminal.app 或 iTerm2 不同，它尚不支持标签页、多个窗口或历史记录播放。不过，您可以根据需要打开任意数量的 Chrome 新标签页，每个标签页都可以有自己的 DevTools 终端实例。您可以在“Chrome 应用”屏幕上执行此操作：

此扩展程序目前依赖于 NPAPI，但我们将在明年逐步淘汰该 API，改用原生消息传递 API。开发者工具终端作者 Dmitry Fillimonov 计划在不久的将来弃用 NPAPI，改用此 API 或原生客户端 API。

总结

借助 DevTools 终端（以及类似的扩展程序，例如 Auxilio），您可以在开发过程中避免在编辑器、浏览器和命令行之间来回切换。虽然浏览器内终端可能并不适合所有人，但您可能会发现该扩展程序对您的工作流程非常有用。我们建议您试用一下，看看您是否喜欢！