Chrome Devtools blocking a request? Why?

Programming
, ,
1

Issue: Chrome DevTools is blocking CSS and Icon files in my PWA

Chrome DevTools is showing the following warning when attempting to build a Progressive Web App (PWA):

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

This warning does not occur when the user has manually requested to block a script, and Chrome does not provide any other information about the warning.

2

Answer:

This warning is likely due to the fact that DevTools is blocking the loading of CSS and icon files in your PWA. To fix this issue, you can do the following:

  1. Open DevTools and click on the Network tab.
  2. Look for the blocked file(s) in the list of requests.
  3. Click on the blocked request and select the “Allow Request” option.
  4. Reload your PWA and the files should now be loaded without issue.

Alternatively, you can disable the DevTools feature that blocks resources by going to DevTools settings > Preferences > Network and unchecking the “Enable resource blocking” option. However, it’s generally not recommended to disable this feature as it can help identify and prevent malicious scripts from running.