開發人員工具終端機

Addy Osmani

開發人員工具終端機是新的 Chrome 開發人員工具擴充功能，可將終端機的強大功能帶入瀏覽器。如果您在執行下載素材資源、使用 git、grunt、wget 或 vim 等工作時，需要在 Chrome 和指令列之間切換工作情境，這款擴充功能可節省您的時間。

開發人員工具終端機非常適合快速調整指令列。
開發人員工具終端機可讓您在 Chrome 中快速調整 webapp 的命令列。
在開發人員工具終端機中使用 cURL。
在網路面板中使用「Copy as cURL」後，我可以輕鬆將完整指令貼到開發人員工具終端機並執行。

為什麼要在瀏覽器中使用終端機？

在開發過程中，您可能會使用幾種不同的工具：用於撰寫的文字編輯器、用於測試和偵錯的瀏覽器，以及用於更新套件、捲曲標頭，甚至使用 Grunt 的建構程序的終端機。

在開發人員工具終端機中執行 Grunt。
使用 Grunt 執行建構工作，不必離開瀏覽器。

在開發期間需要在不同工具之間切換情境，可能會分散注意力，導致效率不彰。我們先前曾說明如何 (針對特定類型的專案) 使用 工作區，直接在 Chrome 開發人員工具中偵錯及撰寫程式碼，無須離開瀏覽器。

Git 工作流程。
也可以使用完整的 Git 工作流程。在工作區中撰寫後，Git 差異功能非常實用。

開發人員工具終端機 (由 Dmitry Filimonov 開發) 完成了這個故事，讓您可以在同一個視窗中編寫程式碼、偵錯及建構。您可以使用 tab、ctrl 和 Git 顏色，讓終端機與您日常工作流程中使用的終端機一樣熟悉。

工作流程

製作工作流程。
使用 git clone、yeoman 或任何可透過終端機存取的工具，開始建立新專案。

我現在在 Chrome 中編寫內容時，工作流程大致如下所示：

  • 開發人員工具終端機可用於 git clone GitHub 存放區、touch 新檔案或執行 yo (yeoman) 來建立應用程式。如果需要，您也可以啟動新的伺服器來預覽應用程式
  • 工作區：在 Chrome 中編輯及偵錯我的 webapp。如果我先前已啟動伺服器，就可以將本機專案對應至網路檔案。我可以使用 Sass 或 Less，並將 CSS 預處理器的變更對應回 CSS 檔案。
  • DevTools 終端機：現在我可以提交至版本控制，使用套件管理工具 (npm、bower) 下載依附元件，或執行建構程序 (grunt、make)，產生同一個應用程式的最佳化版本。
  • 雖然需要一段時間才能習慣視窗排列方式，但能在瀏覽器中完成大部分工作，讓我感到很開心。
在終端機中使用 ls。
使用 ls 列出目前工作目錄中的檔案名稱。非常適合用來呈現 Workspace 以外的目錄。

安裝

您可以從 Chrome 線上應用程式商店安裝開發人員工具終端機。如果您是 Mac 或 Linux 使用者，在將其加入 Chrome 後，只要按下「檢查元素」或 Ctrl + Shift + I 即可開啟開發人員工具，然後透過新的「終端機」分頁存取該工具。Windows 使用者必須使用 Node.js 代理程將擴充功能連結至系統終端機。如要取得這個設定，請從 npm 安裝 devtools-terminal 模組： npm install -g devtools-terminal

接著，請開啟新的指令列視窗並執行 devtools-terminal。接著，請開啟開發人員工具，然後在「Terminal」分頁中，使用預設設定選項連線至伺服器。您可以視需要進一步自訂連接埠和地址。

開發人員工具終端機支援在設定期間自訂連線詳細資料。

限制

不過，DevTools 終端機有一些值得注意的限制。與 Mac 上的 Terminal.app 或 iTerm2 不同，這個應用程式目前不支援分頁、多個視窗或歷史記錄回放。不過，您可以視需要開啟任意數量的 Chrome 新分頁，每個分頁都可以有自己的開發人員工具終端機例項。你可以透過 Chrome 應用程式畫面執行這項操作：

開發人員工具終端機支援淺色和深色主題。
目前，擴充功能同時支援預設的淺色主題和深色主題。

這項擴充功能目前仰賴 NPAPI，但這項技術將在明年逐步淘汰，改用原生訊息 API。DevTools Terminal 作者 Dmitry Fillimonov 預計在近期內，改用這個 API 或 Native Client API，而非 NPAPI。

結論

開發人員工具終端機 (以及類似的擴充功能，例如 Auxilio) 可讓您在開發期間避免來回切換編輯器、瀏覽器和指令列。雖然瀏覽器內的終端機可能不是每個人都喜歡的工具，但您或許會發現這個擴充功能可有效補足工作流程，歡迎試用看看，看看您是否喜歡這個工具！