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

fv2wmkja  于 2023-02-27  发布在  Go
关注(0)|答案(2)|浏览(206)

我怎么能过滤只有谷歌浏览器网络devtools错误的请求?

fjnneemd

fjnneemd1#

选项1:过滤HTTP状态代码

您可以按状态代码过滤响应-Here's a useful list和所有HTTP的状态代码。
AFAIK这个过滤功能已经使用了很多年了,它是通过status-code属性实现的(你可以在Google Developers中看到所有可以使用的属性)。
正如所解释的:
status-code。仅显示HTTP状态代码与指定代码匹配的资源。DevTools将使用遇到的所有状态代码填充自动完成下拉菜单。
虽然它不如正则表达式或通配符有用,但它可以缩小很多范围,例如,如果您想查看所有带有错误403的请求,则过滤器为status-code:403
有一个有用的情节转折:您可以使用负过滤器,即:-status-code:200(注意前面的-符号),这将 * 过滤掉 * 所有代码为200的请求,只显示大多数有问题的请求。

所有的200的出路,您可以排序的状态列,以获得更好的体验。

选项2:使用HAR格式

要进行更深入的分析(几乎同样快速),您可以轻松地将整个网络日志及其详细信息导出到HAR(HTTPARchive)文件。

将其粘贴到自己喜欢的编辑器中,你会看到它只是一个JSON文件(纯文本),你随时可以搜索“error”或者RegExp表达式,如果你懂一点JS、Python等,你就可以按照自己的意愿快速解析它。
或者,您可以将其保存为*.har文件,例如,并使用HAR分析器,如Google's free analyzer

有一个lotof tools可以帮助你分析HAR文件。像Paw、Charles和其他应用程序可以导入HAR,并将其作为请求历史显示给你。据我所知,Postman还不了解HAR,但你可以转到网络选项卡,以cURL格式复制而不是HAR(或使用HAR-〉cURL转换器,如this one),并将其直接导入Postman。

gxwragnw

gxwragnw2#

没有这样的功能。
Filter输入不适用于Status列。
您可以通过在过滤器栏中添加复选框来增强devtools本身:
1.打开网络面板
1.将devtools移到一个单独的窗口
1.按热键调用devtools - CtrlShifti或i
1.粘贴下面的代码到这个新的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中快速切换对接模式,请按CtrlShiftD或D
  • 从理论上讲,将此代码放入Chrome应用程序目录下的resources.pak文件并不难,有几个工具可以反编译/构建该文件。
  • 内部请求属性的完整列表在constructor of NetworkRequest中。

相关问题