Web 原型设计 HTML CSS 和 Javascript 的游乐场 [关闭]

Question

我正在寻找可让您编码和预览的在线游乐场。 我建议使用单一工具来回答，因此可以单独投票。 如果可能，请提供一些功能和限制以及屏幕截图。

事先，我知道这类问题很容易被标记为离题，但我见过这类问题，他们将答案投票。

我可以在这里询问哪些主题？
- 程序员常用的软件工具；

示例：Online tool for generating mathematical equation image files

Answer 1

JSFIDDLE

特点

• 外部资源
• 可调整大小的面板
• 语法高亮
• Ajax 模拟
• JSHint（检查语法错误）
• TidyUp（对代码应用缩进）

缺点

• 没有代码完成
• 没有实时预览
• 无法折叠面板

Answer 2

Bootply

• 引导进入
• HTML/CSS/JS
• 库
• 主题
• 模板
• 用于插入 html 标签和 sn-ps 的按钮
• 手机尺寸预览

缺点

• 没有实时预览

Answer 3

JSBIN

• 可调整大小的面板
• 切换 HTML/CSS/JS/控制台/输出
• 导入/导出要点
• 实时预览

Answer 4

CodePen

• 实时输出
• 轻松添加外部文件
• 键盘快捷键
• 免费帐户
• 能够关注他人
• 分叉能力
• 支持标签
• 最小化/隐藏面板
• SEO 友好

Answer 5

Dabblet

• 以 HTML/CSS 为重点
• 无前缀 CSS
• 实时预览

缺点

• 固定面板尺寸
• 有限的 JS 支持

Answer 6

CSSDeck

• 实时预览
• 您可以使用 Prefixfree、Normalize 等工具以及 Jade、HAML、Stylus、Less、SASS、Coffeescript 等其他预处理器
• 还支持 HTML 和 CSS 中的 Zen 编码
• 代码字体大小可以调整。代码框对齐方式也可以更改为水平或垂直位置。
• 您可以将隐私设置设置为超级隐私（只有您能够）以查看您的创作或隐私。

Answer 7

LIVEWEAVE

它在不重新加载页面的情况下更新布局，实时预览选项。

CSSDESK

DABBLET

Answer 8

Liveweave

• 实时模式
• HTML、CSS 和 JavaScript 的代码提示
• 深色/浅色主题
• 以单个文件或 zip 格式下载
• Lo​​rem ipsum 生成器
• 库
• 尺子
• 灵活的布局
• 实时 CSS 和 JS 验证
• 支持 Emmet（以前称为 Zen Coding）