Log requests blocked by adblocker in developer tools Network pane

[bershanskiy]

Edit: Updated the initial report.

Description

This one of a few issues that prevents me from switching to Brave full time. Whenever I ever encountered an issue caused by ad filtering (aka issue goes away if network filtering is disabled), I always open Developer tools Network tab and uBlock Origin filter log and see what caused it. Currently, Brave shows blocked requests on the Network as if they were resolved with successfully (200) and had no content and only had headers (irrespective of the actual request type, it seems):

Access-Control-Allow-Origin: *
Content-Type: text/html

This is a bit misleading and would be nice to have blocked requests as such in the table. Currently, the only way to know that a request is blocked is to check:

1. "Connection ID" is "0" because there was no actual network request
2. "Size" is "0", and "0 B transferred over network, resource size: 0 B" to make sure the request was
   not served from cache.

The only alternative way to view the blocked requests is via the Shields extension, which is inconvenient because:

1. The window is tiny so viewing the list is nearly impossible.
2. A lot of important information is missing that is shown on uBlock Origin log:
   • the rule that matched the URL and caused it to be blocked
   • the name of the filter list the rule came from, aka where to report the incorrectly blocked content for a fix
   • the type of the request (this is usually is a guess, since Content-Type response header is not available because there is no response, but it's very helpful anyway)
   • first- or third-party status of the request (this is determined by uBlock Origin based on hosts)
3. A lot of important information is missing that is shown on Developer Tools Betwork pane as a separate column and can be sorted on:
   • domain
   • size
   • timing (both time column and waterfall)
   • initiator
   • HTTP headers
   • HTTP method
   • etc.

FYI, I have seen a lot of people on https://www.reddit.com/r/brave_browser recommend using Brave and uBlock Origin together because of Brave's limited functionality. I personally don't do this because I don't want to use two network filters doing the same exact thing at the same time.

Steps to Reproduce

1. Open a site, e.g. https://www.reddit.com/r/brave_browser
2. Open Shields, open Cross-site trackers blocked, see that:
   • to view complete log one would have to scroll, sometimes both horizontally and vertically
   • there is no information which rule matched
   • there is no separate column for information about request type, domain, etc.
3. Open uBlock Origin and logger and see much more convenient UI

Actual result:

Expected result:

N/A

Reproduces how often:

Always.

Brave version (brave://version info)

Any.

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes.
• Can you reproduce this issue with the beta channel? Did not try.
• Can you reproduce this issue with the dev channel? Did not try.
• Can you reproduce this issue with the nightly channel? Yes.

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? N/A
• Does the issue resolve itself when disabling Brave Rewards? N/A
• Is the issue reproducible on the latest version of Chrome? N/A

Miscellaneous Information:

Chrome (Chromium) + uBlock Origin

Here I pointed to one specific request as an example of how user can find blocked URL, matching rule, and list the rule came from.

Proposal

1. Display requests blocked by adblock component in red because they were blocked.
2. Add an extra column called "Interventions" that displays if the blocker or HTTPS Everywhere had edited this request.
3. Add a checkbox to Developer Tools Network pane called "Hide blocked requests" to hide the blocked requests. This checkbox would be located near the "Hide data URLs".

[bsclifton]

cc: @rebron @snyderp