我们的目标就是,用网站的js代码,在本地也能进行加密解密,得到和浏览器一样的数据。
在进行断点的学习之前有必要知道一下,网站的代码的运行时间轴:
加载html——加载js——运行js初始化——用户触发了某个事件——调用了某段js——加密函数——给服务器发送信息(先创建XHR对象,再将XHR发send至服务器)——接收到服务器返回的数据——解密函数——刷新网页渲染
从时间轴中我们看到了,我们需要通过断点去获得与服务器交互的数据
断点:
1.DOM断点
这类断点往往都是只有网页的某些内容的样式、形状等等发生变化(在渲染的时候)时才可以进行断点给它断住。
在这里我把鼠标放在 百度一下 上面,就发生了渲染,右键这个元素设置断点(第二个属性断点),然后将光标移动到 百度一下。
发现在断点这里停止了。这就是DOM断点。
DOM断点:
这类断点往往都是只有网页的某些内容的样式、形状等等发生变化(在渲染的时候)时才可以进行断点给它断住。
特性:
定位的比较准确
在时间轴中执行的比较考前,距离加密函数比较远,无法通过栈快速定位去查找
2.DOM事件断点
与DOM断点并不一样,有的DOM断点不行就可以使用DOM事件断点。
在点一下 百度一下,发现停在断点处
这就是DOM事件断点。
DOM事件断点:
与DOM断点并不一样,有的DOM断点不行就可以使用DOM事件断点。
特点:
同DOM断点
3.xhr断点
xhr:xml http request
xhr断点就是网站在给服务器发送xhr信息的时候,断下来。
特点:
代码执行比较靠后,距离加密函数相比较近,可以根据栈快速定位。(如果服务器交互数据不是xhr发送就无法断下)
4.代码断点
在html中给代码设置断点
5.代码行断点
在某一行插入一个语句:debugger;
就可以在运行的时候进行断点。
6.全局事件断点
7.异常捕获: