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

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

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

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

導覽列 5. Help 幫助文件

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

導覽列 6. Share 分享

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

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

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

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

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

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

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

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

1. 啟用行號顯示

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

2. 自訂 Bin ID 的方法

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

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

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

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