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.

Solution 1:

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").

Solution 2:

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.