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

Posted 2023-03-10

【中文标题】如何在 Chrome DevTool 的网络面板中同时按文本和属性进行过滤？

【英文标题】：How to filter by both text and property in Chrome DevTool's network panel?

【发布时间】：2017-06-19 22:08:19

【问题描述】：

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

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

我无法将过滤器结合起来按文本和方法进行搜索：

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

【参考方案1】：

很遗憾，目前无法执行此操作。我最初在 DevTools 中玩过，但找不到方法。后来我查看了过滤器是如何实现的，并且可以确认存在一个限制，阻止您混合使用预定义的过滤器和文本过滤器。

实现细节

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

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

场景 1

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

场景 2

这是一个有趣的地方，您可以在其中输入预定义的过滤器和一些文本。这涵盖了堆栈溢出问题。 _parseFilterQuery 函数首先查看文本过滤器，然后是预定义的过滤器。在场景 1 中，这是空的，因此被跳过。

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

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

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