推荐几个实用的在线小工具~

本文分享了从图片压缩到性能测试的一系列在线工具,涵盖CSS兼容性查询、代码演示、性能检测等,助你提升开发效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

嘿嘿,今天花点时间在这里记录一下常用的一些在线小工具,或者在线网站,方便以后查找!

1.在线压缩工具
顾名思义,压缩图片常用的
https://tinypng.com/
在这里插入图片描述
2.CSS属性兼容性查询
可以查询CSS属性在各个浏览器的兼容情况
https://caniuse.com/

在这里插入图片描述
3.CSS在线演示
如果想要快速查看一段CSS的演示效果,用在线工具是一个不错的选择
https://dabblet.com/
在这里插入图片描述

4.JS代码片段分析
可以测试一段代码不同写法谁执行速度更快,通过大量执行对比两段代码的运行速率
https://jsbench.me/
在这里插入图片描述
5. 代码执行过程演示
可以看到一段代码执行过程中的调用栈
http://latentflip.com/loupe
在这里插入图片描述

6.网站性能检测工具
输入网站检测网站性能
https://www.webpagetest.org/easy
在这里插入图片描述

7.谷歌开发者工具官方文档(需要VPN才能访问)
谷歌开发者工具文档对chrome浏览器调试工具的介绍和使用方式做了详细的说明,对前端开发者而言有很大的帮助,强烈推荐大家都去仔细阅读!
https://developer.chrome.com/docs/devtools/evaluate-performance/

在这里插入图片描述

8.Web Dev学习模块
这个网站上有很多关于前端性能优化相关知识的文章,免费供大家学习,也包括了谷歌开发者工具的使用,如果没有VPN,无法访问谷歌开发者工具官方文档,上这个网站也是很不错的选择~
https://web.dev/learn/
在这里插入图片描述

持续更新中~

在这里插入图片描述

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值