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

相关推荐
xianxin_3 分钟前
CSS Outline(轮廓)
前端
moyu843 分钟前
遮罩层设计与实现指南
前端
Sammyyyyy9 分钟前
2025年,Javascript后端应该用 Bun、Node.js 还是 Deno?
开发语言·javascript·node.js
timeweaver18 分钟前
深度解析 Nginx 前端 location 配置与优先级:你真的用对了吗?
前端·nginx·前端工程化
鲸落落丶19 分钟前
网络通信---Axios
前端
wwy_frontend21 分钟前
React性能优化实战:从卡顿到丝滑的8个技巧
前端·react.js
小高00736 分钟前
面试官:npm run build 到底干了什么?从 package.json 到 dist 的 7 步拆解
前端·javascript·vue.js
天选打工圣体37 分钟前
个人学习笔记总结(四)抽离elpis并发布npm包
前端
wayhome在哪1 小时前
用 fabric.js 搞定电子签名拖拽合成图片
javascript·产品·canvas
JayceM2 小时前
Vue中v-show与v-if的区别
前端·javascript·vue.js