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
:
