功能介绍
打开devtools可以右击网站页面点击审查元素/检查,或者windows下按F12,Mac下由于只有chrome浏览器,按cmd+opt+i,将会在你的屏幕右边或下方打开devtools。
可以看到类似如图的选项,大多数情况下,依次会显示以下一些选项卡
Elements:元素
Console:控制台
Sources:资源管理
Network:网络
Performance:性能分析
Memory:内存监控
Application:应用管理
Secriuty:安全
Audits:审计
其中可能Elements、Console、Sources、Network、Memory以及Application对于我们来说最为常用。
首先简单给各位讲一下我们最常用的这几个功能
Elements的主要作用:网页结构分析、生成各种dom匹配表达式、dom属性查看、修改dom属性以观察一些事件的触发、Dom断点设置、事件挂载检测
Console的主要作用:执行js代码以方便查看变量值、hook函数、触发函数、修改当前变量、控制dom、控制js运行
Sources的主要作用:查看web使用的资源文件,VM内容显示、各种花里胡哨的断点、各种花里胡哨的监听器、webworkers查看、调用栈跟踪、单步/断点调试、变量监控、作用域监控、
Network的主要作用:监控数据请求、查看网络请求的详细内容(general、request/response header、param、body以及response body)、解析返回数据并格式化text/json提供preview、查看请求来源js调用链
Memory的主要作用:通过分析内存得知js的调用顺序
花里胡哨的断点与监听器
devtools中断点主要分为DOM断点、行断点、行内断点、xhr断点、事件监听断点
监听器其实也是断点的一种,主要为全局监听器,也可以理解为全局断点,只不过无需在具体的地方提前设下断点。
DOM断点主要是在Elements里去设置断点,右击需要下断点的元素,然后选择break on会给出三种状态,如下图。
其中subtree modifications是在添加,改变,删除子元素时触发,attribute modifica是当元素属性改变时触发,node removal是当元素被移除的时候触发。
行断点就比较简单了,是在Sources选项卡,打开某一个js文件,如果js代码被压缩到了一行,可以点击代码页下方中如下面图中红圈标的按钮进行格式化。
然后点击左侧的行数字,使之变成蓝色,即代表断点设置完成。
在这里有个实用的小技巧,在数字标没有变成蓝色的情况下通过右击这个数字可以,叫做条件断点,是橙色的,如下图:
可以在这个输入框中输入一定的条件,比如说flag==true,则只有在flag的值为true的时候才会使断点触发生效,最常用的场景莫过于很多同学遇到的防debugger防御的网站,一打开devtools就不断的进入debugger,根本无法跳出循环,这个时候,我们只需要在这个debugger处,打上条件断点,并直接在输入框输入false,那么就能很轻易的跳出这个死循环中啦。
行内断点是对付逗号表达式或者是一行内执行了多个函数以及if单行写法的有效法宝,比如说:
var a = flag ? funa() : funb()
此时如果想仅仅想断住funb函数,仅需点击一下funb前面的小箭头,如下图
XHR断点对于大多数初学者来说,可能不知道什么是xhr,但一般都听说过ajax,对的,就是指的在发送ajax(xhr)请求的时候进行阻断的断点,这个是全局断点,可以不提前指定要断哪一个xhr请求,也可以提前指定url,所有的或被选定的xhr请求会在发送之前被阻断。 设置方式为打开sources选项卡,一般在右侧如图画红线的地方。
在红线画的当前行右侧有一个+号,点击会弹出一个输入框
这里如果你输入一个包含关键字如search的时候,所有链接带search的xhr/fetch请求都会在发送之前被阻断,如果什么都不填直接回车确认的话,就会是any xhr or fetch代表任何xhr/fetch请求都会被提前阻断。
事件监听断点和监听器这两个其实可以放在一起讲,其实都是sources右侧的选项,如图所示。
其中,上半部分Global Listeners是全局监听器,主要是用来观测一些系统自带或者是js程序中挂载的事件监听器,可能当你实在找不出js在哪执行的时候,多看看这里可能会有意外收获哦。
下半部分的事件监听器是浏览器中常用的一些组件或功能的监听,需要哪个就勾选哪个,根据字面意思理解即可知道对应选项是干啥用的,比如说Script,就是当执行script脚本时触发的,这里就可以诞生很多骚操作,简单举个例子,有的代码,在网页一打开的时候就执行了,而且还是动态的加密,每一次打开网站时对应功能的函数的函数名及变量甚至js放的位置都不同的情况下,按照超常规方案,等加载完页面再打断点刷新的操作可能就不是很奏效了,那不妨试试提前打上Script断点,这样浏览器会在刚执行js的时候进入断点,你要做的就是找到你想下断点的函数了,然后取消Script断点,继续Resume下一步就可以进入你要阻断的函数啦!
哎呀,不知不觉又写了这么多啦,总之,打断点是前端逆向的基本功,会不会打断点,断点打的合不合适,断点之间怎么互相配合,都会对工作效率产生了很大的影响,我们会在以后的实战中给大家分享更多的打断点小技巧~
感谢各位朋友的阅读,感谢哟~
扫码或者搜索公众号“逆向菜鸟”关注我哟~