Èç¹ûÄãÊÇ¿ª·¢Õߣ¬ÔÚѰÕÒ×î¼ÑµÄ´úÂëÓÎÀÖ³¡£¬ÏíÊÜ´úÂëµÄÀÖȤ£¬ÄÇôÄãÀ´µ½ÁËÕýÈ·µÄµØ·½¡£ÔÚÕâÆªÎÄÕÂÖÐÎÒÒѾÊÕ¼¯ÁËÓÃÓÚ²âÊÔ¡¢µ÷ÊԺͷÖÏí´úÂëµÄ10¸ö×î ºÃµÄÃâ·Ñ´úÂëÓÎÀÖ³¡
1. Codepen
CodePen ÊÇÒ»¸öwebǰºó¶ËÓÎÀÖ³¡¡£Ëü»ùÓÚ¼¤·¢¡¢´«ÊںͷÖÏí¡£ÄܸßÁÁÈÈÃÅʾÀý£¨¡°Pen¡±£©£¬ÇÒÌṩ¸ß¼¶¹¦ÄÜ£¬ Èç¹²ÏíºÍǶÈë¡£ÐèÒª½¨Á¢Ò»¸ö¼õÉÙ²âÊÔ°¸ÀýÀ´ÑÝʾ²¢ÕÒ³öÒ»¸öbug£¿CodePen¾ø¶ÔÊʺÏÕâ¸ö³¡¾°¡£ÏëìÅÒ«ÄãµÄ×îд´×÷ºÍ»ñµÃͬÐеķ´À¡£¿ CodePenÊǾøÒ»²»¶þµÄÑ¡Ôñ¡£
2. CSSDesk
CSSDeskÊÇÒ»¸öÔÚÏßCSSɳÏä¡£ËüʹÈËÃÇÄܹ»¿ìËÙ²âÊÔµÄCSS´úÂëÆ¬¶Î£¬²¢¹Û²ìʵʱ½á¹û¡£ÎÒÓзdz£¿´ºÃÕâ¸öÏîÄ¿¡£ÓÐÐкźÍÎı¾¿òÊäÈëʵʱÓï·¨¸ßÁÁÏÔʾ¡£ÆäÖÐÒ»¸ö×îºÃµÄÒ»µãÊÇËüÔÊÐíÓû§ÓëËûÈË·ÖÏíËûÃǵĴúÂë¡£
3. Google¡¯s Code Playground
¹È¸èµÄ´úÂëÓÎÀÖ³¡ÊÇÒ»¸ö»ùÓÚWebµÄ¹¤¾ß£¬¿ÉÒÔÈÃWeb¿ª·¢ÈËÔ±³¢ÊԹȸèËùÓÐÌṩµÄAPI£¬µ÷Õû´úÂ룬ºÍ²é¿´½á¹û¡£¹È¸èµÄ´úÂëÓÎÀÖ³¡¿ÉÒÔÈÃÄú¾¡ÇéÏíÊܶø²»±Ø´ò¿ªÒ»¸öÍⲿ±à¼Æ÷£¬ËùÓеÄAPI¶¼±»×°ÔØÔÚ(×ó²à)¡°Pick an API¡±¿òÖС£
4. JS Bin
JS BinÊÇÒ»¸öweb app£¬×¨ÃÅÉè¼ÆÓÚ°ïÖúJavaScriptºÍCSSÇ×ÃÇÔÚijЩÉÏÏÂÎÄÖвâÊÔºÍÐ×÷µ÷ÊÔ´úÂë¡£ JS BinÔÊÐíÄã±à¼ºÍ²âÊÔJavaScriptºÍHTML¡£Ò»µ©ÂúÒ⣬Äã¿ÉÒÔ±£´æ²¢·¢ËÍÕâURL¸øÍ¬ÐÐÉó²é»òѰÇó°ïÖú¡£È»ºó£¬ËûÃÇ¿ÉÒÔ×ö¸ü½øÒ»²½µÄÐ޸ģ¬Èç ¹ûÐèÒª±£´æ¸üС£
5. JSFiddle
JSFiddle ÖÐÊÇÒ»¸öshell±à¼Æ÷£¬Í¨¹ý´´½¨»ùÓÚÁ÷ÐÐJS¿ò¼ÜµÄ×Ô¶¨Òå»·¾³£¬¼ò»¯JavaScriptµÄ±àд¡£ Äã¿ÉÒÔÑ¡Ôñ¿ò¼ÜºÍ°æ±¾£¨¿ÉÑ¡µÄÓÐMooTools£¬jQuery£¬ojo, Prototype, YUI, Glow,Vanilla£©¡£´ËÍ⣬Èç¹ûÐеϰ£¬Äã¿ÉÒÔÌí¼ÓjQuery UI»òMooTools MoreÖ®ÀàµÄÃâ·Ñ¿ò¼Ü¡£Ëü¾ßÓÐÒ»¸ö¼«ºÃµÄÌØÕ÷ÊÇÄܹ»²úÉúÒ»¸öΨһµÄURLÒÔ±£´æºÍ·ÖÏí´úÂë¡£ÁíÍ⣬JSFiddleÒ²×Ô´øÇ¶ÈëÌØÕ÷¡£ËüÊÇÎÞÐèÍøÕ¾¾Í¿É³¢ ÊԺͷÖÏíJS´úÂëµÄ¼«¼Ñƽ̨¡£
6. Dabblet
Dabblet ÊÇ¿ìËÙ²âÊÔCSSºÍHTML´úÂëÆ¬¶ÎµÄ½»»¥Ê½ÓÎÀÖ³¡¡£ËüʹÓÃ-prefix-free£¬²»±ØÔÚÄãµÄ CSS´úÂëÌí¼ÓÈκÎǰ׺¡£¿ÉÒÔÔÚGithub gist±£´æ¹¤×÷ÄÚÈÝ£¬½«ÆäǶÈëµ½ÆäËûÍøÕ¾ºÍÓëËûÈË·ÖÏí¡£ËüĿǰֻ֧³ÖChrome£¬SafariºÍFirefoxµÄÏÖ´ú°æ±¾¡£ËùÓз¢²¼µÄ´úÂëÊôÓÚ·¢²¼ Õߣ¬Ã»ÓÐÇ¿ÖÆÐí¿ÉÖ¤¡£ Dabblet±¾ÉíÊÇ¿ªÔ´Èí¼þ£¬ÔÚNPOSL-3.0Ðí¿ÉÏ·¢²¼¡£
7. Editr
Editr ÊÇÒ»¸ö¼¯HTML£¬CSSºÍJavaScriptµÄÓÎÀÖ³¡£¬Äã¿ÉÒÔÔÚ×Ô¼ºµÄ·þÎñÆ÷ÉÏÍйܡ£ËüÊÇ»ùÓÚACEµÄ±à ¼Æ÷¡£ËüµÄ³¬¼¶ÈÝÒ×°²×°¡£ËüÖ§³ÖÒ»¸öÒ³Ãæ¶à¸öʵÀý¡£¿ÉÒÔͨ¹ýJS¶ÔÏó»òHTMLÊôÐÔ½øÐÐÅäÖᣠEditrÖ§³Ö3ÖÖÊÓ¾õ²¼¾Ö£ºË®Æ½£¬´¹Ö±ºÍµ¥Ò»¡£Ç°Á½¸öÊÇÓÃÓÚÔÚÏ߱༡£µÚÈý¸öÊÇÓÃÓÚÑÝʾ¡£ Editr»ùÓÚMIT License¡£
8. Livewave
Liveweave ÊÇÓÃÓÚHTML5¡¢CSS3¡¢JavaScriptµÄÓÎÀÖ³¡ºÍÓÃÓÚÍøÒ³Éè¼ÆÊ¦ºÍ¿ª·¢Õßʵʱ±à¼Æ÷¡£ ÕâÊÇÓÃÀ´²âÊÔ£¬Á·Ï°ºÍ·ÖÏí³É¹ûµÄºÃ¹¤¾ß£¡Ãæ°å´óС¿Éµ÷£¬¿ÉÒÔÈÃÄãËæÐÄËùÓûд£¨»òÖ¯£¬ÈçÎÒÃdzƺôËüÃû×ÖÒ»Ñù£©´úÂë¡£ Liveweave»¹ÄÚÖÃÁ˶ÔHTML5ºÍCSS3µÄ±êÇ©/ÊôÐÔÉÏÏÂÎÄÃô¸ÐµÄ´úÂëÌáʾ£¬Ê¹Éú»î±äµÃ¸ü¼Ó¼òµ¥¡£
9. D3 Playground
D3.jsÉè¼ÆÄ¿µÄÔÚÓÚÈÃÄãÄܹ»ÒÔ½»»¥·½Ê½Ê¹ÓÃD3.js¿â¡£Ã¿Ò»´Î±à¼£¨²úÉúÓÐЧ´úÂ룩¶¼»áʵʱӰÏìD3.jsÓÎÀÖ³¡¡£ÒòΪCSSÊÇ¿ÉÊÓ»¯µÄÖØÒª×é³É²¿·Ö£¬ÄãÒ²¿ÉÒÔÔÚÏß±à¼CSS¡£
10. HTML5 Playground
HTML5µÄÓÎÀÖ³¡°üÀ¨Ò»¸ö¿ÉÒÔ¿´HTML5¶¯×÷µÄ´úÂë¿â¡£ËüÃǰüÀ¨Ò»Ð©»ù´¡Æô¶¯Àý³Ì£¬ÈçHTML5 DoctypeºÍÒôƵ±ê¼Ç£¨ÈÔÈ»ÊǼæÈÝä¯ÀÀÆ÷ÖлطÅÌØÐԵĺÃdemo£©¡£ÓµÓÐÒ»¸ö½»»¥±í¸ñ£¬°üº¬HTML5ÔªËØ£¬È緶Χ¡¢ÈÕÆÚÊäÈëºÍÕë¶Ôµç×ÓÓʼþµØÖ·ºÍÍøÕ¾µÄ×Ô¶¯ÑéÖ¤¡£