google-chrome - 从 Chrome 开发者工具复制 websocket 有效负载信息

Question

在 Chrome 开发者工具中检查 Web 套接字时，如何复制整个“框架”选项卡？每当按下 Ctrl A，然后按下 Ctrl C 时，它只会复制屏幕上当前可见的内容，而不是选项卡中的所有内容。

Answer 1

我也可以重现这个恼人的问题。我将考虑在 DevTools 的 future 版本中修复此问题。与此同时，我想出了一种从 DevTools 中获取数据的方法。

1. 在非停靠模式下打开 DevTools 并导航到“框架”面板。

2. 使用 Cmd+Opt+I (Mac) 或 Ctrl+ 打开 DevTools 检查器Shift+I (Windows)

检查“框架”面板，选择 table 元素，然后右键单击并选择“复制”>“复制outerHTML”

粘贴到文本编辑器中并将其另存为 HTML 页面。

在浏览器中打开它以查看该表，您可以不受限制地复制该表。

更新:

在步骤 3 中复制 HTML 内容之前，您需要在 DevTools 检查器的控制台(不是第一页)中运行以下代码。原因是表中的行仅在视口(viewport)中可见时才会根据大小和滚动位置进行渲染。这解释了很多。下面的代码将重写 __calculateVisibleNodes 函数以返回未过滤的节点列表，而不是一次将其减少到 11 个项目。

WebInspector.ViewportDataGrid.prototype._calculateVisibleNodes = function() {
   return { visibleNodes: this._flatNodesList()};
}

注意:您稍后需要重新打开 DevTools，因为此更改会干扰其他功能。