vue3.0 devtools无法使用_前端逆向工具篇devtools（一）

各位新老朋友们，工欲善其事必先利其器想必大家都耳熟能详，能够熟练使用最好的工具定能事半功倍。从今天起，我会给大家带来可能有很多篇的工具篇，带来众多的骚操作，让你成为人群中最靓的仔！众所周知，目前最厉害的前端加密防御可能就是谷歌的recaptcha，所谓矛盾，就是要用最锋利的矛去攻最坚硬的盾，谷歌左手持盾右手持矛，一手recaptcha，一手devtools。本来devtools是为了给 web开发人员深入地访问浏览器内部和web应用的机会，结果一不小心荣获前端逆向最强的杀器。本篇文章将为大家带来全面的devtools的使用指南以及一些你可能不知道的骚操作，这里大家推荐安装下载chrome浏览器或者360极速浏览器，虽然差别不大，但由于使用习惯我个人偏爱360极速浏览器一些，如果你是在360极速浏览器下使用devtools，请确保自己当前处于极速模式下，地址栏最后是如下图所示的闪电标志。

功能介绍

打开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下一步就可以进入你要阻断的函数啦！

哎呀，不知不觉又写了这么多啦，总之，打断点是前端逆向的基本功，会不会打断点，断点打的合不合适，断点之间怎么互相配合，都会对工作效率产生了很大的影响，我们会在以后的实战中给大家分享更多的打断点小技巧~

感谢各位朋友的阅读，感谢哟~

扫码或者搜索公众号“逆向菜鸟”关注我哟~