首页 > 其他 > 详细

# 前端调试工具(DevTools)

时间:2020-11-08 22:19:59      阅读:28      评论:0      收藏:0      [点我收藏+]

前端调试工具(DevTools)

开启:F12

布局

技术分享图片

切换PC和移动端

技术分享图片

页面元素的快速测试技巧

技术分享图片

保持元素的hover等状态:选中当前行点击右键

技术分享图片

元素状态改变的监控技巧

技术分享图片

触发断点后元素状态不会再改变,可以在sources里关掉断点,也可以重新右键点击删除断点

样式快速定位、修改

定位:

  1. 选中相关地方点击右键检查,则会自动跳转到选中元素的样式页面
  2. 打开检查工点击图片中的箭头,然后去页面中将鼠标悬浮在修改的地方(常用
技术分享图片

鼠标点击后定位结束

修改:
技术分享图片

  • 画横线表示样式被覆盖
  • 在检查工具中做的修改不会更新到本地代码,刷新后恢复原状

# 前端调试工具(DevTools)

原文:https://www.cnblogs.com/birdyBlob/p/13945110.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!