Chrome开发者工具——Elements

Elements——元素面板

1、定位元素：鼠标点击箭头后，将鼠标放置到想查看具体样式的元素上

如果在测试的时候，发现页面上的样式和UI对不上，可以看一下该元素的具体样式，如果发现该有的元素丢失了，可以查看一下是没有显示还是因为其他元素给遮挡了，等等前端样式的问题可以稍微简单定位一下

2、实时编辑DOM元素：双击选定元素，进行更改

3、实时编辑样式：styles窗格中实时编辑样式属性名称和值，灰色部分不能更改，点击需要编辑的名称或值，enter保存

4、查看元素绑定的事件

如果在测试的时候发现某个元素该有的功能没有，可以看下元素是否有相关事件，比如点击

5、屏蔽讨厌的DOM元素显示：选择元素，右键Hide element，然后就看不到这个元素了

6、Copy XPath ：选择元素，右键Copy - Copy XPath
“//*[@id="flexible-left"]/div[1]/div[1]/div/span[1]”

备注：
1、修改刷新浏览器后以上所有的修改就恢复原样，如果想要本地永久更改，需要保存样式并存到本地并重新映射到浏览器中展示，这里不介绍
2、其他功能，比如断点等，测试会用到的比较少，这里也不做介绍

快捷链接：
Chrome开发者工具——Console
Chrome开发者工具——Network

参考资料：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn