Web 开发者看过来，10+ 款 Web 开发常备工具

   <p>工欲善其事，必先利其器。如今 Web 开发标准越来越高，Web 开发者也在不断寻找途径提升自己的技能。为使大家的开发工作更顺利进行，本文整理了 10+ 款比较优秀的 Web 开发工具，希望对你有帮助。</p>    <p>喜欢的不要忘了收藏、点赞和打赏哦，感谢大家的支持！</p>    <h2><a href="/misc/goto?guid=4959727746686154905" rel="nofollow,noindex">Bootstrap </a></h2>    <p>Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS 和 HTML 的集合，它使用了最新的浏览器技术，给你的 Web 开发提供了时尚的版式，表单，buttons，表格，网格系统等等。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9b9101b520562d9e89ed60986eb547bc.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958332662969681733" rel="nofollow,noindex">http://getbootstrap.com/    </a></p>    <h2>Atom</h2>    <p>Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持 CSS，HTML，JavaScript 等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/717d0f14c27c2a0dc27879c6b44fca95.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958832861167207492" rel="nofollow,noindex">https://atom.io/</a></p>    <h2><a href="/misc/goto?guid=4959727746825596246" rel="nofollow,noindex">Foundation </a></h2>    <p>Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/b3701654a86364f149afadaa6a1a3d39.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958338175196780124" rel="nofollow,noindex">http://foundation.zurb.com/</a></p>    <h2><a href="/misc/goto?guid=4959626100768605622" rel="nofollow,noindex">Fiddler </a></h2>    <p>Fiddler 是一个 http 调试代理，它能够记录所有的你电脑和互联网之间的 http 通讯，Fiddler 可以也可以让你检查所有的 http 通讯，设置断点，以及 Fiddle 所有的“进出”的数据。Fiddler 要比其他的网络调试器要更加简单，因为它不仅暴露 http 通讯还提供一个用户友好的格式。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6fd87e280ebedce8ef3d587df8c3d8ce.gif"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958832080584010144" rel="nofollow,noindex">http://www.telerik.com/fiddler</a></p>    <h2><a href="/misc/goto?guid=4959727746996252420" rel="nofollow,noindex">Cloud9 IDE </a></h2>    <p>Cloud9 IDE 是一个基于 <a href="/misc/goto?guid=4958189735229147892" rel="nofollow,noindex">Node.JS</a> 构建的 JavaScript 程序开发 Web IDE。它拥有一个非常快的文本编辑器，支持为 JS，HTML，CSS 和这几种的混合代码进行着色显示。Cloud9 IDE 还为 node.js 和 Google Chrome 集成调试器，可以在 IDE 中启动、暂停和停止。</p>    <p><img src="https://simg.open-open.com/show/e66bb3536a074d4d38a5e58ada9e032f.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958322168253735688" rel="nofollow,noindex">http://c9.io/</a></p>    <h2><a href="/misc/goto?guid=4959727747134010125" rel="nofollow,noindex">Notepad++ </a></h2>    <p>Notepad++ 是一款非常有特色的编辑器，是开源软件，可以免费使用。支持的语言: C, C++ , Java , C#, XML, HTML, PHP, Javascript！</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2f446d44d56c9308fbb81654ca6d80fc.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958874506326712870" rel="nofollow,noindex">https://notepad-plus-plus.org/</a></p>    <h2><a href="/misc/goto?guid=4959727747241260149" rel="nofollow,noindex">Firebug </a></h2>    <p>Firebug 是 Firefox 下的一款开发类插件，现属于 Firefox 的五星级强力推荐插件之一。它集 HTML 查看和编辑、Javascript 控制台、网络状况监视器于一体，是开发 JavaScript、CSS、HTML 和 Ajax 的得力助手。Firebug 如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给 Web 开发者带来很大的便利。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e1d6a61ce369801019ab8a63a5845cde.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958183983579986253" rel="nofollow,noindex">https://addons.mozilla.org/en-US/firefox/addon/firebug/</a></p>    <h2><a href="/misc/goto?guid=4959727747344108367" rel="nofollow,noindex">Visual Studio Code </a></h2>    <p>Visual Studio Code 是一个运行于 OS X，Windows 和 Linux 之上的，针对于编写现代 web 和云应用的跨平台编辑器。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e1b4ee956620050843bc321ecab86bbc.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958872398868295437" rel="nofollow,noindex">https://code.visualstudio.com/</a></p>    <h2><a href="/misc/goto?guid=4959727747463390952" rel="nofollow,noindex">GIMP </a></h2>    <p>GIMP 是 GNU 图像处理程序（GNU Image Manipulation Program）的缩写。包括几乎所有图象处理所需的功能，号称 Linux 下的 PhotoShop。GIMP 在 Linux 系统推出时就风靡了绘图爱好者圈。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e00d320a9304fa6fcb3a26325e95d7fa.png"></p>    <p>DEMO ： <a href="/misc/goto?guid=4959727747545768619" rel="nofollow,noindex">https://www.gimp.org/</a></p>    <h2><a href="/misc/goto?guid=4959727747620467126" rel="nofollow,noindex">Webbo </a></h2>    <p>Webbo 是一个免费、开源的轻量级的 Web 开发工具，支持 Windows 系统。主要特性包括：灵活编辑、支持多种 Web 编程语言和服务器端技术、即时的页面和服务器预览等。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/7eb5315cebbb94fdce768b8990ff8fb7.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4959727747710772907" rel="nofollow,noindex">http://webbo.sourceforge.net/</a></p>    <h2><a href="/misc/goto?guid=4959727747782285820" rel="nofollow,noindex">SecureHeaders </a></h2>    <p>SecureHeaders 是 推ter 送给 Web 开发者的一份大礼，作为一款 Web 安全开发工具，Secureheaders 能够自动实施安全相关的 header 规则，包括内容安全政策（CSP），防止 XSS、HSTS 等攻击，防止火绵羊（Firesheep）攻击以及 XFO 点击劫持等。</p>    <h2><a href="/misc/goto?guid=4959727747865939322" rel="nofollow,noindex">JSBin </a></h2>    <p>JSBin 是一个 Web 应用，主要用于帮助测试 JavaScript 和 CSS 的代码片段。功能与 <a href="/misc/goto?guid=4958187755802852921" rel="nofollow,noindex">jsFiddle</a> 网站一致。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/49bde1adf1aaa2de53012b02f242c481.png"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958344670058898650" rel="nofollow,noindex">http://jsbin.com/</a></p>    <h2><a href="/misc/goto?guid=4959727748004636555" rel="nofollow,noindex">Fontello </a></h2>    <p>Fontello 是个图标字体生成器。这个工具允许用户把这些图标 web 字体放到自己的项目中。主要特性如下：</p>    <ol>     <li> <p>缩小字形集合，减小字体大小</p> </li>     <li> <p>合并一些字体标记到单个文件中</p> </li>     <li> <p>访问大量专业级的开源图标</p> </li>    </ol>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/10dfb9939bfa58b310002cdadfb1a7bf.jpg"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958830721864621033" rel="nofollow,noindex">http://fontello.com/</a></p>    <h2><a href="/misc/goto?guid=4959727748111191942" rel="nofollow,noindex">XDebug </a></h2>    <p>xdebug 是一个开源的 php 调试器，以 php 模块的形式加载并被使用。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/edef95f879ca1218cd630b87920511a4.gif"></p>    <p>DEMO ： <a href="/misc/goto?guid=4958879008132528231" rel="nofollow,noindex">http://www.xdebug.org/</a></p>    <p> </p>    <p>来自：https://my.oschina.net/u/2903254/blog/798135</p>    <p> </p>