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:

相关推荐
hkNaruto几秒前
【AI】基于大模型的AI游戏地图生成、控制方案:AI Native Game Harness 迁移操作手册
前端·人工智能·游戏
IT_陈寒10 分钟前
Java序列化踩坑记:对象循环引用让我加班两小时
前端·人工智能·后端
Acro25 分钟前
快给macOS 上的Grok Bot换一套皮肤
前端
flash俊杰28 分钟前
双引擎 OCR 编排:逐页判定、视觉优先、partial 语义与三层超时
前端
计算机魔术师28 分钟前
Reddit 每周被 Google 偷走 100 万次点击,CEO 摊牌了
前端
前端繁华如梦29 分钟前
用 React Three Fiber 做一栋能编辑的教学楼数字孪生
前端
前端繁华如梦34 分钟前
用 React Three Fiber 做一套智慧医院数字孪生:编辑器、大屏和 BIM 浏览器
前端
俊昭喜喜里2 小时前
理解全局跨域CORS配置
前端
香芋芋圆2 小时前
iD-editor 详解|OSM官方在线编辑器,基于D3.js的轻量地图编辑器
开发语言·javascript·编辑器
晗夜未央4 小时前
任务队列反复失败,先分清重试、阻塞和结果待核对
开发语言·javascript