zl程序教程

您现在的位置是:首页 >  工具

当前栏目

前端Chrome调试小技巧汇总

Chrome调试前端 技巧 汇总
2023-09-27 14:19:36 时间

如何保持元素的 hover 等状态(保持鼠标放上去的效果)

前端Chrome调试小技巧汇总

 

Ctrl+F 搜文字定位dom节点

前端Chrome调试小技巧汇总

 

复制日志对象

   先右键保存全局对象
console输入
copy(temp1)
前端Chrome调试小技巧汇总

 

不同网速测试

前端Chrome调试小技巧汇总

 

定位,通过键盘上下可以修改大小 按住Ctrl,以10为单位修改大小

前端Chrome调试小技巧汇总

 

样式级别(由上到下)

前端Chrome调试小技巧汇总

 

 

样式最终计算值(查看元素最终的样式)

前端Chrome调试小技巧汇总

 

不要只会console.log

console.log      正常输出
console.error 错误输出
console.warn 警告
console.table 更方便查看
console.table 更方便查看
占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o)

如何查看被压缩的 JS/CSS 源码,点击格式化

前端Chrome调试小技巧汇总

 

network 只看http请求

前端Chrome调试小技巧汇总

 

分析JS性能

前端Chrome调试小技巧汇总