作者：虚坏叔叔
Js逆向教程-01浏览器调试工具-可视化的Elements
一、启动浏览器调试工具
以百度为例子，通过键盘上的F12按键打开`Elements
二、html源代码区域`
在这个页签下，可以非常清楚的看到一个html元素所在的代码位置。
下图展示了定位元素的过程：
可以看到，定位到的元素的各个属性都展现出来了，右键点击这个元素，可以看到如下菜单：
菜单中几个比较重要的点
Copy
Copy有多种方式，这里可以通过Copy xpath语法选择器获取元素：
//*[@id="su"]也可以通过 Copy Js Path定位获取
document.querySelector("#su")Force State
用于设置某个元素的状态。
按钮有激活、鼠标移入，焦点、被访问等状态，Force state用于改变元素的状态。
Break on
断点设置，它的作用是给页面添加断点。后面的课程会介绍所有的断点类型以及对应的类型的用处。
三、元素css样式区域
这里只是设置元素的样式。
四、事件监听区域
4.1什么是事件？
页面中有很多事件，比如说鼠标按下，滚动条滑动。
4.2 常用的事件
将当前页面的所有事件通过树控件展现出来：
blur是滚动条事件，它是在这个js文件的第137行实现的。
Click是按钮点击事件，也可以通过这个找到对应的源码位置：
4.3 筛选事件
通过取消勾选Ancestors，可以筛选控件。
在左侧的源代码区域，通过选择不同的元素，可以在事件监听区域看到这个元素的对应事件。
五、Dom断点区域
只有在给元素添加Dom断点后，才能在Dom断点区域看到这个断点
总结
最后的最后
由本人水平所限，难免有错误以及不足之处， 屏幕前的靓仔靓女们 如有发现，恳请指出！
最后，谢谢你看到这里，谢谢你认真对待我的努力，希望这篇博客对你有所帮助！
你轻轻地点了个赞，那将在我的心里世界增添一颗明亮而耀眼的星！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
