Chrome Network Inspector：是否可以找到对特定 DOM 元素的调用？

Question

我有一个表格，里面填满了从 API 调用接收到的数据。是否有可能以某种方式将 Chrome 的网络检查器“锁定”在此元素（= 表）上，并使其仅显示与其相关的调用，而不是页面其余部分进行的每个调用？也许这可以通过扩展来实现？

Answer 1

我会说这是不可能实现的，因为：

1. 在（现代）前端应用程序中，视图和逻辑也是分开的。因此，应用程序可以在启动时从服务器请求 JSON 文件，然后将这些信息传递给整个应用程序（表格等）
2. 表本身并没有调用端点，而是可以由带有预填充数据的函数生成。

你能得到的最接近的是：

• 在 Chrome 中记录屏幕截图以查看表格何时填满。您可以在此查看在此期间拨打了哪些电话：

• 之后您知道呼叫的“名称”是什么，您可以将其放在过滤器/搜索字段中并重新加载页面。之后，您总是会看到您选择的电话，并且可能会负责填写表格。

---

当然，你也可以亲手说：

1. 桌子里面有什么？它显示哪些信息？
2. 然后通过 api 调用并在响应正文中查找信息
3. 确定调用后，在 chrome 开发工具中对其进行过滤。

如果你想更上一层楼：

• 将调用复制为 cUrl（通过右键单击调用）并将其插入 Postman 并安装 Postman Inceptor。之后，您可以将网站调用（用于您餐桌的调用）传递给 Postman，以便您仔细查看它，并在每次需要特定调用时重新调用它。

总结一下： 找出哪个调用包含您的表的信息，使用 Postman Inceptor 提取调用并将其传递给 Postman。然后，您可以对其进行分析或做任何您想做的事情。