Chrome调试工具-基础篇

1、打开Chorme开发者工具

  • 在 Chrome 菜单中选择更多工具 > 开发者工具
  • 在页面元素上右键点击,选择 "检查"
  • 使用快捷键F12、 Ctrl+Shift+I(Windows)或 option+command+i、option+command+j(Mac)

2、查看元素伪类 css 样式

例如我想查看元素触发 hover 时的 css 样式。先选中该元素,然后按下图操作

3、临时增删元素 class

4、查看 placeholder 样式?

5、查看元素绑定事件?

鼠标移到 handler 上,可查看具体的函数代码。

6、全局搜索代码

打开开发者工具,点击 Console 标签,按 ESC 弹出,点击左边竖形排列的三个小点,选择 Search

相关推荐
肥肥呀呀呀1 小时前
在Flutter上如何实现按钮的拖拽效果
前端·javascript·flutter
Zero1017131 小时前
【React的useMemo钩子详解】
前端·react.js·前端框架
养军博客1 小时前
spring boot3.0自定义校验注解:文章状态校验示例
java·前端·spring boot
uperficialyu1 小时前
2025年01月10日浙江鑫越系统科技前端面试
前端·科技·面试
付朝鲜2 小时前
用自写的jQuery库+Ajax实现了省市联动
java·前端·javascript·ajax·jquery
coderYYY2 小时前
多个el-form-item两列布局排齐且el-select/el-input组件宽度撑满
前端·javascript·vue.js·elementui·前端框架
荔枝吖2 小时前
项目中会出现的css样式
前端·css·html
Dontla2 小时前
何时需要import css文件?怎么知道需要导入哪些css文件?为什么webpack不提示CSS导入?(导入css导入规则、css导入规范)
前端·css·webpack
小堃学编程3 小时前
前端学习(2)—— CSS详解与使用
前端·css·学习
蓝婷儿3 小时前
第一章:HTML基石·现实的骨架
前端·html