JS断点调试

Chrome的source调试

在Source选项中新建了一个Script snippet的JS文件

我们输入以下代码：

function xx()
{
    console.log(1);
}
function zhiyuan()
{
    xx()
}
zhiyuan()

在console中调试如下：
xx.call和xx.caller,
分别得到自身函数和上一级调用的函数（读上一层的栈）

例：
url = https://sc.xinshangmeng.com/xsm2/?Version=2020022100

dom事件监听：

Call Stack ：方法调用栈

先进后出: i→dispatch→e

调用过程：

1.function e(){}
2.function dispatch(){
		e();
	}
3.function i(){
		dispatch();
	}
4.function xxxx(){
		i();
	}

Scope:变量跟踪

简单跟值

1.JS的运行顺序不一定是JS文件的编写顺序
开始的位置—：—解析

//自执行方法
 !function a(){}()

//变量的定义 var xx
//赋值语句  a = 1
//方法的调用

练习：假设方法a

function x(){
    var a = 1;
    console.log("x");
}
!function(){
    console.log("!");
}()
x(console.log("1"));

运行顺序结果如下：

案例一、密码加密（全局搜索方法）

url = “https://sk.open.com.cn/stuspace-auth/#/login”

step1:分析目的

password: FB1C975E4C5BD3D3858C10CBA6638B282126DC92
判断MD5:长度为16或32位
sha1:长度40位

step2:全局搜索关键词password

经验筛选：Axios、vue、 react、 jquery等文件先不看，一般改动较少

password可能出现的方式：

step3:打断点

下图要调试函数，这三个点都可以打断点，推荐第一个

stringify()方法，对象==>json
（左括弧前面一定是一个方法
（）两个括号之间的是参数

找到d.a方法，点进去：

分步调试即可找到加密方法

案例二、dom事件断点-寻找相应的JS文件

案例三、XHR断点

优点：定位的位置在发包函数，我们可以跟栈
缺点：只能用于XHR的数据包

JS发包，HTML表单发包
1)xhr breakpoints 进行过滤，也是支持正则的

2)通过network面板进入抓包函数