从chrome开发人员工具复制websocket有效内容信息

Question

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

Answer 1

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

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

2. 使用 Cmd + 选项 + I （Mac）或 Ctrl +打开DevTools检查器 Shift + I （Windows）





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



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

2. 在浏览器中打开它以查看表格，您可以无限制地复制该表格。



更新

在步骤3中复制HTML的内容之前，需要在DevTools检查器的控制台（而不是第一页）中运行以下代码。原因是表中的行仅在视图端口中可见时才会呈现，具体取决于大小和滚动位置。这解释了很多。下面的代码将覆盖__calculateVisibleNodes函数以返回未过滤的节点列表，而不是一次将其减少到11个项目。

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

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