Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 修改一些文本错误 #8

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion 1.Chrome基础/1.1Chrome开发者工具骚操作.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
![元素面板](https://img-blog.csdnimg.cn/2020062200052334.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
在一个元素的右边,我们可以看到一个Event Listeners选项卡,这里边是元素绑定的事件,但是这个事件绑定并非很准确。

如果有读者对网络爬虫感兴趣,你应该知道我们可以在元素面板按下快捷键CTRL+F,之后下方会弹出一个编写框,我们可以在里边编写CSS选择器或者XPATH语法。当然,各位也可以直接选择元素,右键点击Copy,里边可以直接复制Selector或者xpath,只不过实际使用的时候并不一定能定位到元素。比如使用Python编写网络爬虫的时候,其中的bs4或者lxml定位元素的时候,用直接Cpy复制得到的Selector或者xpath往往不尽人意
如果有读者对网络爬虫感兴趣,你应该知道我们可以在元素面板按下快捷键CTRL+F,之后下方会弹出一个编写框,我们可以在里边编写CSS选择器或者XPATH语法。当然,各位也可以直接选择元素,右键点击Copy,里边可以直接复制Selector或者xpath,只不过实际使用的时候并不一定能定位到元素。比如使用Python编写网络爬虫的时候,其中的bs4或者lxml定位元素的时候,用直接Copy复制得到的Selector或者xpath往往不尽人意

元素面板里的节点也是可以下DOM断点的,右键点击元素会看到Break on中包含三种断点,分别是子树修改/属性变化/节点被移除时候触发的断点。我们任意选择一个,会在Sources面板的DOM breakpoints里边多出一个断点记录。

Expand Down
64 changes: 32 additions & 32 deletions 1.Chrome基础/1.2Chrome调试技巧(某易滑块).md
Original file line number Diff line number Diff line change
@@ -1,56 +1,56 @@
@[TOC](Chorme���Լ��ɣ��׶ܻ���켣JS���ԣ�)
@[TOC](Chorme调试技巧(易盾滑块轨迹JS调试))

# Chorme���Լ���
һ����˵�����������Ҫ��JS�������е��ԵĻ���������Network����в�ŷ�ܡ������������ݰ���֮����û��棬Ȼ��ˢ��ҳ�棬�����¼����search��Ѱ��������Ҫ�ļ��ܲ����ȵȡ�����һ�����ݰ�����password���������˼��ܣ���Ϊȫ��ƥ����������ͨ������±Ƚ϶࣬�������ǻ��һЩ�����������ˣ�
# Chorme调试技巧
一般来说,我们如果想要对JS参数进行调试的话,都是在Network面板中操作。首先清理数据包,之后禁用缓存,然后刷新页面,点击登录,在search中寻找我们需要的加密参数等等。比如一个数据包中有password参数经过了加密,因为全局匹配的搜索结果通常情况下比较多,所以我们会加一些符号来过滤:

- password��
- password
- password =

���Ǹ�����ķ����Dz鿴Networkѡ������ݰ���Initiatorһ���еĶ�ջ������Ϣ��
但是更方便的方法是查看Network选项卡中数据包的Initiator一栏中的堆栈调用信息。

![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622093014439.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
## �ϵ�
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622093014439.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
## 断点

����������һ����ջ��Ϣ��ȥ�ǿ�����Sources���֮�е��������¶ϵ㡣Ȼ����ҳ���ϵ������¼��ť���������¼�����������ұߵ�Call Stackȥ�鿴���ǵĹؼ���Ϣ������ʲô�ط���
我们任意点击一个堆栈信息进去们可以在Sources面板之中点击序号栏下断点。然后点击页面上的例如登录按钮让它触发事件,我们配合右边的Call Stack去查看我们的关键信息到底在什么地方。

����Ҳ����ѡ��ȥ��XHR�ϵ㣬��Ϊ����������XHR�������ǾͿ��Ը���һ��XHR����URL����Sources������½�XHR Breakpoints�Ϳ����ڷ�����ҳ���XHR�����ʱ��ϵ㡣
我们也可以选择去下XHR断点,因为许多请求是XHR请求,我们就可以复制一下XHR包的URL,在Sources面板中新建XHR Breakpoints就可以在发起网页这个XHR请求的时候断点。

����Ҳ������Sources����У�ѡ���ұߵ�Event Listener Breakpoints����һ���¼��ϵ㡣�Ƚϳ��õ���Mouse��ߵ�click�ϵ㣬��Ϊ����Ҫץ��������ܲ������ǵ����ť��Żᴥ���ġ�
我们也可以在Sources面板中,选择右边的Event Listener Breakpoints,下一个事件断点。比较常用的是Mouse里边的click断点,因为我们要抓的许多加密参数包是点击按钮后才会触发的。

![���������ͼƬ����](https://img-blog.csdnimg.cn/202006220937140.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/202006220937140.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)

������¼��ϵ�ͨ�������һ��ʼ��HTMLҳ�棬���ǿ���һ��������ȥ�˽��¼����ܡ�
这里的事件断点通常会断在一开始的HTML页面,我们可以一步步深入去了解事件加密。

ͨ��������Sources������¶ϵ㣬ֱ�ӵ����Ӧ����������ɡ���������Ҳ����ѡ�������ϵ�Contional Breakpoint��Ҳ���Ƿ���ij�������ٶϵ㣬�������޲��ϵ㡣
通常我们在Sources面板中下断点,直接点击相应的序号栏即可。不过我们也可以选择条件断点Contional Breakpoint,也就是符合某种条件再断点,区别于无差别断点。

![�����ϵ�](https://img-blog.csdnimg.cn/20200622100035101.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
��������ı���ʽ���Ϊ��ͻ���жϵ㣬����`password=='123'`�������������������123��ʱ��ͻ���жϵ㡣���ͨ��������ѭ�������������ֻ��Ҫ�鿴���һ�ν���������Ϳ��Ա���һ�������Խ���ѭ����
![条件断点](https://img-blog.csdnimg.cn/20200622100035101.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
当你输入的表达式结果为真就会进行断点,比如`password=='123'`,当我们输入的密码是123的时候就会进行断点。这个通常用于有循环的情况,我们只需要查看最后一次结果,这样就可以避免一步步调试进入循环。

���������ϵ����Dz��������������ʽ������ֱ������`console.log(password)`��������Ȼ��������������ǻ���һ����������൱��һ��console��׮������������ҳ��һ��ʼ���صIJ�������Ҳ���Ե�֪�����ұ����˶ϵ㿨�١����ֶϵ�ͨ�����ڻ�����֤�룬����켣��ÿһ��������Dz�����ÿ���ƶ�һ����������һ�Σ�ʹ��console��׮�Ϳ��Եõ�һ����ӡ�����Ч����
而且条件断点我们并不必须输入表达式,可以直接输入`console.log(password)`,这样虽然不会断下来,但是会有一个输出。这相当于一个console暗桩,这样即便是页面一开始加载的参数我们也可以得知,而且避免了断点卡顿。这种断点通常用于滑块验证码,滑块轨迹的每一次输出我们不可能每次移动一次让它卡顿一次,使用console暗桩就可以得到一个打印输出的效果。


## ����
���ǿ�����console�н������²�����������Ԫ�����ѡ��ijһ���Խڵ㣬֮����console������`monitorEvents($0)`���Ϳ����ڿ���̨�����ص��¼���Ϣ�������һ���¼�������������ü��������¼��Ƚ��鷳�����ǿ���дΪ`monitorEvents($0,"click")`��������ֻ�����click�¼���
## 监听
我们可以在console中进行以下操作,首先在元素面板选中某一调试节点,之后在console中输入`monitorEvents($0)`,就可以在控制台输出相关的事件信息,这就是一个事件监听。如果觉得监听所有事件比较麻烦,我们可以写为`monitorEvents($0,"click")`,这样就只会监听click事件。

�����������ڵ��ijһ���������ǿ�������д`monitor($0.onClick)`���������Ǿͻ������ǰ�ڵ�ĵ��������
如果是想监听节点的某一方法,我们可以这样写`monitor($0.onClick)`,这样我们就会监听当前节点的点击方法。

ʹ��`watch`�����Լ�����������Sources�������watch��Ŀ����߿��Լ���������ʱ�仯���������ǿ�������password���ܲ������ڶϵ�������һ�������룬ֱ��password��ֵ�ı䣬���ǾͿ��Զ�λ�������JS���ܵص㡣
使用`watch`还可以监听变量。在Sources面板中有watch栏目,里边可以监听变量何时变化。比如我们可以添加password加密参数,在断点的配合下一步深入,直到password数值改变,我们就可以定位到具体的JS加密地点。

## �׶ܻ���켣����
## 易盾滑块轨迹调试

�������Ȼ������飬��Network���ץ�����õ���ջ���ã������һ���¶ϵ㡣
![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622103405480.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
�鿴��ջ��Ϣ���룬���Ƿ�����p��ߵ�data��data��ֵ��R��������Ҫ�ģ������������¶ϵ㡣![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622103945165.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
�ϵ����к����ǿ��Է���R����ֵ������t.data�����Ǽ����¶ϵ�
我们首先滑动滑块,再Network里边抓包,得到堆栈调用,再最后一步下断点。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622103405480.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
查看堆栈信息步入,我们发现了p里边的data,data赋值的R是我们需要的,我们在这里下断点。![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622103945165.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
断点运行后我们可以发现R的数值来自于t.data,我们继续下断点

![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622104140718.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
���ǵ�֪e��������Ҫ��ֵ�����ǽ�һ������֮���޷���ȡ������������ǰ���¶ϵ㡣
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622104140718.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
我们得知e是我们需要的值,但是进一步跟进之后无法获取到,我们在它前方下断点。

![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622104903100.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
�����ҵ���data���ܵĵط���n��ֵ���Ǿ������ܵġ�n��Ȼʹ����join����һ����һ�����飬�������������ϱߵ�traceData��
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622104903100.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
最终找到了data加密的地方,n的值都是经过加密的。n既然使用了join,那一定是一个数组,所以我们搜索上边的traceData。

![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622105023587.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622105023587.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)

��console�������`monitor(Array.prototype.push)`�����ǾͿ���֪���������ӵĹ켣��Ϣ�ˡ��������������ȱ���Dz��ܶ�λ��ֻ�ܲ鿴�����Ҫ��һ����λ�����ǿ��Բ���`traceData.push`���ҵ����յļ���JS���������������ﲻ�����룬�����Լ�˼�������ҵ������Ҫ�ص���أ���ʹ��`unmonitor(Array.prototype.push)`��
在console里边输入`monitor(Array.prototype.push)`,我们就可以知道数组添加的轨迹信息了。但是这个监听的缺点是不能定位,只能查看。如果要进一步定位,我们可以查找`traceData.push`,找到最终的加密JS函数,笔者在这里不再深入,读者稍加思考即可找到。如果要关掉监控,则使用`unmonitor(Array.prototype.push)`

![���������ͼƬ����](https://img-blog.csdnimg.cn/20200622105341767.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200622105341767.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05vQXR0YWNr,size_16,color_FFFFFF,t_70#pic_center)