Chrome Dev Tools如何查看按钮点击后到发起请求前的函数调用情况

断点选型说明 #

两种断点的适用场景不同，可搭配使用：

• XHR/fetch断点：优先选择，能直接定位到请求发起前的最后一步代码，省去从点击回调开始逐行调试的成本，适合快速找请求参数、请求头的生成逻辑
• 鼠标点击断点：适合需要追溯从点击事件触发到请求发出的全链路调用流程的场景

具体操作流程 #

第一步：用XHR/fetch断点定位请求调用位置 #

1. 打开浏览器DevTools（按F12/Ctrl+Shift+I/Cmd+Opt+I），切换到「源代码」面板
2. 找到「XHR/提取断点」分类，点击「+」添加断点规则，可输入目标请求URL的关键词缩小匹配范围，也可以直接输入空值匹配所有请求
3. 点击页面按钮触发操作，请求发送前DevTools会自动暂停在发起网络调用的代码行
4. 右侧「调用栈」面板展示的就是从当前网络调用点向上追溯的完整函数调用顺序，点击任意栈帧即可跳转至对应函数的代码位置

第二步：追溯请求头、请求参数的生成逻辑 #

1. 停在XHR断点位置时，右侧「作用域」面板可以查看当前函数内的所有局部变量、全局变量，找到存储request headers和请求参数的变量
2. 右键目标变量选择「添加到监视」，可以固定查看该变量的值
3. 沿着调用栈从上到下逐个点击栈帧（上层是当前执行的函数，下层是更早调用的外层函数），查看每个函数内对目标变量的赋值、修改、拼接操作，即可梳理出完整的变量生成逻辑

第三步：（可选）用点击断点追溯全链路调用 #

如果需要查看从点击事件触发到请求发起的完整流程：

1. 在「源代码」面板找到「事件监听器断点」分类，展开「鼠标」，勾选click选项
2. 点击页面按钮，DevTools会先暂停在点击事件的回调函数入口
3. 按F10逐行执行代码，F11进入调用的子函数，Shift+F11跳出当前函数，一步步执行到请求发起位置即可看到全链路的调用逻辑和变量变化

调试小技巧 #

• 遇到压缩混淆的代码，点击代码编辑器左下角的{}（美化代码）按钮，格式化后更易阅读
• 如果调用栈里出现大量第三方库的代码，可以右键第三方库的文件选择「添加到忽略列表」，调用栈就会自动隐藏无关的库代码，只展示业务代码的调用顺序

内容的提问来源于stack exchange，提问作者musava_ribica