How to block a URL in Chrome's developer tools network monitor
Asked Answered
L

10

92

I am currently analysing my page connections and I want to block some tracking scripts and other external URL calls in my network monitor inside Chrome's developer tools.

I quickly want to check how the page behaves without some libraries.

Chrome itself does not provide any functions like this and the famous blocking extensions only block URLs which the user enters manually into the navigation bar.

Liquefacient answered 9/1, 2015 at 14:46 Comment(0)
E
112

As pointed out by @calavera.info, @iman.Bahrampour, and @Asim K T this feature is now available in Chrome 59. You can select a URL or domain to block in the Network panel. See this release note and these Screenshots where the StackOverflow logo has been blocked from this page. @iman.Bahrampour also shares two extensions below that will also do this ("HTTP Request Blocker" and "Request Blocker").

StackOverflow logo blocked Adding a new block

Eyelid answered 8/9, 2015 at 13:51 Comment(11)
With Version 49.0.2575.0 canary (64-bit) I don't see this option :(Permute
Yeah, they keep changing where they're putting it, and pulling it out again. It appeared briefly as an option along with Console in the bottom panel, but it was buggy :-) Apparently they're still trying to get this right.Eyelid
How to do you enable this experimental feature?Underfoot
@SamarPanda - Chrome Canary is a preview version of Chrome that stays a couple of versions ahead of the released version. google.com/chrome/browser/canary.htmlEyelid
@Eyelid Yes, i know that. Wondering as i don't see this option in Chrome 51.0.2704.84 (64-bit) or Canary 53.0.2762.0 canary (64-bit).Underfoot
it's no where to be found nowCosignatory
FYI it's been removed... you can star this issue if you want this feature back: bugs.chromium.org/p/chromium/issues/detail?id=542285Lakendra
how I can always block domains not one time?No
Blocking requests doesn't seem to work for HTTP 302 Redirects?Barclay
Mention if this only works within Developer Tools, or even keeps on working on other tabs. And if it is remembered the next time we open the browser.Apiculture
If you need to block all js, can go to "Network request blocking" tab and click "+", then add pattern "*.js"Septic
T
26

As abd3721 mentioned this is available directly within chrome DevTools (You don't need to be on canary anymore), however it is still behind a flag and in the hidden experimental features menu. As of the time of this comment, Chrome stable is on version 53.

To enable it, open this link and click the enable link under the appropriate flag: chrome://flags/#enable-devtools-experiments

Then in DevTools open up the settings panel(F1) and click on the experiments tab.

This lists all currently available DevTools experiments but it is still in yet another hidden set of features.

Press Shift 6 times while in the experiments tab to show even more hidden features, one of them will be Request Blocking.

NOTE: These features are considered experimental and may be buggy or incomplete. Use with caution.

Tempo answered 13/9, 2016 at 17:14 Comment(3)
Additional Warning: Unblocking is a huge pain point - and not as simple as Blocking in the first place.Charinile
In latest versions of Chrome unblocking now works as intended.Sycophant
If you need to block all js, can go to "Network request blocking" tab and click "+", then add pattern "*.js"Septic
D
23

For blocking requests in google chrome you have 3 options:

1. Google Chrome with pattern matching:

In network tab, right click on request and then select block request URL

block request for chrome

There is a plus sign that adds patterns for blocking requests

set pattern for blocked request

For example I have 7 request URLs:

  1. http://www.test.com?userid=5
  2. http://www.test.com?username=username
  3. http://www.test.com?email=email
  4. http://www.test.com?name=x
  5. http://www.test.com?family=q
  6. http://www.test.com?family=y
  7. http://www.test.com?family=z

I can block requests that have a specific pattern by adding a pattern(for example the pattern *family* blocks 3 below requests):

  1. http://www.test.com?family=q
  2. http://www.test.com?family=y
  3. http://www.test.com?family=z

Be careful! Because patterns are case sensitive

2. HTTP Request Blocker extension:

HTTP Request Blocker

This extension has pattern matching for blocking requests:

Match patterns

3. Request blocker extension:

This is a useful extension that has pattern matching for blocking requests.

The most useful features of this request blocker are importing and exporting lists for using by other People.

block request with Request blocker extension

For exporting a list and using in another computer(or future used): click on Direction down and select Export.

enter image description here

Open the exported list with import list button.

Good Luck

Daina answered 20/8, 2017 at 16:12 Comment(1)
Current URLs for above items apparently are: github.com/wolfascu/ChromeHttpRequestBlocker github.com/gera2ld/request-xApiculture
V
21

From Chrome 59 you can block specific requests from Network tab of developer tools itself.

https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests

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.

enter image description here

Vixen answered 11/7, 2017 at 11:30 Comment(0)
E
10

As for Google Chrome 94, it's possible to exclude network activity for entire domain:

1. Go to "Network" panel of DevTools:

"Network" panel of Chrome DevTools

2. Rigth click on item of domain you want to block, click on "Block request domain" in the context menu:

context menu of Network item

3. Type "status-code:0" into "Filter" and click on "Invert" checkbox:

fitering of Network items

To manage blocked domains, press ESC button when in DevTools, and click on "Network request blocking" tab in the bottom panel:

Network request blocking

Earlap answered 25/9, 2021 at 4:2 Comment(0)
H
7

This is now achievable in Chrome 59 developer tools by blocking respective requests: https://developers.google.com/web/updates/2017/04/devtools-release-notes#block-requests. With this approach it is somehow difficult to turn off all the stylesheets, but it's easier to turn off just the most annoying ones.

Hellbox answered 27/4, 2017 at 12:14 Comment(0)
U
0

Will changing host file help. Your system (windows, linux, mac) all check host before requesting DNS lookup. I usually use it when I want to block some slow advertisers.

windows: c:\Windows\system32\drivers\etc\hosts

linux & mac /etc/hosts

*** BE VERY CAREFUL TO MAKE BACK UPS ***

Unbuild answered 9/1, 2015 at 14:54 Comment(2)
Forgot that, I can not change my hosts since I don't have admin rights. :/Liquefacient
Also, this does not achieve pattern based URL blocking :(Floorer
S
0

An existing bug report is requesting this feature. You can star that issue to show support for it being added.

Strangulation answered 12/1, 2015 at 20:7 Comment(0)
T
0

Well, i have been looking for an answer for this too, as I had this issue of choices by counterfeit, and nothing seemed to work for me. But then I tried to analyze the requests and other things until I figured out, that there was this site which was loading ads onto my pages and redirecting me to advertisements. And also changing the google search bar on new tabs to some unknown search engine. I was able to temporarily block the request on one page. but after opening a new tab, the ads would appear again.

So googling for request blocker, I came up with a chrome extension "HTTP Request Blocker" and added the address which was causing all the crazy ads, has now solved the problem fully.

I hope it will be of help to you too or anyone else.

Thracophrygian answered 2/8, 2017 at 21:56 Comment(0)
L
0

In the original question, the author states:

the famous blocking extensions only block URLs which the user enters manually into the navigation bar.

This is no longer the case. I have really enjoyed using mokku, which can intercept and mock all types of requests. You can specify what the status code should be, so it will definitely solve this problem as well as adding other functionality that is helpful. It works by another tab in the chrome dev tools. Here is a link to the extension: https://chrome.google.com/webstore/detail/mokku-mock-api-calls-seam/llflfcikklhgamfmnjkgpdadpmdplmji?hl=en

Liberate answered 7/12, 2022 at 14:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.