開發人員工具終端機

Addy Osmani

開發人員工具終端機是新的 Chrome 開發人員工具擴充功能，可將終端機的功能提供給瀏覽器。如果您習慣切換 Chrome 和指令列來處理工作 (例如使用 git、grunt、wget，甚至是 vim)，這個擴充功能或許能為您省時省力。

開發人員工具終端機適合用來在網頁應用程式處理網頁應用程式時，透過 Chrome 內部快速調整指令列。

在網路面板中使用「Copy as cURL」後，我可以輕鬆將完整指令貼到開發人員工具終端機並執行。

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

在開發過程中，您可能已習慣使用其他工具：用於編寫的文字編輯器、用於測試及偵錯的瀏覽器，以及更新套件的終端機、curling 標頭，甚至是使用 Grunt 的建構程序。

不必離開瀏覽器，也能使用 Grunt 執行建構工作。

在開發期間必須切換不同工具的情況可能會令人分心，甚至造成效率低落。我們先前已討論過如何直接在 Chrome 開發人員工具中使用 Workspaces 偵錯及編寫程式碼，而不必離開瀏覽器。

您也可以提供完整的 Git 工作流程。在工作區編寫後可產生 git diff。

開發人員工具終端機 (由 Dmitry Filimonov 提供) 可完成該故事，讓您能在同一個視窗中編寫程式碼、進行偵錯及建構。你可以使用 Tab 鍵、Ctrl 顏色，甚至是 Git 顏色，因此熟悉自己在日常工作流程中使用的終端機。

工作流程

使用 git clone、yeoman 或可透過終端機存取的任何其他工具展開新專案。

現在，我的個人 Chrome 編寫工作流程大致如下：

• DevTools 終端機可用於 git clone GitHub 存放區、touch 新檔案，或執行 yo (yeoman) 來建立應用程式。如果我還想啟動新的伺服器來預覽應用程式，也可以
• 工作區：在 Chrome 中編輯網頁應用程式並偵錯。如果我稍早啟動伺服器，可以將本機專案對應至網路檔案。我可以使用 Sass 或更低，並將 CSS 預先處理工具變更對應至 CSS 檔案。
• 開發人員工具終端機：我現在可以承諾使用原始碼控管功能、使用套件管理員 (npm、bower) 來提取依附元件，或執行建構程序 (grunt、make) 來產生相同應用程式的最佳化版本。
• 雖然需要花一些時間才能習慣視窗配置，但對於能夠在瀏覽器中完成絕大多數的工作，我也很開心。

使用 ls 列出目前工作目錄中的檔案名稱。很適合以視覺化方式呈現 Workspace 以外的目錄。

安裝

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

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

限制

開發人員工具終端機有一些值得注意的限制。與 Mac 的 Terminal.app 或 iTerm2 不同，它尚未支援分頁、多個視窗或歷史記錄播放功能。不過，您可以視需要開啟任意數量的 Chrome 新分頁，每個分頁都可以擁有專屬的開發人員工具終端機執行個體。您可以透過 Chrome 應用程式畫面執行這項操作：

擴充功能目前已支援預設的淺色主題和深色主題。

這項擴充功能目前需仰賴 NPAPI，這個版本將於明年逐步停用，並改用 Native Messaging API。開發人員工具終端機作者 Dmitry Fillimonov 計劃在不久後停用 NPAPI，並改用這個 API 或 Native Client API。

結論

開發人員工具終端機和類似擴充功能 (例如 Auxilio) 可協助你在開發過程中切換使用編輯器、瀏覽器和指令列。 雖然瀏覽器內建的終端機可能並不足以滿足所有人的需求，但擴充功能可和工作流程相輔相成，但還是建議您試用看看，看看這個功能如何。