「JS逆向」工具篇——Chrome DevTools

说明

• 从JS逆向的角度去介绍DevTools常用的功能
• 不会事无巨细的介绍所有功能、和举例子
• 按照功能面板去讲解
• 推荐阅读时间：10分钟
• 看完后能花5分钟对功能按照使用场景归纳，学习效率更高
• 并非专业人士，请多指教

常见的逆向需求

1. 破解接口，还原请求
   • 先定位到具体的接口
   • 再找到发送请求的地方
   • 查看参数加密方式
   • 还原参数，模拟请求
2. 点击某元素后都做了什么
   • 找到绑定事件的函数
   • 查看其逻辑

Chrome DevTools

使用说明

1. command+shift+p 然后输入面板，可以快速显示
2. 很多面板都是相互配合使用的，但基本思路就是：断点功能+调用栈+查看源码
3. 查找逻辑实现部分，一般分为两种：
   1. 从页面元素入手，根据事件找到逻辑
   2. 从请求入手，找到发送请求的逻辑，然后看调用栈

Elements

实时显示页面的HTML与CSS

简单的静态分析：Event Listener93-452g](https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNTU0NTk3LTYyNzYxMzJmMTg0ZDRmZmMucG5n?x-oss-process=image/format,png)

• 适用：简单web框架、原生JS的事件绑定
• 目的：点击某元素后查看其执行的逻辑
• 使用：选中某元素后，点击Event Listeners，能查看其绑定的所有Event，常用的click、scroll等
• 说明：如果元素click嵌套多层，可以点击Remove移除监听，减少干扰项。最后点击右侧VM xxx:xxx这种字 定位到相应代码块

Dom动态分析：DOM Breakpoints

• 适用：所有场景

• 目的：监听元素的移出、元素属性的改变、子元素的改变

• 使用：选中某元素后

  1. 右键或者点击元素最左侧三个···
  2. 选中Break on
  3. 选择相应的断点

• 说明：

  1. Subtree modifications，子节点改变触发
  2. Attributes modifications，属性改变触发
  3. Node Removal，元素移除触发

Console

控制台、运行时环境，可以打印当前运行时的变量。

常用小技巧

保留历史记录

功能：防止页面刷新、跳转导致的缺失log
使用：勾选Preserve log