在 Chrome 瀏覽器使用 Terminal 終端機

Google Chrome

簡介

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

Screenshot from 2014-01-05 20:36:26

為什麼要在瀏覽器內使用 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,畫面如下

Screenshot from 2014-01-05 21:22:15

總結

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

  • Sam Huang

    您好! 我是個新手,請問: 安裝錯誤訊息如下,是什麼問題?如何排除?
    謝謝!
    $ sudo npm install -g devtools-terminal

    npm http GET https://registry.npmjs.org/devtools-terminal

    npm ERR! Error: failed to fetch from registry: devtools-terminal

    npm ERR! at /usr/share/npm/lib/utils/npm-registry-client/get.js:139:12

    npm ERR! at cb (/usr/share/npm/lib/utils/npm-registry-client/request.js:31:9)

    npm ERR! at Request._callback (/usr/share/npm/lib/utils/npm-registry-client/request.js:136:18)

    npm ERR! at Request.callback (/usr/lib/nodejs/request/main.js:119:22)

    npm ERR! at Request. (/usr/lib/nodejs/request/main.js:212:58)

    npm ERR! at Request.emit (events.js:88:20)

    npm ERR! at ClientRequest. (/usr/lib/nodejs/request/main.js:412:12)

    npm ERR! at ClientRequest.emit (events.js:67:17)

    npm ERR! at HTTPParser.onIncoming (http.js:1261:11)

    npm ERR! at HTTPParser.onHeadersComplete (http.js:102:31)

    npm ERR! You may report this log at:

    npm ERR!

    npm ERR! or use

    npm ERR! reportbug –attach /home/sam/npm-debug.log npm

    npm ERR!

    npm ERR! System Linux 3.8.0-35-generic

    npm ERR! command “node” “/usr/bin/npm” “install” “-g” “devtools-terminal”

    npm ERR! cwd /home/sam

    npm ERR! node -v v0.6.12

    npm ERR! npm -v 1.1.4

    npm ERR! message failed to fetch from registry: devtools-terminal

    npm ERR!

    npm ERR! Additional logging details can be found in:

    npm ERR! /home/sam/npm-debug.log

    npm not ok

  • appleboy48

    請問 OS 版本?

  • Sam Huang

    ubuntu 12.04 LTS
    謝謝

  • appleboy48

    Chromium 也可以,我這邊也是 ubuntu 12.04,node 0.10.22 或 0.10.24 都可以安裝,測試一般使用者也可以,尚未遇到您提供的錯誤訊息

  • Sam Huang

    我以手動安裝nodejs後重新執行npm install -g devtools-terminal

    仍有一些警示訊息:(節錄如下)

    > node-gyp rebuild

    gyp WARN EACCES user “root” does not have permission to access the dev dir “/home/sam/.node-gyp/0.10.24”

    gyp WARN EACCES attempting to reinstall using temporary dev dir “/usr/lib/node_modules/devtools-terminal/node_modules/pty.js/.node-gyp”

    gyp http GET http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz

    gyp http 200 http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz

    make: Entering directory `/usr/lib/node_modules/devtools-terminal/node_modules/pty.js/build’

    CXX(target) Release/obj.target/pty/src/unix/pty.o

    ../src/unix/pty.cc: In function 「v8::Handle PtyFork(const v8::Arguments&)」:

    ../src/unix/pty.cc:186:34: 警告: ignoring return value of 「int chdir(const char*)」, declared with attribute warn_unused_result [-Wunused-result]

    SOLINK_MODULE(target) Release/obj.target/pty.node

    SOLINK_MODULE(target) Release/obj.target/pty.node: Finished

    COPY Release/pty.node

    make: Leaving directory `/usr/lib/node_modules/devtools-terminal/node_modules/pty.js/build’
    ——————————————————————–
    執行devtools-terminal後只有如下訊息:

    $ devtools-terminal

    info – socket.io started

    ———————————————————————
    畫面或chromium沒有其他動作。
    有點莫名所以,還要加油先打好基礎才行,謝謝您了。

  • Leon

    sudo npm install -g devtools-terminal