Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Filter only the requests with errors - Google chrome network

How Can I filter only the requests with errors in google chrome network devtools?

like image 463
Brahim LAMJAGUAR Avatar asked Mar 15 '19 14:03

Brahim LAMJAGUAR


People also ask

How do I block a Network request on Chrome?

Right-click on the request in the Network panel and select Block Request URL. A new Request blocking tab pops up in the Drawer, which lets you manage blocked requests.

How do you hide the XHR requests from the Network tab in the browser?

Unfortunately for you, there's no way to hide network requests from Chrome Network Log. Even if you could, it'd be still possible to use network analyzer tools such as Fiddler and Wireshark to log all the traffic between your computer and the Internet.


2 Answers

Option 1: Filtering HTTP Status Codes

You can filter responses by their status code — Here's a useful list with all HTTP's Status Codes.

AFAIK this filtering feature has been working for years. It's through the status-code property (you can see all properties you can use here, in Google Developers).

As explained:

status-code. Only show resources whose HTTP status code matches the specified code. DevTools populates the autocomplete dropdown menu with all of the status codes it has encountered.

While it's not as useful as a regex expression or a wildcard, it can narrow down a lot. For instance, if you want to see all requests with error 403, the filter is status-code:403.

There's a useful plot twist: you can use negative filters, i.e.: -status-code:200 (notice the prepended - sign). That will filter out all requests with a 200 code, showing only, for the most part, troubled requests.

enter image description here

With all the 200's out of the way, you can sort the status column for a better experience.

Option 2: Work with the HAR format

For a more in-depth analysis, almost as quick, you can easily export the whole networking log, and its details, to a HAR (HTTP ARchive) file. Right-click:

enter image description here

Paste it into your favorite editor. You'll see it's just a JSON file (plain text). You can always search for "error" or RegExp expressions. If you know a bit of JS, Python, etc., you can quickly parse it as you wish.

Or you can save it as *.har file, for instance, and use a HAR analyzer, like Google's free analyzer:

enter image description here

There are a lot of tools that will help you analyze HAR files. Apps like Paw, Charles, and others can import HAR and show it to you as a history of requests. AFAIK Postman doesn't understand HAR yet, but you can go to your network tab and copy in cURL format instead of HAR (or use a HAR->cURL converter like this one) and import it right into Postman.

like image 59
Neithan Max Avatar answered Oct 16 '22 22:10

Neithan Max


There's no such functionality.
The Filter input doesn't apply to the Status column.

You can augment devtools itself by adding a checkbox in the filter bar:

  1. open the network panel
  2. undock devtools into a separate window
  3. press the hotkey to invoke devtools - CtrlShifti or i
  4. paste the following code in this new devtools window console and run it

{
  // 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);
}

  • You can save this code as a snippet in devtools to run it later.
  • To quickly switch docking mode in the main devtools press CtrlShiftD or D
  • Theoretically, it's not that hard to put this code into resources.pak file in Chrome application directory. There are several tools to decompile/build that file.
  • The full list of internal request properties is in the constructor of NetworkRequest.
like image 3
wOxxOm Avatar answered Oct 16 '22 23:10

wOxxOm