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

相关推荐
Southern Wind9 分钟前
Vue 3 多实例 + 缓存复用:理念及实践
前端·javascript·vue.js·缓存·html
HuangYongbiao30 分钟前
Rspack 原理:webpack,我为什么不要你
前端
yinuo34 分钟前
前端项目开发阶段崩溃?试试这招“Node 内存扩容术”,立马复活!
前端
前端鳄鱼崽36 分钟前
【react-native-inspector】全网唯一开源 react-native 点击组件跳转到编辑器
前端·react native·react.js
用户984022766791836 分钟前
【React.js】渐变环形进度条
前端·react.js·svg
90后的晨仔37 分钟前
Webpack完全指南:从零到一彻底掌握前端构建工具
前端·vue.js
Holin_浩霖38 分钟前
JavaScript 语言革命:ES6+ 现代编程范式深度解析与工程实践
前端
前端拿破轮43 分钟前
从0到1搭一个monorepo项目(一)
前端·javascript·git
m0_741412241 小时前
大文件上传与文件下载
前端
wu_jing_sheng01 小时前
Python中使用HTTP 206状态码实现大文件下载的完整指南
开发语言·前端·python