你好
今天，我想谈谈一种有用的工具
jsfiddle 。 现在很少有开发人员意识到它的存在，因为jsfiddle非常易于使用且功能强大。 但是也许你们中的一些人会通过阅读本文来发现一些新东西。 让我们结识。
jsFiddle是最流行的Web开发环境（在Web浏览器中运行）之一，它允许您编辑和运行以HTML，JavaScript和CSS编写的代码，这些代码称为“提要”。 可以使用JavaScript库，例如jQuery。
jsFiddle最受欢迎的用途之一是将代码粘贴到博客中，通过社交网络共享代码，以及在代码上进行协作。
工作范围
多年来，网站的界面已经经历了几次更改，目前看起来像这样：
布局编辑。 区域设定
jsFiddle工作空间分为四个部分，您可以自行决定更改其大小：
HTML ，
CSS ，
JavaScript和
Result 。 如果在调整大小时仍然没有足够的查看区域，则可以使用设置中的布局编辑器。 在打开的块的最底部，您可以看到“
编辑器”布局项目，然后在此处选择方便的
布局 。
2018年6月5日JSFiddle添加了另一个布局，该布局允许您以选项卡的形式构建工作区。 之前
，奥斯卡（Oscar）在其推特上
提到了这一点。
的HTML
创建项目时，我们无法触摸html字段，因为默认情况下它具有当前版本，目前为HTML5。 但是那就更好了。
的CSS
CSS区域使我们能够规定未来项目的样式。 该工具的一大优点是，添加标签时，会自动放置左括号和右括号。 就像换行时的缩进一样。 对于我们来说，按Enter键即可通过并继续编写代码。
如果您是位审美专家，并且意外丢失了代码，请不要着急。 您可以随时单击顶部面板上的“
整理”按钮，并自动对齐所有线条。
对于更高级的开发人员，可以从css切换到scss并激活
normalize.css css文件，该文件在HTML元素的默认样式中提供了更好的跨浏览器兼容性。 这意味着您不必担心在各种浏览器中项目的正确显示。 该文件将为您做所有事情。
Java脚本
这里仍然凉爽。 除了输入标准javascript外，您还可以使用React等流行的js库。 为此，您需要单击JavaScript区域中的链接，然后在第一个下拉列表中选择语言。 如果正确执行所有操作，则所选语言将显示在此链接的标题中。 默认值为
JavaScript + No-Library（纯JS） 。
第二个下拉列表是js框架和扩展。 在这里，几乎您需要的一切。 我通常只使用它来启用jQuery（现在为3.3.1）。
我在其他用户的项目中徘徊，发现第三和第四列表实际上没有任何人使用。 在实践中！ 因此，如果您不知道它们的用途，也可以跳过它们。
在垂直面板的编辑区域左侧，有“ Resources-URL cdnjs ”行。 您可以在其中放置来自第三方来源的css和js文件的直接链接。 例如，添加字体很棒的字体结果
因此，假设我们与您一起创建了一个有趣的项目。 为了查看它，我们需要单击顶部面板上的“运行”按钮。 结果字段将向我们显示我们所做的事情。 不要忘记选择一个方便的布局进行查看并将其推荐给用户。
这是为您提供
JSFiddle推荐布局的地方-这是一个开源项目，它是项目内部的布局（网格）。 它们可以用作用户的辅助工具，这些用户在寻找正确的材料后将转到您的开发页面。
保存，发布和发布JSFiddle
保存项目
现在我们有一个很酷的项目，我们想与朋友分享或只是将其发布在我们的网站上。 为此，请转到左上角，这里有一个垂直菜单。 现在，我们对
Fiddle meta项感兴趣。 在这两行中，我们将指示项目的名称以及描述，该描述将同时为您，您的个人资料以及SERP中的所有用户显示。 输入数据。 然后，向上一点到该站点的顶部面板，然后单击“
保存”按钮。 第一次保存后，它将变成“
更新”按钮。
万岁！ 您的第一个Feed已准备就绪。
项目出版
因此，让我们在网站上发布我们的项目。
同样，在顶部面板上，保存项目后，我们就有机会共享它。 为此，找到新的“
嵌入”按钮。
在打开的窗口中，删除不必要的选项卡（Tab），选择主题，文本，背景色或保留默认设置。 接下来，单击“
嵌入代码”字段，然后将脚本复制到您的网站。 做完了！
还有一个替代的放置选项-使用框架。 要使用它，请点击此处的“首选iframe”链接？ 并复制iframe。 在其中，您还可以根据需要调整高度和宽度。 如果删除所有不必要的标签（编辑区域中的字段）并仅保留结果，则在网站上您只会看到它。
仅此而已！ 如果您有任何问题和建议，请在评论中写。
资料来源：
https :
//madeas.ru