In this article I want to outline interesting web apps for testing your code online. All of these apps require an Internet connection, and some of the more advanced editors offer pro plans to upgrade your account features. But most of these tools will surely come in handy when you’re scrambling to debug a block of JavaScript or PHP.
1. Codepad
Originally created by Steven Hazel, Codepad is a unique web app where you can share code syntax across the Web. Instead of just debugging, Codepad allows you to copy/paste important bits of code to share online.
The output screen displays any error messages associated with your code. The left-hand menu radio buttons allow you to change the parsing language from C/C++, Perl, PHP, Python, Ruby, and tons more.
As you’re coding different elements its autosaves your drafts. Also you have the ability to download your final product or keep the source code saved online. Their system is much more advanced for exporting and keeping your code as a bare template.
Link: jsbin.com
jsFiddle also supports the inclusion of libraries such as Prototype and jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
Link: jsfiddle.net
Link: cssdesk.com
Although all that sounds too good but it might not be the perfect tool for debugging everything you write. Although Google is a huge company with a lot of open source API data so if ever you need to pull content from YouTube or custom Google Searches, this is the sandbox you want to use.
Link: google code playground
With more computers connected online, it’s getting easier for developers to work together and collaborate in the browser. We’re seeing more and more technologies shift from local applications, and who knows how far this trend will go?
I hope this collection of code testing tools can get you thinking about the modern development environment. It’s so easy to quickly put together an HTML/CSS web project and within minutes have a small demo preview. Remember these are only tools to help guide you along the path to constructing your final product. If you have any suggestions or questions about the article feel free to share your thoughts in the discussion area below.
1. Codepad
Originally created by Steven Hazel, Codepad is a unique web app where you can share code syntax across the Web. Instead of just debugging, Codepad allows you to copy/paste important bits of code to share online.
The output screen displays any error messages associated with your code. The left-hand menu radio buttons allow you to change the parsing language from C/C++, Perl, PHP, Python, Ruby, and tons more.
Link : codepad.org
2. Write Code Online
WriteCodeOnline.com actually redirects to their JavaScript editor. You can choose among JS, PHP, and basic URL encoding. Their application is very safe to use and feels lighter than other alternatives.
What’s interesting is that you’ll see the output results directly underneath the text field. So when you hit “run code” it will parse through everything and display the result for you to see. It can be tough debugging some larger PHP scripts because you need to include other files.
What’s interesting is that you’ll see the output results directly underneath the text field. So when you hit “run code” it will parse through everything and display the result for you to see. It can be tough debugging some larger PHP scripts because you need to include other files.
Link: writecodeonline.com
3. JS Bin
Similar to Tinkerbin, jsbin is a simple JavaScript debugging console. Their pitch involves a collaborative effort where you can share a private link with other developers and write together in real time.
Although its interface might be a bit confusing to newcomers but to help you through, the developers have setup some online tutorials that can be read through if interested. Basically one can select between any number of JS libraries – jQuery, JQuery UI, jQM, Prototype, MooTools, there are dozens to choose from.
Similar to Tinkerbin, jsbin is a simple JavaScript debugging console. Their pitch involves a collaborative effort where you can share a private link with other developers and write together in real time.
Although its interface might be a bit confusing to newcomers but to help you through, the developers have setup some online tutorials that can be read through if interested. Basically one can select between any number of JS libraries – jQuery, JQuery UI, jQM, Prototype, MooTools, there are dozens to choose from.
As you’re coding different elements its autosaves your drafts. Also you have the ability to download your final product or keep the source code saved online. Their system is much more advanced for exporting and keeping your code as a bare template.
Link: jsbin.com
4. jsFiddle
If you have browsed through Stack Overflow, we are sure you know about jsFiddle. Its interface is a whole lot different as compared to JS Bin, and this supports more complex functions.
Right away, you can signup for a free account and start saving your code samples online. jsFiddle offers a short URL which you can share around the Web via Twitter, Facebook, even Stack. And you don't even need an account to start coding.
If you have browsed through Stack Overflow, we are sure you know about jsFiddle. Its interface is a whole lot different as compared to JS Bin, and this supports more complex functions.
Right away, you can signup for a free account and start saving your code samples online. jsFiddle offers a short URL which you can share around the Web via Twitter, Facebook, even Stack. And you don't even need an account to start coding.
jsFiddle also supports the inclusion of libraries such as Prototype and jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
Link: jsfiddle.net
5. CSSDesk
Let's move to the world of stylesheet language from scripting into and we have CSSDesk. This gives you a similar setup like all the rest with your source code on the left and final webpage render on the right. This webapp is great for building small webpage templates and testing the longer CSS3 properties with gradients and box shadows.
This app also allows you to download source code as files to your computer. This is a wonderful replacement in situations where you are working on a laptop without any IDE software. You can even generate a short URL link to share online.
Let's move to the world of stylesheet language from scripting into and we have CSSDesk. This gives you a similar setup like all the rest with your source code on the left and final webpage render on the right. This webapp is great for building small webpage templates and testing the longer CSS3 properties with gradients and box shadows.
This app also allows you to download source code as files to your computer. This is a wonderful replacement in situations where you are working on a laptop without any IDE software. You can even generate a short URL link to share online.
Link: cssdesk.com
6. Google Code Playground
It is surprising how many developers are not aware of the Google code sandbox. It gives you full access to their APIs and can debug all your code right from the same window.
When we say APIs, we actually mean that you can pull data from the biggest Google products. Listing blog posts from Blogger, markers from Google Maps, and even video players directly from YouTube. As you click through these different examples the live preview box will update accordingly.
It is surprising how many developers are not aware of the Google code sandbox. It gives you full access to their APIs and can debug all your code right from the same window.
When we say APIs, we actually mean that you can pull data from the biggest Google products. Listing blog posts from Blogger, markers from Google Maps, and even video players directly from YouTube. As you click through these different examples the live preview box will update accordingly.
Although all that sounds too good but it might not be the perfect tool for debugging everything you write. Although Google is a huge company with a lot of open source API data so if ever you need to pull content from YouTube or custom Google Searches, this is the sandbox you want to use.
Link: google code playground
Final Thoughts
With more computers connected online, it’s getting easier for developers to work together and collaborate in the browser. We’re seeing more and more technologies shift from local applications, and who knows how far this trend will go?
I hope this collection of code testing tools can get you thinking about the modern development environment. It’s so easy to quickly put together an HTML/CSS web project and within minutes have a small demo preview. Remember these are only tools to help guide you along the path to constructing your final product. If you have any suggestions or questions about the article feel free to share your thoughts in the discussion area below.
Post a Comment