我想通过 URL 中的方法属性和文本过滤 Chrome DevTool 的网络面板。例如,如果我在 URL 中搜索文本 chromequestion,并且仅搜索 HTTP GET 请求(忽略 PUT、POST、DELETE 等)。
I am able to filter by text or by method:
![Filter by method: GET](https://i.stack.imgur.com/MIfYC.png)
I am not able to combine the filter to search by both text and method:
![Filter by text: chromequestion and method: GET](https://i.stack.imgur.com/bIAyL.png)
我阅读了文档https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#filters https://developers.google.com/web/tools/chrome-devtools/network-performance/reference#filters我可以按多个属性进行过滤(例如,域:*.com 方法:GET)。但是,我无法按文本和属性进行过滤(例如方法:GET chromequestion)。
不幸的是,目前无法执行此操作。我最初在 DevTools 中玩过,但找不到方法。后来我研究了如何实现过滤,并且可以确认存在限制,无法混合预定义的过滤器和文本过滤器。
实施细节
这有点长,但我认为有些人可能会感兴趣看看它是如何实现的。我可能会考虑改进实施,要么我自己,要么我会记录它,因为它是有限的。
有一个_parseFilterQuery
解析输入字段并将条目分类为两个数组的函数。第一个叫做filters
,这是预定义的过滤选项,例如method:GET
等等。第二个是text
数组过滤器,由空格分隔。解析器通过检查是否出现来相当简单地确定差异:
, and -
在开始时(用于否定)。
场景1
您只需输入一个预定义的过滤器或多个过滤器。对于每个过滤器,特定的过滤器函数(查看请求对象的不同属性)被推送到网络模块过滤器数组(this._filters
)。稍后,对于每个请求,都会调用该函数,并返回匹配项true
, 否则false
。这将确定是否显示请求。显然需要所有过滤器返回true
要显示的行。
场景2
这是有趣的,您可以在其中输入预定义的过滤器和一些文本。这涵盖了堆栈溢出问题。这_parseFilterQuery
函数首先查看文本过滤器,然后再查看预定义的过滤器。在场景 1 中,这是空的,因此被跳过。
我们将每个文本单词传递给_createTextFilter
,并将每个结果过滤器推送到网络模块过滤器数组。然而,这一举措的实施却值得商榷。唯一一次使用传入的实际单词是检查它是否是一段文本的否定过滤器。如果第一个字符是-
,这意味着用户不希望看到名称中包含以下单词的请求。例如-icon
表示名称/页面中不显示任何带有该名称的请求。如果没有否定,它只是将整个输入文本作为正则表达式返回,而不是传入的单词。在我的例子中,它返回/method:GET icon/i
.
接下来查看预定义的过滤器。在这种情况下,method:GET
被推。
最后,它循环调用每个过滤器的请求。然而,由于第一个过滤器是/method:GET icon/i
,它使所有其他过滤器变得多余,因为它永远不会通过。文本过滤器仅适用于名称和路径,因此method:GET
在文本过滤器中将无效。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)