Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 495
Alcedo_Atthis Avatar asked Jan 09 '15 14:01

Alcedo_Atthis


People also ask

How do I block DevTools?

To use Request Blocking in DevTools: Right click on a resource in the Network Panel. Select Block request URL - this resource is now excluded from subsequent page loads.

How do I monitor Network traffic in Chrome?

Google Chrome:Open developer tools (Menu > More tools > Developer tools or Ctrl + Shift + I or F12) Select the Network tab. Make sure that "Preserve log" is checked so that all traffic is captured. Access or refresh the page traffic needs to be captured for or a problem should be reproduced in.


1 Answers

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

like image 168
abd3721 Avatar answered Sep 29 '22 03:09

abd3721