Why is Chome devtools automatically blocking a request?

Question

I am trying to build a PWA (Progressive Web App) but the Chrome devtools console is warning that it is blocking my css and icon file.

Request was blocked by DevTools: "https://example.com/styles/style.css".

I cannot find any information about this happening automatically and, to my knowledge, should only happen if the user has manually requested to block a script. Chrome does not offer any other information about the warnings other than being blocked.

Unaneled

Same here. I closed and opened the devtools, and it was gone. Does nobody have an idea what this message is about? – Scofield

Thank you for the suggestion @Scofield ... Closing the dev tools and re-opening them fixes the problem. Couldn't tell you why or how this started happening. I even disabled request blocking in chrome and it was still blocking requests. – Boucicault

Answer 1

This error means the domain or URL has been blocked in the devtools. Most of the time, it's just because the developer blocked the request without paying attention.

To unblock it, just follow these steps:

• Open your devtools
• Go to the network tab
• Right-click on the request that blocked
• Then click Unblock <request-url>

Magistery

Also check in the "Request blocking" tab for any blockings with wildcards (e.g. localhost:3000/icons/*). Anyway, it still blocks request in my case when using the Lightouse performance analyzer. – Reconcilable

My other comment seems to have vanished and I don't know why. Anyway, this doesn't answer the question, which is why is Chrome DevTools blocking the request. It just restates information that's already included in the question. It also implies that it's probably due to developer error, which is a huge (and inaccurate) assumption. – Umbrella

Unblock isn't an option in the menu – Castellany

Answer 2

While you on devTools, just press ESC and you will see this tabs:

Console / Issues / Network request blocking / What's New and Search go to Network request blocking tab and there you can uncheck all that you have blocked sometime. In my case was localhost.

After that press once again ESC.

Zandrazandt

Answer 3

this one helps me

To unblock it, just follow these steps:

1. Open your devtools
2. Go to the network tab
3. Right-click on the request that blocked Then click Unblock
4. Refresh the page

Voccola

Answer 4

I had the same issue when I tried to add a favicon to my website. But after changing the favicon location the issue disappeared.

I chaged .favicon.ico to ./assets/images/favicon.ico

Pyrrhotite