开发者工具终端

Addy Osmani

Twitter GitHub

DevTools Terminal 是一个新的 Chrome 开发者工具扩展程序，可以为浏览器带来终端的强大功能。如果你发现自己会在 Chrome 和命令行之间切换，执行各种任务，例如下载资源、使用 git、grunt、wget 甚至 vim - 扩展程序会帮助你节省时间。

开发者工具终端非常适合在处理 Web 应用期间从 Chrome 内部快速进行命令行调整。

使用“网络”面板中的复制为 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 列出当前工作目录中的文件名。非常适合直观呈现 Workspace 之外的目录。

安装

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

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

限制

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

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

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

总结

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