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

相关推荐
I_Am_Me_几秒前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~7 分钟前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ11 分钟前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z16 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁39 分钟前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜40 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40441 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish41 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
zwjapple41 分钟前
typescript里面正则的使用
开发语言·javascript·正则表达式
小五Five43 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript