现代趋势和Web应用已极大地改变了Web开发人员的构建方式。 显然，您需要某种类型的IDE来编码新文件并将其保存以进行部署。 但是，仅测试您的代码片段呢？ 现在有比以前更多的可用工具！

在本文中，我想概述10个有趣的Web应用程序，以在线测试您的代码 。 所有这些应用程序都需要Internet连接，并且一些更高级的编辑器提供了升级帐户功能的专业计划。 但是，当您忙于调试JavaScript或PHP块时，这些工具中的大多数肯定会派上用场。

最初由史蒂芬榛创建， 键盘为独特的web应用程序，你可以在Web上共享代码的语法。 使用Codepad不仅可以进行调试，还可以复制/粘贴重要的代码片段以在线共享。

输出屏幕显示与您的代码关联的所有错误消息。 左侧菜单中的单选按钮使您可以从C / C ++，Perl，PHP，Python，Ruby以及更多版本中更改解析语言。 我认为Codepad确实适合需要协作和调试其更令人困惑的程序的软件工程师。

与上述类似， jsbin是一个简单JavaScript调试控制台。 他们的推销涉及协同工作，您可以与其他开发人员共享私有链接并实时一起编写。

他们的界面可能会使新手感到困惑。 开发人员已经设置了一些在线教程 ，有兴趣的话可以阅读。 基本上，您可以在任意数量的JS库之间进行选择-jQuery，JQuery UI，jQM，Prototype，MooTools，有数十种可供选择。

当您编码不同的元素时，草稿将自动保存。 您可以下载最终产品或将源代码保存在网上。 他们的系统在导出和保留代码为裸模板方面更为先进。

浏览过Stack Overflow的任何人都必须了解jsFiddle 。 与JSBin相比，它们的界面有很大的不同，并且支持更复杂的功能。

您可以立即注册一个免费帐户，然后开始在线保存代码示例。 jsFiddle提供了一个简短的URL，您可以通过Twitter，Facebook甚至Stack在Web上共享该URL。 但是请注意，您不需要帐户即可开始编码。 这只是使一切井井有条的便捷功能。

jsFiddle还支持包含Prototype和jQuery之类的库。 您可以将JS / CSS文件的其他外部资源包括到每个测试文档中。 令人难以置信的是，他们的应用程序甚至支持XHR Ajax ，您可以在其中在服务器和客户端浏览器窗口之间来回传递数据。

CodePen更像是Web开发人员的社交媒体，而不仅仅是代码游乐场。 我们不仅可以看到人们共享HTML，CSS和JavaScript中的代码（称为Pen），而且还可以对Pen表示“赞”，添加评论，整理Pen的集合，创建帖子以及应对挑战以提高我们的Web开发技能。

Codesandbox是功能齐全JavaScript运动场。 除了运行Vanilla JavaScript代码或React.js，Vue.js和Svelte之类的框架外，您还可以运行有效的Node.js应用程序。 这意味着您可以在package.json文件中定义Node.js依赖关系。 Codesandbox将自动从NPM下载缺陷。 它还提供对基于Web的终端的访问，因此您可以直接从浏览器运行任何NPM脚本 。

请参阅“ 浏览”页面以查找CodeSandbox中内置的有趣功能。

WebMaker是HTML，CSS，JavaScript以及Sass，LESS和JSX等预处理器的代码游乐场。 WebMaker将自动为浏览器编译这些预处理器语法，以正确呈现代码。 您可以在浏览器中使用或在Chrome中安装扩展程序，以便离线时仍可以使用代码。 实验完代码后，可以将其保存在本地，下载文件或在CodePen中共享。

从脚本世界过渡到样式表语言，我们有了CSSDesk 。 您将拥有与其余所有设置类似的设置，左侧是源代码，右侧是最终网页。 此webapp非常适合构建小型网页模板，并使用渐变和框阴影测试更长CSS3属性。

此应用程序还允许您将源代码作为文件下载到计算机。 在您没有任何IDE软件的笔记本电脑上工作的情况下，它可以是可靠的替代品。 或者，您可以生成一个简短的URL链接以在线共享。 然后其他开发人员可能会来编辑您已经创建的内容-绝对是一个有趣的解决方案！

IDE One是基于深度编程和软件开发的另一种工具。 他们的在线编辑器支持突出显示某些非常突出的语言的语法。 这些工具包括Objective-C，Java，C＃，VB.NET，SQL等等。

他们的应用最吸引人的地方是，您可以从同一页面快速调试许多不同的编程语言。 您还可以通过唯一的URL存储此源代码以在Web上共享。 但是，我的确感到他们的版面非常混乱，包含广告和其他内容，这使得使用他们的网站变得很困难。 看到包括备用代码库（例如用于iPhone应用程序开发的Cocoa Touch）的选项真的很酷。

自称为JavaScript代码质量工具的必须是JSLint 。 他们的网站有点奇怪，但是代码编辑器的工作完全符合您的期望。

如果您以前没有使用过它们的框架，则可能会发现选项非常混乱。 如果您具有相应技能，则可以使用Node.js等开源代码。 但是很多源代码甚至不支持语法高亮显示，这是一个令人失望的选择，因为您有很多其他选择。 如果有时间，我会检查一下JSLint，但是它可能不会成为您的在线JavaScript调试器。

我们之前已经看到了jsFiddle这样的Web应用程序的功能。 现在，我们可以看到SQL Fiddle的工作方式相同，但SQL数据库语法除外。 我还没有找到测试数据库代码的另一种方法，这是迄今为止我最喜欢的选择。

SQL代码的所有输出数据将显示在编辑器下方的表中。 您可以在右侧编写一些代码以实现新数据，并在左侧编写模式。 您可以保存此数据库模式SQL代码，以导出当前数据库并在新服务器上重新安装所有内容。

如果您不熟悉数据库或SQL语言，那么此应用程序将无济于事。 但是，即使对于新手却对学习SQL感兴趣的开发人员，这也很棒！ 请查看他们的基本代码示例之一，以便您了解该应用程序的工作原理。

最后的想法

随着越来越多的计算机在线连接，开发人员可以更轻松地在浏览器中一起工作和协作。 我们看到越来越多的技术从本地应用程序转移，谁知道这种趋势会走多远？

我希望这组代码测试工具可以使您思考现代开发环境。 快速组合一个HTML / CSS Web项目非常容易，几分钟之内就可以看到一个小的演示预览。 请记住，这些仅是有助于指导您构建最终产品的工具。 如果您对本文有任何建议或问题，请在下面的讨论区域中分享您的想法。

翻译自: https://www.hongkiat.com/blog/tools-to-coding-online/