如何在Chrome DevTool的网络面板中按文字和属性进行过滤？

Question

我想通过网址中的方法属性和文字过滤Chrome DevTool的网络面板。例如，如果我在URL中搜索文本chromequestion并且只搜索HTTP GET请求（忽略PUT，POST，DELETE等）。

我可以按文字或方法过滤：

我无法通过文字和方法将过滤器组合起来进行搜索：

我在https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#filters阅读了文档，我可以按多个属性进行过滤（.e.g，domain：*。com方法：GET）。但是，我无法按文本和属性进行过滤（例如，方法：GET chromequestion）。

Answer 1

不幸的是，目前无法做到这一点。我原本在DevTools玩过，但找不到办法。我后来看了一下如何实现过滤，并且可以确认存在一个限制，阻止您混合使用预定义的过滤器和文本过滤器。

实施细节

这有点长，但我认为有些人可能会感兴趣，看看它是如何实现的。我可能会考虑改进实现，要么是我自己，要么我会记录它，因为它是有限的。

有一个_parseFilterQuery函数可以解析输入字段并将条目分类为两个数组。第一个叫做filters，它是预定义的过滤选项，例如method:GET等。第二个是text数组过滤器，用空格分隔。解析器通过在开始时检查:和-的出现（用于否定）来相当天真地确定差异。

场景1

您只输入预定义的过滤器或多个过滤器。对于每个过滤器，将查看请求对象的不同属性的特定过滤器函数被推送到网络模块过滤器数组（this._filters）。稍后，对于每个请求，将在其上调用该函数，匹配返回true，否则返回false。这将确定是否显示请求。显然，要求所有过滤器都要为要显示的行返回true。

场景2

这是一个有趣的，你输入一个预定义的过滤器和一些文本。这涵盖了Stack Overflow问题。 _parseFilterQuery函数首先在预定义文本过滤器之前查看文本过滤器。在场景1中，这是空的，所以它被跳过了。

我们将每个文本字传递给_createTextFilter，并将每个结果过滤器推送到网络模块过滤器数组。但是，这一点的实施值得怀疑。使用实际单词的唯一时间是检查它是否为一些文本的否定过滤器。如果第一个字符是-，则表示用户不希望在名称中看到包含以下单词的请求。例如-icon表示在名称/页面中不显示任何请求。如果没有否定，它只是将WHOLE输入文本作为正则表达式返回，而不是传入的单词。在我的例子中，它返回/method:GET icon/i。

接下来查看预定义的过滤器。在这种情况下，method:GET被推送。

最后，它遍历调用每个过滤器的请求。但是，由于第一个过滤器是/method:GET icon/i，它会使所有其他过滤器变得多余，因为它永远不会通过。文本过滤器仅适用于名称和路径，因此文本过滤器中的method:GET将无效。