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. This Tutorial Is Provided BY Cyber Elite.The left-hand menu radio buttons allow you to change the parsing language from C/C++, Perl, PHP, Python, Ruby, and tons more.
http://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.
http://writecodeonline.com/php/
3. Tinkerbin
Tinkerbin is actually one of the more popular online code editing resources. It supports web developers coding in HTML5/CSS3/JS and renders the output directly on-screen.
The rendering engine also supports more obscure languages such as Coffeescript and Sass within CSS. Their console is very advanced and clearly supports many of the trends which you will expect for the future of web design.
Another interesting note is how it supports keyboard shortcuts. This is something you hardly see on any webapp, except for any in-browser source code editor. As you type new tags, the IDE will auto-indent new lines.
http://tinkerbin.com/
4. 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.
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.
http://jsbin.com/welcome/1/edit
5. 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.
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.
http://jsfiddle.net/
6. 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.
http://cssdesk.com/
7. 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.
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.
https://code.google.com/apis/ajax/playground/
Comments