JSBIN是一款HTML在线编辑器，以帮助那些要学前端或者正在学习前端的同学。
以下我们来看下这款工作的使用说明：
只要你输入任意字元在任意编辑器窗格里，你会立刻发现「网址列」发生了变化，如下图所示，编号1的地方就是你的BinID，编号2的地方则是这个Bin的版本编号(预设会从1开始)，编号3的地方则是目前的显示模式，edit则代表「编辑」模式。预设的情况下，你输入的HTML/CSS/JavaScript都会立刻反映到最右边的Output窗格。
你可以在任意时刻重新建立一个Bin，点击New选项即可。
如果你有注册会员的话，就会看到Open功能，因为只要是你编辑过的Bin全部都会自动被储存起来，随时可以重新开启曾经写过的Bins。如下图示，如果你不想再看到特定Bins，还可以设定封存，预设就不会在这边被看到，且日后还是可以重新找出来。
如下图示，点选Archiveview即可救回曾经封存的Bins
主选单的Adddescription功能，只是帮你在HTML中新增description这个metatag而已
主选单的Createmilestone功能，只是告诉JSBin说：「我已经完成了一个Bin的里程碑，请帮我把目前这个版本固定下来。」因此，点击这个功能后，JSBin网址上的「版本编号」就会自动+1
主选单的Saveastemplate功能，则是将你目前的Bin储存成一个范本，让你日后新增Bin时，预设的HTML/CSS/JavaScript就会有你目前设定的Bin内容。
主选单的Clone功能，跟刚刚的Createmilestone功能只有一点小差异，那就是，他并不是换一个版本编号，而是换一个全新的BinID，如下图示：
主选单的Download功能则是把Bin下载，他会把HTML/CSS/JavaScript合并成一个HTML档案。
这个按钮可以方便地替你的HTML插入一些常用的外部资源，例如jQuery、jQueryUI、jQueryMobile、Bootstrap、YUI、AngularJS、KendoUI、Backbone、Modernizr、……等等，算是个方便的小工具。
除此之外，你还可以切换不同的撰写语法，最后点选ConverttoHTML即可自动转换成HTML格式。
这跟HTML/CSS编辑器也很像，也支援多种协助高效撰写JavaScript的语法，还支援TypeScript喔！
这窗格与各浏览器开发人员工具里的Console窗格是一样的，我不知道为什么他们还要多弄一个网页版，我觉得没有比浏览器内建的好用，所以大多没用他。
这个窗格主要用途是输出最终HTML/CSS/JavaScript组合后的执行成果，预设的情况下，Auto-runJS选项是被勾选的，代表你在JavaScript编辑器打字的时候，他会不断地重新整理Output窗格中的网页，有时候这个选项会导致浏览器当掉，如果你有遇到浏览器不稳定的情况，建议取消勾选此项目。勾选之后，如果要执行修改后的JS，你就必须按下RunwithJS按钮才会真正执行新版的JavaScript程式。
JSBin只要输入Email与Password就可以注册成功，也不用验证身分，如果打错帐号、密码也没关系，重新注册一组新的就是了！登入后的画面，Email与Password随时你想更新就更新，非常开放！
这里的每个连结你都看完，就会知道你被JSBin简洁的外观给骗了，其实内涵非常丰富的！
Lockrevision#1fromfurtherchanges代表你要锁定目前#1这个版本(也就是网址列上的1部分)，这个功能与JSBin主选单的Createmilestone功能如出一辙。
Live&FullPreview提供的网址进入后，就是不含编辑器窗格的网页，实验某些功能时比较不受干扰。不过在网页右上角还是会出现一个浮动式的EditinJSBin按钮，随时可以进入编辑窗格。
CodeView就是我们编辑的画面。
Embed不仅仅是嵌入一个超连结而已，最后还会载入一个JavaScript档案，他会把超连结直接转换成一个复杂的页面，如下图示：
把这串放进网页后，显示结果如下图示：
这是一个没有文件的密技，直接在编辑器窗格的标题用滑鼠快速点两下(DoubleClick)，就可以启用行号显示，在重新点两下就会关闭，非常方便。
这又是另一个没有文件的密技，大部分人都认为JSBin没办法自订网址，事实上是可以喔，方法如下：
先不用管目前网址是什么，直接在网址列输入你想要自订的BinID，如下图示：
按下Enter之后，一份全新的Bin自动产生，这个BinID就属于你的了！(^_^)
我们可以把网址修改成以下这样(在网址最后面加上QueryString并用逗号分隔)，再把该网址传给对方，对方就照你的意思开启HTML与JavaScript窗格：
这五大窗格分别代表的参数名称如下：
我们必须在浏览器开发者工具的Console(主控台)页签执行以下指令，请开启浏览器内建的开发者工具(IE8+,Chrome,Firefox,Safari通通都有这类工具)，并切换到Console或主控台页签，接着输入：
jsbin.settings.editor.matchBrackets=
之后请按下F5(重新整理网页)，拟将键盘游标移至同一个大括号的地方，就会发现有高亮显示了：
目前这一版JSBin如果你执行了主选单的Saveastemplate功能，很可惜的你就回不去了！意思就是你无法回复到网站内建预设的HTML样板。还有如果你对编辑器调整了太多设定，导致无法正常使用的话，其实你是可以重设JSBin开发环境的，此时你可以使用以下技巧。
注：这个一样是没有文件的密技，这技巧我研究好几个小时才弄通呢！
开启浏览器内建的开发者工具(IE8+,Chrome,Firefox,Safari通通都有这类工具)，并切换到Console或主控台页签，接着输入deletejsbin.settings并按下Enter执行，执行成功即可重设所有设定。
deletejsbin.settings不过，还有html/css/javascript的templates内容也要清除，因为JSBin把这些templates储存在浏览器的localStorage里面(这是HTML5的一个储存机制)，这时还要输入localStorage.clear()才能彻底清除这些残留的资料。
localStorage.clear()执行完成的画面如下，执行完后按下F5(重新整理)即可回归最初预设值！
{"author":"Will","bookname":"ASP.NETMVC4开发实战"}注意:JSON中的字串，必须用「双引号」括起来！
这时我们再建立另一个新的Bin，并加入jQuery函式库(注:这时因为HTML内容被改变，所以会被立即赋予一个BinID，产生一个全新的网址)
此时，我们把刚刚的网址稍微改一下，把/edit修改成.js即可取得JavaScript的部分而已，如下：