聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

一月 5, 2014

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 在 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 的開發者是一大福音。

七月 21, 2013

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» Coding on workspace of Chrome Developer tools

Google Chrome

相信網頁設計師並不陌生 Chrome DevTools,善用 DevTools 可以減少很多 Debug 時間,今天來介紹如何在 Chrome 瀏覽器上直接編輯程式,並且存檔,重新整理網頁後便可看到結果。聽到這裡大家一定會很好奇,不就開系統編輯器 (sublime, pspad, vim …) 工具,直接修改 => 存檔 => 重新整理嘛?但是這並不稀奇阿,重點是 Chrome 瀏覽器可以直接支援線上編輯檔案,而不是透過系統工具做編輯。這就是 Chrome 強大的地方,今天就來介紹 Chrome workspace

啟動 Workspace

打開 Chrome 瀏覽器,在網址列輸入: chrome://flags/,並且找到 Enable Developer Tools experiments,啟動此選項,最後重新啟動瀏覽器

Selection_004

打開 Chrome Console 介面,並且點選右下角 Setting 會看到此畫面

Selection_005

點選到 Experiment 後,將 File system folders in Source Panel 勾選,並且重新啟動瀏覽器

使 Workspace 編輯檔案

完成上述步驟,接著就是將 local 目錄掛到 Chrome Dev Tool 介面,請先打開瀏覽器,打 local 網址,並且將 console 介面打開

Selection_006

指定好 path 後,可以將 setting 頁面關閉,然後切換到 Sources Tab,你會發現如下圖

Selection_007

我們可以開啟 app/index.html,直接在 console 介面編輯並且存檔

Selection_008

接著直接 refresh 網頁即可。

心得

用 workspace 其實重點就是你可以直接開 browser 然後旁邊的 console 介面可以直接編輯,而不是切換到系統編輯器修改,當然這還不是很方便,如果搭配了 GruntJSLiveReload,你會發現,編輯程式碼後,Grunt 也是會自動跑相關設定,LiveReload 也會自動幫忙更新網頁喔。

可以參考之前的文章: 2013 Javascript Conference: 你不可不知的前端開發工具

另外可以直接拿下面兩專案來跑 RequireJS + Backbone.js + GruntJS
Github: html5-template-engine
Github: backbone-template-engine

support:

biggo.com.tw

A Django site.