[TOC]
说明
- 从JS逆向的角度去介绍DevTools常用的功能
- 不会事无巨细的介绍所有功能、和举例子
- 按照功能面板去讲解
- 推荐阅读时间：10分钟
- 看完后能花5分钟对功能按照使用场景归纳，学习效率更高
- 并非专业人士，请多指教
常见的逆向需求
- 破解接口，还原请求
- 先定位到具体的接口
- 再找到发送请求的地方
- 查看参数加密方式
- 还原参数，模拟请求
- 点击某元素后都做了什么
- 找到绑定事件的函数
- 查看其逻辑
Chrome DevTools
使用说明
-
command+shift+p然后输入面板，可以快速显示 - 很多面板都是相互配合使用的，但基本思路就是：断点功能+调用栈+查看源码
- 查找逻辑实现部分，一般分为两种：
- 从页面元素入手，根据事件找到逻辑
- 从请求入手，找到发送请求的逻辑，然后看调用栈
Elements
实时显示页面的HTML与CSS
简单的静态分析：Event Listeners
- 适用：简单web框架、原生JS的事件绑定
- 目的：点击某元素后查看其执行的逻辑
- 使用：选中某元素后，点击
Event Listeners，能查看其绑定的所有Event，常用的click、scroll等 - 说明：如果元素click嵌套多层，可以点击Remove移除监听，减少干扰项。最后点击右侧
VM xxx:xxx这种字 定位到相应代码块
Dom动态分析：DOM Breakpoints
适用：所有场景
目的：监听元素的移出、元素属性的改变、子元素的改变
-
使用：选中某元素后
- 右键或者点击元素最左侧三个···
- 选中Break on
- 选择相应的断点
-
说明：
- Subtree modifications，子节点改变触发
- Attributes modifications，属性改变触发
- Node Removal，元素移除触发
Console
控制台、运行时环境，可以打印当前运行时的变量。
常用小技巧
保留历史记录
功能：防止页面刷新、跳转导致的缺失log
使用：勾选Preserve log
4、$_
功能：可以快速获取Dom、上次结果的引用
[图片上传失败...(image-ab78a0-1598115481920)]
$0是当前选中的Elements 里 html 节点的引用。
$1是上次Elements选择的Dom
$4是上上上上次Elements选择的Dom
$_是对上次执行结果的引用
store as global variable
功能：将目标数据快速存储到变量中，不用手动赋值
使用：在数据上方右键，选择store as global variable，会将结果赋值到 tmpx中，x从1开始累加：temp1、temp2、temp3……
copy
功能：快速将变量的值，完整的复制到剪切板，转为Json格式的数据
说明：个别网站会重写copy函数，导致此功能无法使用。
console.trace()
功能：打印当前调用堆栈，可以配合断点使用
说明：功能比较鸡肋，后面会有替代方法
变量监控 Create live expression
功能：监控目标变量
使用：点击眼睛按钮，输入变量名称，点击空白处
结合Console Importer插件
插件地址
功能：快速导入想要的模块，如Jquery
使用：输入$i("模块名称/模块@版本/模块地址")导入相应模块
Network
显示当前页面Http、WebSocket请求记录
常用功能
搜索
使用：command+f 或 点击放大镜，搜索接口关键词（Header、Body的内容都能搜到）。可以配合正则使用
注意：这个搜索只能搜索网络部分的数据，也就是说通过网络请求得到的原始值(有些数据是加密传输，Dom渲染的是加密后的 值)都可以搜到。
筛选
使用：常用筛选，如图
说明：
- 左侧Filter里可以过滤domain、method、url、cookie
-
多选过滤条件：按住command，再点击其他的选项。
image.png
模拟弱网
使用：点击Disable cache右侧的下拉列表即可
Request Blocking
功能：拦截目标请求，如果是一次性接口，则拿到参数模拟执行。
使用：
- 选择目标请求，右键，选择Block Request URL
- 在Request Blocking面板 勾选目标接口的复选框
- 重新触发目标请求，会发现请求失败(已经成功拦截)
说明：也可以在Request Blocking里直接添加请求，效果一样
快速查看调用栈
功能：已知目标请求，找发送请求的代码
使用：点击Initiator，显示调用栈，如图
Source
Page
当前页面用到的所有资源，包括Dom、CSS、Js、多媒体文件等，默认根据domain进行分类。
注意：这里是渲染前的数据，也就是服务器直接返回的数据。
Overrides
功能：替换指定文件，Js、Dom、图片等文件都可以
一般用于修改网站Js文件，比如删除debug检测、分析参数算法等
使用：
- Enable local Overrides
- 在page页面选择要替换的文件，右键，选择Save for Overrides
- 在Overrides找到要修改的文件，修改
- 刷新页面 或 重新触发目标
Snippets
功能：很方便的执行代码片段，可以配合$i("模块")使用，可以保存一些常用的代码片段。
Watch
功能：监控运行时参数的值，一般用于debug时候使用
使用：点击+ 添加监控的变量即可
Call Stack
功能：显示当前行的调用栈，只在debug的时候有效，通常用于定位Js执行逻辑
Scope
功能：显示运行时所有的变量，可以修改，只在debug的时候有效
Breakpoints
功能：Js的断点
所有的Js断点都会显示在这里，可以控制断点的开关、删除等
XHR/fetch Breakpoints
功能：XHR/fetch网络请求的断点，其他类型无效
使用：点击+添加目标请求，可以填URL里的部分参数，会自动匹配
Event Listener Breakpoints
功能：全局事件的断点
不推荐使用，因为会监听全局的事件，嵌套比较繁琐，不好追踪，耗时耗力。
但如果所有办法都试过了还没有找到想要的，可以尝试
Search
功能：能够搜索page里的非二进制资源，如Dom、JS、css、link
Performance
本是检测性能的工具，但也可以用来查看event
使用：
- 点击录制按钮
- 去触发相应条件，操作时间越短干扰越少
- 点击stop
- 点击Event Log
-
筛选、查看相应的事件
image.png
image.png
快速修改Cookie
Application面板里的Cookies