Closed Bug 1151368 Opened 5 years ago Closed 1 year ago

Block some specific resources in Network Panel across reloads

Categories

(DevTools :: Netmonitor, enhancement)

Other
Linux
enhancement
Not set
normal

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: karlcow, Assigned: jryans)

References

(Blocks 4 open bugs)

Details

(Keywords: dev-doc-complete)

Attachments

(6 files)

Use cases:

Some CSS, some JS, etc have specific effects on the Web page such as completely transforming the content in unexpected ways. For example, through XHR a script will be loaded rewriting the page entirely. Or an image will completely change the rendering. 

It would be good to be able through a checkbox or icon to block one or more specific resources AND that this blocking persists across reloads, so we can better understand the effect of this specific resource on the rest of the page.
Product: Firefox → DevTools
Severity: normal → enhancement

Note that we can:

  1. Block particular request
  2. Block domain or URL
  3. Block requests using glob pattern (*.js)

Honza

Duplicate of this bug: 1530906

@Michal: do we have any platform API that would help us to implement this feature?
Honza

Flags: needinfo?(michal.novotny)

I'll make an attempt! 😄 Feel free to steal if I am taking too long...

Assignee: nobody → jryans
Status: NEW → ASSIGNED
Attached image blocked-request.png

Here's how I am currently displaying blocked requests.

It seems like we can just cancel requests from DevTools, so I don't think a platform API is required here.

Flags: needinfo?(michal.novotny)

It seems like we can just cancel requests from DevTools, so I don't think a platform API is required here.

I see ok.

Here's how I am currently displaying blocked requests.

The UI looks good to me!

Thanks!
Honza

This is a very basic form of request blocking for the Network Monitor. It only
supports blocking a request via right-click. This change adds the minimal UI and
server support to block the request.

There is no UI to indicate what happened to the request yet, so it will just
look like a "confused" request that never started. Future patches will improve
from here.

This updates the request list to indicate a request was blocked by marking the
entire request item and also replaces transferred size column with "blocked by
DevTools". In the future, we may show other reasons for blocking in this way,
such as CORS, etc.

Depends on D26579

This is nearly the same the first patch for blocking, but adds the unblock
option as well.

Depends on D26580

While this patch queue is correct code-wise, I'm wondering where we are going from this first iteration?
I've not found any followup bugs to know where we are going.

The feature is great, but is strictly limited to block resources one by one and via absolute URLs.
Also, there is no feedback when you do block a request.
It currently feels a bit broken because of that, we should have some UI to say that this request will be blocked.

Flags: needinfo?(hkirschner)

One follow up filled as bug 1543400.

Honza

Blocks: 1543400

Another follow up:
Bug 1543613 - Use DevTools specific blocking reason for manual resource blocking

We yet need a bug to cover the UI changes - I am waiting for Harald with this.

Honza

Attached image image.png

This is the UI Chrome is using:

Context menu actions:

  • Block request URL
  • Block request Domain

Honza

Hoping to investigate the headers issue that Alex spotted: https://phabricator.services.mozilla.com/D26582#789722.

No longer blocks: 1543400
Duplicate of this bug: 1543400

@jryans: thanks for the update, I tested it and I can see the headers now.
I think it's ready to land.

The feature is great, but is strictly limited to block resources one by one and via absolute URLs.
Also, there is no feedback when you do block a request.
It currently feels a bit broken because of that, we should have some UI to say that this request will be blocked.

Yes agree, more work on the UI is needed, but it shouldn't block the patch provided here. The current minimal UI (actions in the context) menu works too.

Anyway, there are two follow ups:

  • Bug 1545739 - Indicate that resources might be blocked
  • Bug 1543613 - Use DevTools specific blocking reason for manual resource blocking

Thank you both Alex and Jryans for the help with this!

(I am also resolving NI for Harald since we discussed this offline)

Honza

Flags: needinfo?(hkirschner)
Pushed by jryans@gmail.com:
https://hg.mozilla.org/integration/autoland/rev/eaf2a199d4ea
Block requests by URL in DevTools. r=ochameau
https://hg.mozilla.org/integration/autoland/rev/6b031fd49d1e
Display blocked requests in Network Monitor. r=ochameau,Honza
https://hg.mozilla.org/integration/autoland/rev/b9a2a553d0c4
Unblock requests by URL in DevTools. r=ochameau
https://hg.mozilla.org/integration/autoland/rev/6d168f63dd8d
Add test for DevTools request blocking. r=Honza

Does this show in the UI? I just tried it in 68.0b6 and I see one possibly related menu item, "Block URL" so I tried it. The UI was not updated, and there didn't seem to be any blocking going on when I reloaded the page.

In Nightly, 69.0a1, I still only see one options, "Block URL" but the UI does change and display the blocked by DevTools message after I reload the page.

This bug says it was fixed in 68 but I can't to make the change in the Developer Edition, only in Nightly. Does this have to be turned on with a preference setting in 68 for now?

Flags: needinfo?(jryans)

Irene, please see this section, it describes the feature in detail + provides screenshots:
https://docs.google.com/document/d/18sD1okBxWjMHLWYyUkStkcrwgWhb3NyN4n_eh1lqUGw/edit#heading=h.4jfv9i3xwir

If it doesn't work as explained in the doc, please file a bug.

Thanks,
Honza

Flags: needinfo?(jryans)

That's wonderful. In Nightly it works exactly as you show in the doc, but I'm not seeing it work at all in the Developer version which is 68. The menu option is there but it has no effect. Should this be in a separate bug?

(In reply to Irene Smith from comment #28)

That's wonderful. In Nightly it works exactly as you show in the doc, but I'm not seeing it work at all in the Developer version which is 68. The menu option is there but it has no effect. Should this be in a separate bug?

There was regression that broke the feature in 68 and we fixed that in 69 - covered by bug 1554095
I just asked for uplift to 68 - if that happens the doc can target 68

Thanks for the pointer Irene!
Honza

Added documentation with images to the Network Monitor Filtering requests page because I felt that might be the easiest place to find it.

Also added this feature to Firefox 68 for developers

The Network monitor request list allows you to block a specific URL (bug 1151368).

Flags: needinfo?(odvarko)

Looks great to me, thanks Irene!

Honza

Flags: needinfo?(odvarko)
Depends on: 1585612
You need to log in before you can comment on or make changes to this bug.