簡介
不知道大家有無在瀏覽器內直接連上 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 的開發者是一大福音。