1、打开Chorme开发者工具
- 在 Chrome 菜单中选择更多工具 > 开发者工具
- 在页面元素上右键点击,选择 "检查"
- 使用快捷键F12、 Ctrl+Shift+I(Windows)或 option+command+i、option+command+j(Mac)
2、查看元素伪类 css 样式
例如我想查看元素触发 hover
时的 css 样式。先选中该元素,然后按下图操作
![](https://file.jishuzhan.net/article/1714919269298343937/8bf3e735bdb32e74b8a45ec4b07f2d72.webp)
3、临时增删元素 class
![](https://file.jishuzhan.net/article/1714919269298343937/ae96c98c7e37bd4a0ce630084a90d6eb.webp)
4、查看 placeholder 样式?
![](https://file.jishuzhan.net/article/1714919269298343937/f09baa24c096c1b8e0566c37b5194db1.webp)
![](https://file.jishuzhan.net/article/1714919269298343937/73cefefb8a31c880d616911a8a0570fe.webp)
![](https://file.jishuzhan.net/article/1714919269298343937/704a31bd15ea5ebb6cf1f74ab657bd56.webp)
5、查看元素绑定事件?
鼠标移到
handler
上,可查看具体的函数代码。
6、全局搜索代码
打开开发者工具,点击 Console
标签,按 ESC 弹出,点击左边竖形排列的三个小点,选择 Search
:
![](https://file.jishuzhan.net/article/1714919269298343937/e8e896ec998089c12c7cecf6cb45cf2c.webp)