## 在線編輯器 * [Plunker](http://plnkr.co/) is an online community for creating, collaborating on and sharing your web development ideas. * [codeopen](http://codepen.io/) Front End Developer Playground & Code Editor in the Browser * [Cloud9](https://c9.io/) combines a powerful online code editor with a full Ubuntu workspace in the cloud --- > 樣式 * [EnjoyCss](http://enjoycss.com/) Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS * [CSSDesk](http://cssdeck.com/) HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck * [sass meister](http://sassmeister.com/) 在線編譯sass * [CSS Animate](http://cssanimate.com/) 在線制作css3動畫 * [CSS三角形產生器](http://apps.eky.hk/css-triangle-generator/zh-hantf) * [Gradient Editor](http://www.colorzilla.com/gradient-editor/) A powerful Photoshop-like CSS gradient editor from ColorZilla. --- > bootstrap * [Bootply](http://www.bootply.com/) Bootstrap Editor and Builder * [Boostrap Studio](https://bootstrapstudio.io/) A powerful desktop app for creating responsive websites using the Bootstrap framework. --- > SVG * [Method Draw](http://editor.method.ac/) 在線繪制svg * [circulus](https://sarasoueidan.com/tools/circulus/) SVG 圓形菜單生成器。 --- > Promise * [Promisees](http://bevacqua.github.io/promisees/) Promise visualization playground for the adventurous ## 協作工具（原型，設計，產品） > 原型 * [Axure](http://www.axure.com/) The prototyping and specification software used by 86% of the Fortune 100. Beyond mockups, design interactive prototypes for business solutions, websites, and applications. * [墨刀](https://modao.cc/) 免費的移動應用原型與線框圖工具 * [epub360](http://www.epub360.com/) Epub360意派—專業級H5交互設計利器 * [Origami Studio](http://facebook.github.io/origami/) facebook出的一個全新的現代交互設計工具 --- > 文檔 * [石墨文檔](https://shimo.im/) 最優美的在線協作文檔 * [一起寫](https://yiqixie.com/) 耳目一新的云端OFFICE * [GitBook](https://www.gitbook.com/) modern publishing toolchain. Making both writing and collaboration easy. --- > Markdown編輯工具 * [Typora](http://www.typora.io/) a cross-platform minimal markdown editor, prividing seamless experience for both markdown readers and writers. --- > 設計工具 * [Photoshop](http://www.photoshop.com/) 不解釋 * [GIMP](https://www.gimp.org/) The Free & Open Source Image Editor * [Sketch](https://www.sketchapp.com/) Professional digital design for Mac. * [Illustrator](http://www.adobe.com/products/illustrator.html) 矢量圖編輯工具 * [Coreldraw](http://www.coreldraw.com/en/) 矢量圖編輯工具 * [Inkscape](https://inkscape.org/en/) Linux下的矢量圖編輯工具 * [Affinity Designer](https://affinity.serif.com/zh-cn/designer/) 專業圖形設計軟件 * [Adobe Experience Design](http://xd.adobe.com/) Adobe公司推出的原型制作工具 --- > 設計稿標注工具 * [zeplin](https://zeplin.io/) Collaboration app for UI designers and frontend developers * [馬克鰻](http://www.getmarkman.com/) 高效的設計稿標注、測量工具 - [PxCook](http://www.fancynode.com.cn/pxcook) 標注切圖，一起搞定！專注設計本質。 ## 企業協作工具 * [Trello](https://trello.com/) 完全免費，靈活性高，可視化，和任何人一起管理任何事情。 * [worktile](https://worktile.com/) 更好用的企業協作平臺 * [teambition](https://www.teambition.com/) 最好的團隊協作工具 * [tower](https://tower.im/) 你的網上辦公室 * [明道](https://www.mingdao.com/homef) 超自由的團隊協作平臺 --- > 畫圖工具 * [ProcessOn](https://www.processon.com/) 高效免費的作圖工具 --- > 溝通工具 * [BearyChat](https://bearychat.com/) 是一款為工作場景設計的團隊溝通工具。擁有全平臺客戶端，支持自主創建公開私密討論組，歷史消息全局搜索，文件存儲和整理，以及近 50 個第三方服務集成 --- > 代碼托管 * [GitLab](https://about.gitlab.com/) unlimited free repositories and collaborators * [github](https://github.com/) 不解釋 * [coding](https://coding.net/) 是一個面向開發者的云端開發平臺,提供 git代碼托管，免費的運行演示空間，代碼質量分析，在線Web IDE，項目管理，開發協作，懸賞眾包，冒泡社交等功能。 為開發者提供技術討論和開發，協作工具， Coding 極速的代碼體驗，讓開發更簡單。 --- > Wiki * [confluence](https://www.atlassian.com/software/confluence) wiki系統 * [看云](http://www.hmoore.net/explore) 專注于文檔的在線創作、協作、分享和托管服務，致力于提供最佳的在線創作和閱讀體驗，讓企業和個人可以更方便地發布和管理自己的文檔。 --- > Bug管理 * [JIRA](https://www.atlassian.com/software/jira) ## 程序開發工具 > 代碼編輯器 * [Sublime Text](http://www.sublimetext.com/) Sublime Text is a sophisticated text editor for code, markup and prose. * [Visual Studio Code](https://code.visualstudio.com/) Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. * [WebStorm](http://www.jetbrains.com/webstorm/) The smartest JavaScript IDE * [Atom](https://atom.io/) At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. * [Brackets](http://brackets.io/) A modern, open source text editor that understands web design. * [HBuilder](http://www.dcloud.io/) 飛速編碼的極客工具，手指爽，眼睛爽下載、 * [Koala](http://koala-app.com/index-zh.html) koala是一個前端預處理器語言圖形編譯工具，支持Less、Sass、Compass、CoffeeScript，幫助web開發者更高效地使用它們進行開發。跨平臺運行，完美兼容windows、linux、mac。 --- > 抓包工具 * [Fiddler](http://www.telerik.com/fiddler) The free web debugging proxy for any browser, system or platform * [Charles](https://www.charlesproxy.com/) Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. * [Wireshark](https://www.wireshark.org/) is the world’s foremost and widely-used network protocol analyzer. --- > API調試工具 * [Postman](https://www.getpostman.com/) Postman is the swiss army knife of API tools, allowing you to design, build, test, document and monitor your services, all in one place. --- > 瀏覽器測試工具 * [browsershots](http://browsershots.org/) Check Browser Compatibility, Cross Platform Browser Test * [netrenderer](http://netrenderer.com/) allows you to check how a website is rendered by Internet Explorer 11, 10, 9, 8, 7, 6 or 5.5, as seen from a high speed internet location. Just type in a URL in the field above and try it out - it's free! --- > 正則工具 * [Regexper](https://regexper.com/) Regular expression visualizer using railroad diagrams * [Regexpal](http://www.regexpal.com/) Test your Javascript and PCRE regular expressions online. * [regular expressions 101](https://regex101.com) Online regex tester, debugger with highlighting for PHP, PCRE, Python, Golang and JavaScript. --- > 程序開發其它工具 * [Character Code](http://www.character-code.com/) 編碼查詢 * [Px to Em](http://pxtoem.com/) CSS單位轉換 * [CSS 2 SASS/SCSS CONVERTER](http://css2sass.herokuapp.com/) css轉sass/scss * [css2less](http://css2less.co/) css轉less * [html2jade](http://www.html2jade.org/) html轉jade - [linux命令搜索](https://jaywcjlove.github.io/linux-command/)