# 介紹好用工具：JS Bin ( 網站前端工程師的學習利器 )

我好像很久沒有介紹好用工具了，並不是我偷懶不玩工具，而是最近介紹工具的資訊大多分享在 [Will 保哥的技術交流中心](https://www.facebook.com/will.fans) 為主，不知道的人記得過去按「讚」喔。今天這篇文章，主要介紹 [**JS Bin**](http://jsbin.com/) 這套好用的網頁前端工具，我覺得 [**JS Bin**](http://jsbin.com/) 介面非常簡潔，非常對我的胃口，雖然此工具還在不斷發展，但是目前的品質已經非常好了，因此覺得可以發表一篇文章來介紹這套工具，並分享一些不容易發現的使用技巧！

**官網網址**

> [**http://jsbin.com/**](http://jsbin.com/)

**工具用途**

你可以利用 JS Bin 提供的線上環境，直接線上編輯網頁，對各式「前端技術」進行分享、測試與偵錯，甚至於可以用來當成教學或提問工具，總之只要跟前端有關的議題 ( HTML5, CSS3, JavaScript )，都很適合先放到這裡，然後透過一個唯一的 JS Bin 網址分享出去。

**快速上手使用**

剛登入後，預設會看到如下畫面，網址列就是 **jsbin.com** 而已，底下則出現 HTML 與 JavaScript 的編輯器窗格，可以讓你輸入內容：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/61f6b3581ce619d4c8ea-image_2159.png "image")

只要你輸入**任意字元**在**任意編輯器窗格**裡，你會立刻發現「網址列」發生了變化，如下圖所示，編號 1 的地方就是你的 ***Bin* ID**，編號 2 的地方則是這個 Bin 的版本編號 ( 預設會從 1 開始 )，編號 3 的地方則是目前的顯示模式，edit 則代表「編輯」模式。預設的情況下，你輸入的 HTML / CSS / JavaScript 都會立刻反映到最右邊的 **Output** 窗格。

**註**: 在 [**JS Bin**](http://jsbin.com/) 裡面，每一個前端網頁組合 ( HTML + CSS + JavaScript ) 都被稱為一個 **Bin** ！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/06194f58dc422c5cd87a-image_2160.png)

當然，只要你把這個 ***Bin*** 設定完成後，便可直接把你當下的 JS Bin 網址分享出去，非常方便！

**導覽列介紹**

如下圖是 [**JS Bin**](http://jsbin.com/) 進入後的主要版面，非常簡潔，最上方就是個導覽列而已，接下來會依圖編號解說：

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/7056c3f9e8446f5f31cf-image_thumb_181.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/afbf1ce84734daf10ad7-image_2161.png)

[![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/241188583f98c5e1b22e-image_thumb_182.png)](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/a10d6c209ae149022e03-image_2162.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/643b4f9a47a01a89074a-image_2163.png)

**導覽列 1.** JS Bin 主選單

你可以在任意時刻重新建立一個 ***Bin***，點擊 **New** 選項即可。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/223c1eabaa5e049a9aba-image_2164.png)

如果你有註冊會員的話，就會看到 **Open** 功能，因為只要是你編輯過的 ***Bin*** 全部都會自動被儲存起來，隨時可以重新開啟曾經寫過的 ***Bins***。如下圖示，如果你不想再看到特定 Bins，還可以設定封存，預設就不會在這邊被看到，且日後還是可以重新找出來。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0242754d30097c90bdb8-image_2165.png)

如下圖示，點選 **Archive view** 即可救回曾經封存的 ***Bins***

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1ee9e3bd735faef25455-image_2166.png)

主選單的 **Add description** 功能，只是幫你在 HTML 中新增 **description** 這個 meta tag 而已

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/dc8af7558d5a54ed9415-image_2167.png)

主選單的 **Create milestone** 功能，只是告訴 JS Bin 說：「我已經完成了一個 Bin 的里程碑，請幫我把目前這個版本固定下來。」因此，點擊這個功能後，JS Bin 網址上的「版本編號」就會自動 **+1**

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/e51dbaf8138481f95115-image_2168.png)

主選單的 **Save as template** 功能，則是將你目前的 ***Bin*** 儲存成一個範本，讓你日後新增 ***Bin*** 時，預設的 HTML / CSS / JavaScript 就會有你目前設定的 ***Bin*** 內容。

主選單的 **Clone** 功能，跟剛剛的 **Create milestone** 功能只有一點小差異，那就是，他並不是換一個**版本編號**，而是換一個全新的 ***Bin* ID**，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/52156aff64013bd623e2-image_2169.png)

主選單的 **Download** 功能則是把 ***Bin*** 下載，他會把 HTML / CSS / JavaScript 合併成一個 HTML 檔案。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1fa4ea51df8946b54544-image_2170.png)

**導覽列 2.** Add library 插入函式庫

這個按鈕可以方便地替你的 HTML 插入一些常用的外部資源，例如 jQuery、jQuery UI、jQuery Mobile、Bootstrap、YUI、AngularJS、Kendo UI、Backbone、Modernizr、……等等，算是個方便的小工具。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fda6dc660cf44b0af38c-image_2171.png)

**導覽列 3.** **各式編輯器**、**主控台**與**即時預覽**窗格 (Panel)

**HTML 編輯器窗格**

這個編輯器窗格對語法有高量顯示，比較可惜的是還沒有 Intellisense 或自動完成功能，不過卻有支援 [Emmet](http://docs.emmet.io/) ([Zen Coding](http://docs.emmet.io/)) 編寫方法，非常厲害！不知道 Zen Coding 的人，可以參考我之前錄製的一則教學影片【[活用 VS2012 擴充套件 - 使用 ZenCoding 快速產生 HTML 語法 (Web Essentials 2012)](http://www.youtube.com/watch?v=_qHWFxCqQSo)】，上面有示範如何利用特殊的 [Zen Coding](http://docs.emmet.io/) 語法快速撰寫 HTML 內容！

除此之外，你還可以切換不同的撰寫語法，最後點選 **Convert to HTML** 即可自動轉換成 HTML 格式。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/106da45f19589d20cf7f-image_2172.png)

**CSS 編輯器窗格**

這跟 HTML 編輯器很像，也支援 [Zen Coding](http://docs.emmet.io/) 語法喔！你也可以用更高效的 LESS 或 Stylus 語法撰寫 CSS 樣式，最後一樣點選 **Convert to CSS** 即可自動轉換成標準的 CSS 格式。

**註**：你甚至可以直接拿 JS Bin 當成 [LESS](http://lesscss.org/) 或 [Stylus](http://learnboost.github.io/stylus/) 的學習工具！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b5fed745e8b8996caf3f-image_2173.png)

**JavaScript 編輯器窗格**

這跟 HTML / CSS 編輯器也很像，也支援多種協助高效撰寫 JavaScript 的語法，還支援 TypeScript 喔！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1e870a1ae9f0dd936236-image_2174.png)

**Console 主控台窗格**

這窗格與各瀏覽器開發人員工具裡的 Console 窗格是一樣的，我不知道為什麼他們還要多弄一個網頁版，我覺得沒有比瀏覽器內建的好用，所以大多沒用他。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ce1dd7f1dccff463277b-image_2175.png)

**Output 輸出窗格**

這個窗格主要用途是輸出最終 HTML / CSS / JavaScript 組合後的執行成果，預設的情況下，**Auto-run JS** 選項是被勾選的，代表你在 JavaScript 編輯器打字的時候，他會不斷地重新整理 Output 窗格中的網頁，有時候這個選項會導致瀏覽器當掉，如果你有遇到瀏覽器不穩定的情況，建議取消勾選此項目。勾選之後，如果要執行修改後的 JS，你就必須按下 **Run with JS** 按鈕才會真正執行新版的 JavaScript 程式。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/cd5a74c46edbc278d23c-image_2176.png)

最右邊的 **Live preview** 箭頭，則是把網頁開啟到一個全新視窗，這時你會發現網址稍微有點不太一樣，也就是 **edit** 這部分不見了，也代表你可以拿這個網址分享給其他人，讓對方看看網頁執行的結果，或直接跟網頁上設定的互動功能進行比較完整的互動，不受到 [**JS Bin**](http://jsbin.com/) 編輯窗格的影響。如下比較圖：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/99586ee4412cec190d9b-image_2177.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/4efcf190dfd1a925033d-image_2178.png)

**導覽列 4.** 登入、註冊、更新會員帳號密碼 (無任何個人資料)

JS Bin 只要輸入 Email 與 Password 就可以註冊成功，也不用驗證身分，如果打錯帳號、密碼也沒關係，重新註冊一組新的就是了！登入後的畫面，Email 與 Password 隨時你想更新就更新，非常開放！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1ca1e4c85ddda8aef48f-image_2179.png)

**導覽列 5.** Help 幫助文件

這裡的每個連結你都看完，就會知道你被 JS Bin 簡潔的外觀給騙了，其實內涵非常豐富的！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/29752ce29ab986693e24-image_2180.png)

**導覽列 6.** Share 分享

當你的 ***Bin*** 編輯完成後，你可以透過很多方式分享出去，在這個 Share 功能選單中提供了一些功能：

**Lock revision #1 from further changes** 代表你要鎖定目前 #1 這個版本 (也就是網址列上的 **1** 部分)，這個功能與 JS Bin 主選單的 **Create milestone** 功能如出一轍。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/004136322d46b49779fb-image_2181.png)

**Live & Full Preview** 提供的網址進入後，就是不含編輯器窗格的網頁，實驗某些功能時比較不受干擾。不過在網頁右上角還是會出現一個浮動式的 **Edit in JS Bin** 按鈕，隨時可以進入編輯窗格。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5697f87fb5ff179fce37-image_2182.png)

**Code View** 就是我們編輯的畫面。

**Embed** 不僅僅是嵌入一個超連結而已，最後還會載入一個 JavaScript 檔案，他會把超連結直接轉換成一個複雜的頁面，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/fc7aba4eb319af8cbd83-image_2183.png)

把這串放進網頁後，顯示結果如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/6def02f92df6c633e02a-image_2184.png)

最後一個 **Codecast** 則是一種「廣播」功能，你可以把該網址分享給其他人，請對方把該網頁打開，之後你就可以繼續修改這個 Bin 的任何內容，對方的瀏覽器將會看到跟你一樣的內容，所以才稱之為「廣播」功能，非常適合線上教學或遠距教學使用！

**§ 分享幾個使用 JS Bin 的小技巧**

**1\. 啟用行號顯示**

這是一個沒有文件的密技，直接在編輯器窗格的標題用滑鼠快速點兩下 (Double Click)，就可以啟用行號顯示，在重新點兩下就會關閉，非常方便。

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/5cef20042529b5fa1bee-image_2185.png)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/9e33f3ed9dd800fbac9f-image_2186.png)

**2\. 自訂 *Bin* ID 的方法**

這又是另一個沒有文件的密技，大部分人都認為 JS Bin 沒辦法自訂網址，事實上是可以喔，方法如下：

先不用管目前網址是甚麼，直接在網址列輸入你想要自訂的 ***Bin* ID**，如下圖示：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ba5b87de9aa6dbbcbb02-image_2187.png)

按下 Enter 之後，一份全新的 Bin 自動產生，這個 ***Bin* ID** 就屬於你的了！ (^\_^)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/54a9b2af7dd3cec68ea4-image_2188.png)

**3\. 控制 *Bin* 編輯畫面的預設窗格**

當你你想進入某個 Bin 的編輯畫面時，會依據不同人的 JS Bin 設定，預設會開啟的這 5 大窗格都不太一樣。如果你今天想分享某個 Bin 給對方，又希望對方預設只開啟 HTML 與 JavaScript 窗格的話，則可以將網址稍微修改一下即可，例如以下 Bin 網址：

-   http://jsbin.com/avegen/1/edit

我們可以把網址修改成以下這樣 ( 在網址最後面加上 Query String 並用逗號分隔 )，再把該網址傳給對方，對方就照你的意思開啟 HTML 與 JavaScript 窗格：

-   http://jsbin.com/avegen/1/edit**?html,javascript**

這五大窗格分別代表的參數名稱如下：

-   **html**          HTML 編輯器
-   **css**            CSS 編輯器
-   **javascript**  JavaScript 編輯器
-   **console**     主控台
-   **live**           即時預覽窗格

**4\. 啟用 JavaScript 的括弧對應高亮**

由於 JS Bin 使用 [CodeMirror](http://codemirror.net/) 套件當作 JavaScript 編輯器 (這套超強)，所以如果你想客製化調整 JavaScript 編輯器是有可能的，只要參考 [CodeMirror 的 API 文件](http://codemirror.net/doc/manual.html)即可。這裡我介紹一個不錯的選項設定，也就是啟用 JavaScript 的**括弧對應高亮**功能。

我們以這個 Bin 為例：[http://jsbin.com/oyuyev/1/edit](http://jsbin.com/oyuyev/1/edit?javascript)

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/f7b06bb17ae8f0a2582c-image_2189.png)

我們必須在瀏覽器開發者工具的 Console (主控台) 頁籤執行以下指令，請開啟瀏覽器內建的開發者工具 ( IE8+, Chrome, Firefox, Safari 通通都有這類工具 )，並切換到 **Console** 或 **主控台** 頁籤，接著輸入：

```
jsbin.settings.editor.matchBrackets = true;
```

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/1b55e847995b9011b348-image_2190.png)

之後請按下 F5 (重新整理網頁)，擬將鍵盤游標移至同一個大括號的地方，就會發現有高亮顯示了：

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/3528c85a5f00702c9961-image_2191.png)

**5\. 重設 JS Bin 開發環境**

目前這一版 JS Bin 如果你執行了主選單的 **Save as template** 功能，很可惜的你就回不去了！意思就是你無法回復到網站內建預設的 HTML 樣板。還有如果你對編輯器調整了太多設定，導致無法正常使用的話，其實你是可以重設 JS Bin 開發環境的，此時你可以使用以下技巧。

**註**：這個一樣是沒有文件的密技，這技巧我研究好幾個小時才弄通呢！

開啟瀏覽器內建的開發者工具 ( IE8+, Chrome, Firefox, Safari 通通都有這類工具 )，並切換到 **Console** 或 **主控台** 頁籤，接著輸入 **delete jsbin.settings** 並按下 Enter 執行，執行成功即可重設所有設定。

```
delete jsbin.settings
```

不過，還有 **html** / **css** / **javascript** 的 templates 內容也要清除，因為 JS Bin 把這些 templates 儲存在瀏覽器的 localStorage 裡面 ( 這是 HTML5 的一個儲存機制 )，這時還要輸入 **localStorage.clear()** 才能徹底清除這些殘留的資料。

```
localStorage.clear()
```

執行完成的畫面如下，執行完後按下 F5 (重新整理) 即可回歸最初預設值！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/0780fed89419d4d1898d-image_2192.png)

**6\. 僅輸出 JavaScript 內容 ( 好讓另一個 Bin 透過 AJAX 載入 )**

我們以 **http://jsbin.com/json-test/1/edit** 為例，我輸入一個**純 JSON 的 JavaScript**，你也可以從這邊看到好幾個 [JSHint](http://jshint.com/) 的警告訊息，不過我們先不用理他。

```
{
  "author": "Will",
  "bookname": "ASP.NET MVC 4 開發實戰"
}
```

**注意**: JSON 中的字串，必須用「**雙引號**」括起來！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/31512489d3db0915fb81-image_2193.png)

這時我們再建立另一個新的 Bin，並加入 jQuery 函式庫  
( 註: 這時因為 HTML 內容被改變，所以會被立即賦予一個 ***Bin* ID**，產生一個全新的網址 )

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/ff49632bffca2ceac123-image_2194.png)

此時，我們把剛剛的網址稍微改一下，把 **/edit** 修改成 .js 即可取得 JavaScript 的部分而已，如下：

-   **http://jsbin.com/json-test/1.js**

然後輸入以下 jQuery 程式，試圖測試 jQuery 的 AJAX 功能：

```
$.ajax({
  url: 'http://jsbin.com/json-test/1.js',
  dataType: 'json',
  success: function(data) {
    alert(data.author + ' - ' + data.bookname);
  }
});
```

如果你可以看到跟我一樣的畫面，代表我們透過 $.ajax 取到的的確是個 JSON 物件！

![](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/edd7fef444354289bd99-image_2195.png)

**心得分享**

想要把複雜的前端工程學好，找到適當的工具還不夠，想辦法跟他混熟一點，對你的學習才會有加乘效果，正所謂「工欲善其事，必先利其器」，花點時間摸熟手邊工具吧！

另外，「分享」讓學習這件事變得有趣，你也可以試試看喔！ (^\_^)

**相關連結**

-   **!!** [JS Bin - Collaborative JavaScript Debugging](http://jsbin.com/)
-   [JS Bin 的 github 頁面](https://github.com/jsbin/jsbin) ( 這工具網站是個開放原始碼的專案，可以整個下載後[執行在本地端](https://github.com/jsbin/jsbin/blob/master/docs/running-your-own-jsbin.md) )
-   [YouTube JS Bin playlist](http://jsbin.com/videos) ( 所有 JS Bin 相關的教學影片 )
-   [Remy Sharp (rem) on Twitter](https://twitter.com/rem) ( 這是 JS Bin 作者 Remy Sharp 的 Twitter handle )
-   [Dave, the JS Bin Bot (js\_bin) on Twitter](https://twitter.com/js_bin) ( 這是 JS Bin 網站自己的 Twitter handle )
-   [JS Bin Tips and Bits (Tumblr)](http://jsbin.tumblr.com/)
-   [CodeMirror 的 API 文件](http://codemirror.net/doc/manual.html)
-   [Emmet — the essential toolkit for web-developers](http://docs.emmet.io/)
-   [介紹好用工具：jsFiddle - Online Editor for the Web](/post/2011/02/07/Useful-tool-jsFiddle-Online-Editor-for-the-Web)