js逆向系列教程-浏览器开发工具使用要点

声明：本文只作学习研究，禁止用于非法用途，否则后果自负，如有侵权，请告知删除，谢谢！

目录

        1、前言

        2、浏览器开发者工具面板的使用

        3、定位数据包

        4、总结

---

1、前言

       之前分享了一篇有关音乐下载的js逆向文章，获得了不小的阅读量，同时也有同志向我询问有关源码。授人以鱼不如授人以渔，正好借此机会出一期js逆向的相关教程，让同志们更快入门js逆向。

预备知识：

        python基本语法（能看懂）和requests库的简单使用（安装好就行）

        Node.Js环境 + js基础语法（能看懂）

2、浏览器开发者工具面板的使用

        2.1 打开开发者工具

        打开方式：F12键、ctrl+shift+I组合键、点击浏览器右上角的三个点->更多工具->开发者工具。介绍这么多种，是有因为有些网址直接按F12无法打开开发者工具，这时可以采用其他方法。

打开开发者工具后，有一些面板需要重点认识一下（下图框选部分）：

Elements面板:是展示html标签的面板，可以用来查看html页面中感兴趣的文本或者图片。

Console面板:可以执行一些js代码，可以查看加密函数的运行结果、注入hook代码等。

Source面板：这是js调试主要在这个面板进行，重点关注一下调试区。Breakpoints可以查看我们下的断点，XHR/fetch Breakpoints可以下xhr断点，Event Listener Breakpoints可以下事件监听断点，如js加载的断点，到时调试瑞数会用到。这个面板相对而言比较复杂，但是用多了就会认识全了。

Network面板：这里记录了操作浏览器时发送的一些数据包。点击放大镜图标可以搜索我们感兴趣的文字，点击Fetch/XHR可以看到发送的xhr请求，动态数据就在这里查看。

Application面板：查看cookies，遇到cookie反爬则用得较多。

3、定位数据包

前面简单认识了开发者工具，下一步就是要在Network面板中找到感兴趣的数据包，以方便开发爬虫程序。

• 最简单的是在Network面板中直接搜索文本内容，如果可以搜到就直接可以定位数据包了。这里搜索“为人父母”，则可以搜到相应的数据包，在左侧面板中点击即可快速定位到目标数据包。

  

• 可以通过数据包的大小来定位，点一下size列，可以按数据包大小进行排列，有时也能快速定位。
• Xhr数据，一般涉及逆向的数据包很大概率是xhr接口，因此可以直接在xhr数据包中快速定位。

4、总结

在这篇文章中，主要是快速定位目标数据包，锁定目标后，再进行下一步分析加密或解密点。到这就告一段落了，学会逆向的秘诀就是自己多实践、多练习。如果觉得不错的话，欢迎点个关注，一起进步~~。有问题欢迎留言