超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）

要说有哪些好用的前端开发软件和工具，我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具。今天我就从浏览器兼容性测试工具、web开发工具、前端性能优化工具、大数据可视化工具这四个方向来和大家共享下我的存货，希望对大家的学习和工作有帮助~

 

浏览器兼容性测试工具

• Spoon Browser Sandbox：点击你需要测试的浏览器环境，安装插件就可以进行测试了。帮助你测试网页在Safari、Chrome、Firefox和Opera浏览器中是否正常，IE以前也有的，网站上说应微软的要求去掉了。
• Superpreview：这是微软自己发布的跨浏览器测试工具，可以同时查看网页在多个浏览器的呈现情况，对页面排版进行直观的比较。
• Viewlike：Viewlike是一款可以帮助你检查浏览器在不同分辨率下呈现情况的实用工具。
• Browsera：Browsera是一个可测试网站跨浏览器布局的工具，可以发现网站上存在的兼容性错误。
• Litmus：这个工具可以帮助你检查你的网站在多个浏览器中的呈现情况，跟踪Bug并创建报告。

 

web开发工具

• Parcel：快速，零配置的Web应用程序捆绑器。
• Feather：简单漂亮的开源图标。
• Hyperapp v1.0：用于构建现代UI应用程序的1kb库。
• Sizzy：快速测试响应式网站的工具。
• Heml：用于构建响应式电子邮件的开源标记语言。
• Cypress：对浏览器中运行的内容进行快速、简便和可靠的测试。
• FlowUp：可跟踪应用的整体性能，并深入了解各种关键性能指标，如FPS，内存使用情况，CPU使用率，磁盘使用情况等。
• Stetho：一款功能强大的Android开源调试平台，由Facebook开发。
• Android Asset Studio：一组简单易用的工具，用于生成设计和开发。Android应用程序时需要的各种类型的图标。
• Android调试数据库：用于调试Android数据库。
• Vysor：允许将真实设备镜像到计算机上。
• LeakCanary：用于Android和Java的内存泄漏检测库。
• Android Arsenal：可以找到Android的库，工具和项目的分类目录。

 

前端性能优化工具

• Speed Racer：SpeedRacer 是一款性能测试工具，它在 Chrome 中运行脚本，并生成详细的性能报告。SpeedRacer 是直接借助浏览器来实际测试性能的工具，在实际工作中，可以与其它模拟用户访问流量来评估性能的工具配合使用。
• Yellow Lab Tools：Yellow Lab Tools 是一款Web性能及前端质量测试工具。与其他工具不同的是，它有一些在其他工具上无法看到的独特功能，例如页面加载时 JavaScript 与 DOM 互动和其他程序代码验证问题。
• grunt-perfbudget：一款用于评估性能的 Grunt task，它使用 WebPagetest 的公有或私有实例在特定的 URL 进行测试，并将测试结果和你预期的性能期望做比较。
• DOM Monster：使用DOM monster你只需要添加到你的浏览器书签中,在任何需要调试的页面点击这个书签,它就能够帮助你列出目前页面出现的性能问题。
• zBugs：zbugs看上去像是一个bug相关工具，其实它是一个快速帮助你压缩CSS/Javascript的在线工具。只需要提供一个网站的链接，下载相关的文件，再上传到你的网站即可。

 

大数据可视化工具：

• plotly：plotly是一个用于做分析和可视化的在线平台，其功能强大到不仅与多个主流绘图软件的对接，而且还可以像Excel那样实现交互式制图，而且图表种类齐全，并可以实现在线分享以及开源等等。
• Tableau：可以帮助任何人快速分析、可视化并分享信息，而且界面上的数据非常容易操控。
• RawGraphs：手里有数据但不会做图表？让RawGraphs帮你解决这个问题吧！导入数据、选择想要的模板，只需点击几下就可以生成好看的图表。而且还可以根据你的需要免费下载为svg、png等格式，或者嵌入到网页当中。
• Ichartjs：Ichartjs是一款基于HTML5的图形库，使用纯javascript语言，利用HTML5的canvas标签绘制各式图形，致力于为WEB应用提供简单、直观、可交互的体验级图表组件。

 

觉得干货香甜的小伙伴，不妨关注下我的博客哇~有需要前端学习视频教程的小伙伴欢迎评论区给我留言哈~