十六. 開發工具類 · JS前端開發群規

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)