For this roundup, we have amassed a list of handy and useful tools that will allow die-hard developer and codegeeks to test their code snippets instantly. Many web developers use online tools for checking their code snippets, some of these tools also allow them to edit and share their codes with others for review or for help.
Below, we have presented 21 useful websites and tools for testing code snippets. With these tools, developers can check their unprepared codes, debug and write code easily in various languages (php, html, JavaScript, css, Ajax etc.) and can make necessary changes to see how their code functions. You can copy and paste your code, and share it with your clients and friends as well.
Have Fun !!
1. Codepen
CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding.
2. Dabblet
Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others. It currently only supports modern versions of Chrome, Safari and Firefox.
3. Ideone
Ideone is an online compiler and debugging tool which allows you to compile source code and execute it online in more than 60 programming languages.
4. JsFiddle
jsFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla). Also, if there is, you can add a complimentary framework like jQuery UI or MooTools More A great feature is the ability to save & share the code created with a unique URL generated.
5. Codepad
This is an online compiler or interpreter and collaboration tool to help you create a short URL for your code so that you can share it via chat or email.
6. CSS Desk
CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live. I had very high ambitions for the project. There are line numbers and syntax highlighting appears live in the text box as you type.
7. Liveweave
Liveweave is a HTML5, CSS3 & JavaScript playground and a real-time editor for web designers and developers. It is a great tool to test, practice and share your creations! It has resizable panels, so that you can write your code (or weave, as we call it) the way you want.
8. D3 Playground
The D3.js Playground is designed to allow you to play with the D3.js library in an interactive manner. Every edit made (that results in valid code) affects the playground in realtime. Because CSS is such an important part of visualizations, you can edit CSS live, too.
9. Practicode
Practicode lets you edit your code snippets and can also render HTML, CSS and VBScript.
10. Jsdo.it
jsdo.it is a coding community for front-end engineers such as web designers, mark-up engineers, and JavaScript engineers. This is an online editor where you can try running your codes as you write. You can save your codes online as well as show them to the public as your work.
11. Editr
Editr is a HTML, CSS and JavaScript playground that you can host on your server. It is based on ACE Editor. Its super easy to setup. It supports multiple instances on one page. Configurations are available via JS object or HTML attributes. Editr supports 3 layout views: horizontal, vertical and single. First two are for live edit. Third one is for presentation.
12. JS Bin
JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML. Once you’re happy you can save, and send the URL to a peer for review or help.
13. HTML Edit Square
Test your HTML code with this real time playground tool.
14. Patebin
With this tool, developers can flexibly resize code pane based on the browser’s viewpoint which is extremely helpful for widescreen monitors.
15. Google Codes Playground
Google’s Code Playground is a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box.
16. RegExr
RegExr is an online tool for editing and testing Regular Expressions (RegExp / RegEx). It provides a simple interface to enter RegEx expressions, and visualize matches in real-time editable source text. It also provides a handy RegExp snippet sidebar with descriptions and usage examples to make it easier to learn Regular Expressions through trial and error.
17. Chop
Chop is a simple way to add notes to a code snippet and share them. Chop is a quick and easy way to let the offending engineer know the error of their ways. Just copy and paste the lines in question, add your notes and share them with a unique URL. The person you share with will have the chance to pull out their Chopper and comment right back.
18. HTML5 Playground
The HTML5 Playground includes a library of code snippets you can explore to see HTML5 in action. They include some basic getting-started examples, such as the use of the HTML5 Doctype and the audio tag (which nevertheless is a good demo of the playback features in a compatible browser).
19. HTML Codesniffer
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.
20. JS Hint
JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. It is very flexible so you can easily adjust it to your particular coding guidelines and the environment you expect your code to execute in.
21. JS Nice
JS Nice makes even obfuscated JavaScript code readable. It is a new kind of statistical de-obfuscation and de-minification engine for JavaScript. Given a JavaScript program, JSNice automatically suggests new likely identifier names and types.
