仅过滤有错误的请求-Google Chrome网络

Question

我该如何仅过滤Google Chrome网络开发工具中有错误的请求？

Answer 1

没有这种功能。
Filter输入不适用于Status列。

您可以通过在过滤器栏中添加一个复选框来增强devtools本身：

1. 打开网络面板
2. 将devtools停靠在单独的窗口中
3. 按热键调用devtools- Ctrl Shift i 或⌘ ⌥ i
4. 在此新的devtools窗口中粘贴以下代码 控制台并运行它

{
  // see the link in the notes below for a full list of request properties
  const CONDITION = r =>
    r.failed ||
    r.statusCode >= 400;
  const label = document.createElement('label');
  const input = label.appendChild(document.createElement('input'));
  input.type = 'checkbox';
  input.onchange = () => {
    const view = UI.panels.network._networkLogView;
    view.removeAllNodeHighlights()
    view._filters = input.checked ? [CONDITION] : [];
    view._filterRequests();
  };
  label.append('failed');
  UI.panels.network._filterBar._filters[1]._filterElement.appendChild(label);
}

• 您可以将此代码另存为snippet in devtools，以便以后运行。
• 要在主要devtools中快速切换对接模式，请按 Ctrl Shift D 或⌘ ⇧ D
• 从理论上讲，将此代码放入Chrome应用程序目录中的resources.pak文件并不难。有几种工具可以反编译/构建该文件。
• 内部请求属性的完整列表在constructor of NetworkRequest中。

Answer 2

使用过滤器

是的，可以。但这并不完美。

我不确定为什么另一个答案会说该过滤器不适用于状态列，因为它已经使用AFAIK多年了。通过属性status-code（您可以看到所有属性here in Google Developers）。如所解释的：

  

status-code。仅显示HTTP状态代码与   指定的代码。 DevTools使用以下命令填充自动完成下拉菜单   它遇到的所有状态代码。

它不如正则表达式有用，但可以缩小很多。例如，如果要查看所有错误为403的请求，则过滤器为status-code:403。

您不能在此处甚至在范围内都使用通配符。但是可以使用负过滤器，例如，我发现非常方便：-status-code:200（注意-符号）。这样一来，所有带有200个代码的请求都将被删除，大多数情况下，您将遇到麻烦的请求。

在所有200种情况下，您现在可以对状态列进行排序，因为它更适合您的任务。

将请求复制为HAR

您可以像这样将网络日志轻松导出到HAR文件。右键单击：

然后转到您喜欢的文本编辑器，例如粘贴并另存为network.har。

所有网络日志都在该文件中，您只需进行分析即可。您可以使用此Google's free analyzer

有一个mountain of tools可以理解HAR文件...更不用说，它是JSON文件（纯文本），因此您始终可以搜索“错误”。