1. 前端开发工具 - [IntelliJ IDEA 简体中文专题教程](https://github.com/judasn/IntelliJ-IDEA-Tutorial) - [Webstorm,InterllIdea,Phpstorm](http://t.cn/8kZZ1Uy) - [SublimeText](https://github.com/jikeytang/sublime-text) - [Atom](https://atom.io/) - [Atom飞行手册（中文版）](https://www.gitbook.com/book/wizardforcel/atom-flight-manual-zh-cn/details) - [Atom-vue代码高亮](https://github.com/CYBAI/language-vue-component) - [visual studio code](https://code.visualstudio.com/) 2. Chrome, Firebug, Filddle 调试 1. Fiddler - [Fiddler调式使用知多少(一)深入研究](http://www.cnblogs.com/tugenhua0707/p/4623317.html) - [微信fiddle](http://www.cnblogs.com/strick/p/4570006.html) - [微信fiddle](http://gaoboy.com/article/26.html) 2. Chrome - [Google Chrome 官方](https://developer.chrome.com/devtools) - [Chrome - 基础](http://www.cnblogs.com/constantince/p/4565261.html) - [Chrome - 进阶](http://www.cnblogs.com/constantince/p/4579121.html) - [Chrome - 性能](http://www.cnblogs.com/constantince/p/4585983.html) - [Chrome - 性能进阶](http://www.cnblogs.com/constantince/p/4607497.html) - [Chrome - 移动](http://www.cnblogs.com/constantince/p/4624241.html) - [Chrome - 使用技巧](http://www.cnblogs.com/liyunhua/p/4544738.html) - [Chrome - Console控制台不完全指南](http://www.cnblogs.com/Wayou/p/chrome-console-tips-and-tricks.html) - [Chrome - Workspace使浏览器变成IDE](http://c7sky.com/chrome-devtools-workspace.html) - [network面板](http://www.html-js.com/article/Nothing-blind%202975) - [chrome开发工具快捷键](http://anti-code.com/devtools-cheatsheet/) - [chrome调试工具常用功能整理](http://www.html-js.com/article/2327) - [Chrome 开发工具 Workspace 使用](http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace/) - [Chrome神器Vimium快捷键学习记录 ](http://www.cppblog.com/deercoder/archive/2011/10/22/158886.html) - [sass调试-w3cplus](http://www.w3cplus.com/sassguide/debug.html) - [如何更专业的使用Chrome开发者工具-w3cplus](http://www.w3cplus.com/tools/how-to-use-chrome-devtools-like-a-pro.html) - [chrome调试canvas](http://sentsin.com/web/253.html) - [chrome profiles1](https://developer.chrome.com/devtools/index) - [chrome profiles2](http://h5dev.uc.cn/article-25-1.html) - [chrome profiles3](http://www.oschina.net/translate/performance-optimisation-with-timeline-profiles) - [chrome移动版调试](https://developers.google.com/chrome-developer-tools/docs/mobile-emulation) - [chrome调试](http://ued.taobao.org/blog/?p=5534) - [chrome的调试](http://www.cnblogs.com/QLeelulu/archive/2011/08/28/2156402.html) - [chrome console 命令详解](https://developers.google.com/chrome-developer-tools/docs/commandline-api) - [查看事件绑定1](http://www.cnblogs.com/leonkao/p/3809655.html) - [查看事件绑定2](http://www.cnblogs.com/xiaoyao2011/p/3447421.html) - [神器——Chrome开发者工具(一)](http://segmentfault.com/blog/xuelang/1190000000683599) - [奇趣百科性能优化(Chrome DevTools 中的 Timeline Profils 等工具使用介绍)](https://xinranliu.me/2015-05-22-qiqu-performance/) - [chrome 开发者工具的 15 个小技巧](http://frontenddev.org/link/15-tips-of-chrome-developer-tools.html) - [Chrome开发者工具不完全指南](http://1ke.co/course/361) - [Chrome 开发者工具使用技巧](http://segmentfault.com/a/1190000003882567) - [Chrome渲染分析之Rendering工具使用(1)](http://www.ghugo.com/chrome-rendering-tools-1/) - [Chrome渲染分析之Rendering工具使用(2)](http://www.ghugo.com/chrome-rendering-tools-2/) - [Chrome渲染分析之Rendering工具使用(3)](http://www.ghugo.com/chrome-rendering-tools-3/) - [像 Sublime Text 一样使用 Chrome DevTools](http://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/) - [Chorme 35个开发者工具的小技巧](http://www.w3cplus.com/tools/dev-tips.html) 3. Firebug - [firebug视频教程](http://www.imooc.com/learn/137) - [firefox 模拟器](https://developer.mozilla.org/zh-CN/docs/Tools/WebIDE) - [console.log 命令详解](http://www.cnblogs.com/ctriphire/p/4116207.html) - [Firebug入门指南](http://www.ruanyifeng.com/blog/2008/06/firebug_tutorial.html) - [Firebug控制台详解](http://www.ruanyifeng.com/blog/2011/03/firebug_console_tutorial.html) - []() 4. 移动,微信调试 - [微信调试的那些事](http://liyaodong.com/2015/07/06/%E5%BE%AE%E4%BF%A1%E8%B0%83%E8%AF%95%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/) - [微信调试官网](http://blog.qqbrowser.cc/) - [微信公众号本地调试](http://blog.qqbrowser.cc/wei-xin-gong-zhong-hao-ben-di-diao-shi/) - [微信、手Q、Qzone之x5内核inspect调试解决方案](http://bbs.mb.qq.com/thread-243399-1-1.html) - [浏览器端调试安卓](https://openstf.github.io/) - [移动端前端开发调试](http://yujiangshui.com/multidevice-frontend-debug/) - [使用 Chrome 远程调试 Android 设备](https://github.com/yujiangshui/CN-Chrome-DevTools/blob/remote-debugging/md/Use-Tools/remote-debugging.md) - [mac移动端调试](http://plus.uc.cn/document/webapp/doc5.html) - [mac移动端调试](http://www.mihtool.com/) - [无线调试攻略](http://thx.github.io/mobile/debugging-in-mobile/) - [无线调试攻略](http://yanhaijing.com/mobile/2014/12/17/web-debug-for-mobile/) - [屌爆了,完美调试 微信webview(x5)](http://www.jianshu.com/p/ccf124f1f74b) - [远程console](http://jsconsole.com/) - [微信调试工具](http://blog.qqbrowser.cc/) - [各种真机远程调试方法汇总](https://github.com/jieyou/remote_inspect_web_on_real_device) - [手机测试自己写的web页面](http://www.zhihu.com/question/37361845) 5. iOS Simulator - [Simulator](https://developer.apple.com/library/ios/documentation/IDEs/Conceptual/iOS_Simulator_Guide/Introduction/Introduction.html) - [Xcode中的iOS模拟器(iOS Simulator)的介绍和使用心得](http://www.crifan.com/intro_ios_simulator_in_xcode_and_usage_summary/) 3. img - [loading img](http://preloaders.net/en/circular) - [智图-图片优化平台](http://zhitu.isux.us/) - [在线png优化](https://tinypng.com/) 4. 生成二维码 - [生成二维码](http://cli.im/) 5. 浏览器同步 - [puer](https://github.com/leeluolee/puer) - [liveReload](http://livereload.com/) - [f5](http://getf5.com/) - [File Watchers](http://geek100.com/2608/) 6. 在线PPT制作 - [nodePPT](http://js8.in/2013/11/16/%E6%8E%A8%E8%8D%90nodeppt%EF%BC%9A%E4%BD%BF%E7%94%A8markdown%E8%AF%AD%E6%B3%95%E6%9D%A5%E5%86%99%E7%BD%91%E9%A1%B5ppt/) - [PPT](https://github.com/ksky521/nodePPT) - [reveal](https://github.com/hakimel/reveal.js/) - [slippy](https://github.com/Seldaek/slippy)