这些编码场所的最好之处在于它们中的大多数都是免费的 ，您可以轻松地与某人共享“操场”以进行教学或调试。
这些是允许实时编辑和预览客户端代码（HTML，CSS和JavaScript）的Web应用程序 。
在过去的几年中，几个编码场所如雨后春笋般冒出来，令我们高兴的是。
这里有6个编码游乐场，您可以自己尝试。
它们非常有趣 ， 互动并且对初学者特别有用 。
每当我发现自己受JavaScript或CSS困扰时，都可以轻松创建一个游乐场并将其分享给其他开发人员朋友以寻求帮助。
就个人而言，这些Web应用程序对我的工作很有帮助。
1.
除了流畅的视觉效果外，Codepen还可以显示您在其编辑器中所做更改的实时预览 ，从而更容易查看因果关系。
CSS Tricks的Chris Coyier是Codepen的共同创始人/共同创建者，这也许可以解释为什么此Web应用看起来如此出色。
Codepen可能是那里最受欢迎的编码场所之一。
在Codepen中可以使用协作和私人“笔”功能，但是您需要付费。
还有8个内置的JS库可供使用。
对于HTML，它具有Haml，Markdown，Slim和Jade。
对于JS预处理器，它具有CoffeeScript和LiveScript。
Codepen可用CSS预处理器包括SCSS，SASS，LESS和Stylus。
2.
对于预处理，它具有CSS的SCSS，JS的CoffeeScript和简单的香草HTML。
JSFiddle拥有30多个JavaScript库，可供立即使用，而且您可以轻松添加外部文件 。
JSFiddle可能是编码游乐场的流行的原因 ，因为它是最早的也是最著名的游乐场之一。
另外，与Codepen不同，该功能易于使用且免费。
在现有的可用编码场所中，JSFiddle的协作功能可能是同类产品中最好的。
如果您正在与其他开发人员合作，我强烈建议您使用JSFiddle进行整理。
JSFiddle的另一个令人沮丧的怪癖是它的运行按钮 ，有时单击它不起作用，因此您必须多次单击它才能实际运行代码（是的，我在多个浏览器上对此进行了测试）。
与其他游乐场相比，JSFiddle 可能是最慢的 。
您必须通过单击播放按钮基本上刷新页面。
JSFiddle缺少的是实时预览 。
3.
至于CSS预处理器，它提供了LESS。
您可以添加外部文件 ，但必须在编辑器上手动进行。
JS Bin的JS预处理器包括CoffeeScript，TypeScript，Traceur和JSX，并拥有40多个JS库可供使用。
JS Bin是由雷米·夏普（Remy Sharp）创建的，雷米·夏普是JavaScript的主要开发者，他拥有一家专注于JavaScript（和HTML5）的Web开发公司。
不幸的是，目前，JS Bin没有协作功能。
您也可以在JS Bin上创建私有“ bin” ，但您必须为此功能付费 。
与以前的游乐场不同的是，JS Bin 允许您将文件下载到计算机上 ，这一精巧的功能可能对开发人员有用，尤其是在离线时摆弄代码时。
4.
如果您想通过其他功能避免其他游乐场的噪音，可以使用CSSDeck应用程序。
但是由于其简单性 ， 它仍然值得关注。
CSSDeck已经存在了好几年，但是并没有产生太大的影响。
它还有几个CSS和JS库可用，并且添加列表中没有的库是手动完成的，这应该很容易。
CSSDeck的预处理器包括HAML，Markdown，Slim和Jade（用于HTML），LESS，Stylus，SASS和SCSS（用于CSS）以及CoffeeScript（用于JS）。
但这也是使它与众不同的原因，因为它的简单性着眼于重要的事情 。
如果您正在寻找具有许多精美功能的游乐场，那么CSSDeck不适合您。
让CSSDeck感到惊讶的是它的简单但有用的功能，它允许用户增加文本大小 。
5.
尽管我不确定这是否真的有用，但它仍然很简洁。
现在，这是第一个。
颜色实际上弹出了！
最重要的是，当我徘徊在十六进制颜色代码上时，达伯特使我大为惊讶。
我希望这不是一个大问题，但是了解此大型功能在其他游乐场上不可用是至关重要的。
现在，Dabblet的妙处在于它允许用户以5种不同的视图进行预览 ：CSS编辑器和结果，HTML编辑器和结果，CSS和HTML编辑器和结果，JavaScript及其可播放的结果，或同时进行所有操作。
而且，它似乎没有其他用户的演示库 。
关于每个面板，它们的大小是固定的，您无法调整它们的大小，这是以前的游乐场所具有的。
但我想您可以手动插入这些内容 ，因此不费吹灰之力。
它没有这些以及内置JavaScript库。
我感到困惑的一件事是它缺乏用于HTML和CSS的预处理器选项 。
6.
它还带有一个内置标尺 ，非常适合获得精确的测量结果和美观度。
它甚至支持SVG。
Liveweave提供了20多个JavaScript库 。
您还可以使用夜视模式更好地保护视力， 在此模式下一切都会变黑。
Liveweave是一个有用的编码场所，具有很多功能，例如可以关闭其实时预览 。
尽管如此，它仍然是一项必不可少的功能，Liveweave确实做到了。
我不确定是笔记本电脑还是Internet连接，但似乎有点滞后 。
您所要做的就是单击“团队合作”链接，您可以将链接共享到“编织”中。
如果您过去使用过Teamviewer，则其工作方式相同。
引起我注意的另一件事是它的轻松协作功能 。
在我忘记之前，它具有内置的Lorem Ipsum发生器 。
您甚至可以将组织作为单个HTML文件下载 （whoops，JS，CSS和HTML放在一个文件中-负点！），也可以将zip文件下载为单独HTML，CSS和JS文件（当然，就可以了）。
结论
如果您有其他游乐场，请在下面的评论中与我们分享。
我希望本文能帮助您选择适合您需求的产品。
好了，去哪儿， 每个游乐场都有其独特的特征 ，可能在您的“游戏时间”之一中对您有用。