10个网站在线测试您的代码

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

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

10个最佳免费源代码编辑器可供下载

10个最佳免费源代码编辑器可供下载

借助Dreamweaver,Coda,Textmate等专业代码编辑器,越来越多的人开始使用它就不足为奇了。 阅读更多

键盘

10个网站在线测试您的代码

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

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

联合会

10个网站在线测试您的代码

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

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

10个网站在线测试您的代码

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

jsFiddle

10个网站在线测试您的代码

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

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

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

密码笔

10个网站在线测试您的代码

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

CodeSandbox

10个网站在线测试您的代码

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

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

网页制作工具

10个网站在线测试您的代码

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

CSSDesk

10个网站在线测试您的代码

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

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

IDEOne

10个网站在线测试您的代码

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

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

杰林特

10个网站在线测试您的代码

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

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

SQL小提琴

10个网站在线测试您的代码

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

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

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

最后的想法

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

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

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