Chrome 开发工具：使用控制台选项卡中的 Javascript 检查网络选项卡答案

【问题标题】：Chrome dev tools: inspect network tab using Javascript from console tabChrome 开发工具：使用控制台选项卡中的 Javascript 检查网络选项卡
【发布时间】：2018-04-29 19:16:55
【问题描述】：

有时，我网站的用户报告广告存在问题，但屏幕截图不足以识别广告提供商，并且对于非技术用户来说，使用 Chrome 开发工具的“元素”选项卡挖掘 DOM 树非常困难，而且 DOM 元素可能因广告提供商而异。

我可以要求每个用户打开 Chrome 开发工具并在控制台中执行 javascript 代码。这段 javascript 必须从 Network 选项卡中提取内容（我需要对特定 HTTP 请求的 HTTP 响应）。

纯 javascript 和 chrome API（无需开发 Chrome 扩展程序）可以实现吗？

【问题讨论】：

不——你不能那样做。但是，如果您需要来自特定请求的响应，那么您可以为他们提供代码来触发该请求并输出您喜欢的有关响应的任何内容。
另一种可能是您在所有脚本中包含调试信息，但将其禁用。要求用户启用它很容易。我永远不会发布我的博客文章作为答案，但很高兴在评论中这样做......johncmolyneux.blogspot.co.uk/2014/07/…
谢谢。但它不适合我的用例。该脚本不是我的，它是第三方的（Google DFP 广告服务器），如果我重新发出请求，响应可能会不一样。

标签： javascript google-chrome google-chrome-devtools

【解决方案1】：

如果 Chrome 开发工具尚未打开，则无法从一开始就复制广告素材的完整网络活动，因为它只会在打开时开始记录网络活动。

在启用 Chrome 开发工具的同时要求他们重新加载页面是没有意义的，因为重新加载时广告很可能会发生变化。

虽然取决于您使用的广告代码，但请检查 JS 代码，该代码将返回广告创意 ID 和与广告相关的其他详细信息，以帮助您稍后对广告采取适当的措施。

【讨论】：