开发者工具终端

Addy Osmani

DevTools Terminal 是一款新的 Chrome 开发者工具扩展程序，可为浏览器提供终端的电源。如果您发现自己在 Chrome 和命令行之间进行上下文切换，以便执行诸如以下任务：下载资源、使用 git、grunt、wget 甚至 vim，那么这款扩展程序就可以帮助您节省时间。

在处理 Web 应用时，DevTools Terminal 可用于在 Chrome 内部快速进行命令行调整。

在 Network 面板中使用 Copy as c网址 后，我可以轻松地将完整的命令粘贴到开发者工具终端并运行它。

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

在开发过程中，您可能会习惯使用几种不同的工具：用于创作的文本编辑器、用于测试和调试的浏览器、用于更新软件包的终端、curling 标头，甚至是使用 Grunt 的构建流程。

无需离开浏览器即可使用 Grunt 运行构建任务。

在开发过程中，不得不切换使用不同工具的背景会分散注意力，并可能导致效率低下。我们之前讨论了如何（针对特定类型的项目）直接在 Chrome 开发者工具中使用工作区调试和编写代码，而无需离开浏览器。

也可以提供完整的 Git 工作流。非常适合在工作区中编写代码后执行 git diff。

开发者工具终端（由 Dmitry Filimonov 设计）完成了该故事，让您可以在同一窗口中进行编码、调试和构建。你可以访问 Tab、Ctrl 甚至 Git 颜色，对日常工作流中习惯使用的终端十分熟悉。

工作流

使用 git clone、yeoman 或可通过终端访问的任何其他工具开始新项目。

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

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

使用 ls 列出当前工作目录中的文件名。非常适合直观呈现工作区之外的目录。

安装

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

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

限制

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

目前，该扩展程序同时支持默认的浅色主题和深色主题。

此扩展程序目前依赖于 NPAPI，该 API 将于明年被逐步淘汰，取而代之的是 Native Messaging API。开发者工具终端作者 Dmitry Fillimonov 计划在不久的将来弃用 NPAPI，改为使用此 API 或 Native Client API。

总结

在开发过程中，开发者工具终端（以及与其类似的扩展程序，例如 Auxilio）可帮助您避免在编辑器、浏览器和命令行之间来回切换。 虽然浏览器内的终端可能并不适合所有人，但您可能会发现，该扩展程序是对您的工作流程的有益补充，我们鼓励您试用一下，看看您喜欢它的效果！