用于測試代碼片段的實用網站和工具

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.