開發人員工具終端機是新的 Chrome 開發人員工具擴充功能,可將終端機的功能提供給瀏覽器。如果您習慣切換 Chrome 和指令列來處理工作 (例如使用 git、grunt、wget,甚至是 vim),這個擴充功能或許能為您省時省力。
為什麼要在瀏覽器中使用終端機?
在開發過程中,您可能已習慣使用其他工具:用於編寫的文字編輯器、用於測試及偵錯的瀏覽器,以及更新套件的終端機、curling 標頭,甚至是使用 Grunt 的建構程序。
在開發期間必須切換不同工具的情況可能會令人分心,甚至造成效率低落。我們先前已討論過如何直接在 Chrome 開發人員工具中使用 Workspaces 偵錯及編寫程式碼,而不必離開瀏覽器。
開發人員工具終端機 (由 Dmitry Filimonov 提供) 可完成該故事,讓您能在同一個視窗中編寫程式碼、進行偵錯及建構。你可以使用 Tab 鍵、Ctrl 顏色,甚至是 Git 顏色,因此熟悉自己在日常工作流程中使用的終端機。
工作流程
現在,我的個人 Chrome 編寫工作流程大致如下:
- DevTools 終端機可用於
git clone
GitHub 存放區、touch
新檔案,或執行yo (yeoman)
來建立應用程式。如果我還想啟動新的伺服器來預覽應用程式,也可以 - 工作區:在 Chrome 中編輯網頁應用程式並偵錯。如果我稍早啟動伺服器,可以將本機專案對應至網路檔案。我可以使用 Sass 或更低,並將 CSS 預先處理工具變更對應至 CSS 檔案。
- 開發人員工具終端機:我現在可以承諾使用原始碼控管功能、使用套件管理員 (npm、bower) 來提取依附元件,或執行建構程序 (grunt、make) 來產生相同應用程式的最佳化版本。
- 雖然需要花一些時間才能習慣視窗配置,但對於能夠在瀏覽器中完成絕大多數的工作,我也很開心。
安裝
您可以透過 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) 可協助你在開發過程中切換使用編輯器、瀏覽器和指令列。 雖然瀏覽器內建的終端機可能並不足以滿足所有人的需求,但擴充功能可和工作流程相輔相成,但還是建議您試用看看,看看這個功能如何。