在 Chrome 瀏覽器使用 Terminal 終端機

簡介

不知道大家有無在瀏覽器內直接連上 Terminal 終端機，今天來介紹 DevTools Terminal，這是一套 Chrome extension，它可以讓您在 Chrome 瀏覽器直接使用 Terminal，平常開發程式，一定會常常切換瀏覽器及 Terminal 軟體，現在開發者可以直接在瀏覽器連上 Terminal，並且開始使用 Git, Grunt, wget 甚至 Vim 等指令。

為什麼要在瀏覽器內使用 Terminal

在開發網站過程，你一定會用到底下工具:

• 編輯器 Sublime, Vim 用來撰寫程式
• 瀏覽器 Chrome 用來 debug 看結果
• Terminal 終端機用來 update package 等

現在 Terminal 甚至用到 Grunt 等開發工具，每天都在這三種介面切換，是不是很浪費時間，雖然 Chrome 推出了 Workspace 讓開發者可以直接在瀏覽器內寫程式，但是這還不夠阿。所以 DevTools Terminal 幫你完成了這個故事，開發者可以直接用 Chrome 瀏覽器完成上述三件事情。

安裝方式

底下測試環境為 Ubuntu 系統，首先安裝 Chrome extension，完成後，請按下 Ctrl + Shift + I，會開啟 DevTools，會看到多一個 Terminal tab。如果系統並非為 Mac OS，那就必須透過 Node.js Proxy 才可以連上 Terminal。

$ npm install -g devtools-terminal

安裝完成後，開啟新的 Terminal console 並執行底下指令:

$ devtools-terminal

預設會開啟 8080 port，帳號為 admin，如果要改變預設值，請建立新檔案 terminal.js (檔案名稱可以自行更換)，內容寫入

exports.config = {
    users: {
        admin: {
            password: "",
            cwd: process.cwd() //working directory
        }
    },
    port: 8080
};

透過指令:

$ devtools-terminal --config terminal.js

可以在 Terminal 介面執行 Grunt，畫面如下

總結

Chrome Developer Tools 實在是太強大了，我個人比較期待是否有整合 Compass，現在只有支援 Sass 3.0 版本以上，當然如果能在瀏覽寫程式是很方便，但是有時候開啟 DevTools 時候，記憶體都會被吃的很高，導致 Chrome 當機，所以其實還是要看狀況使用，但是能透過 chrome 來連接其他伺服器 Terminal，此功能對於常使用 console 的開發者是一大福音。