Enable "Debug" in HTML Library Manager cause the forms editor HTML header part broken css mime type

[DavidZhang]

Enable "Debug" in HTML library Manager through configMgr, then the form editor report lots of css and JS errors for 49 times:

Refused to apply style from 'http://localhost:4502/var/clientlibs/libs/granite/ui/clientlibs/quickactions/less/generated/quickaction-default.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I see some solutions for Angular or other JS frameworks. Any idea how to resolve this in AEM granite? I just want each css and Javascript in its own file to easy to debug or view.

[Pulkit_Jain_ · Accepted solution]

@DavidZhang 

I think a better approach to enable debug for individual files will be to add the query string parameter “debugClientLibs=true” to the URL in the address bar, before any URL anchor. For example http://localhost:4502/siteadmin?debugClientLibs=true#/content/YourSite/...

This option causes the client library to load all of its files separately instead of consolidating them, with just one drawback- enabling debug mode of the client libs can break the page but still can help you troubleshoot.

[DavidZhang]

Is anyway only debugClientLibs a particular clientLib, for example, my own client lib. When I put this in URL, I got lots of 404, for example: GEThttp://localhost:4502/var/clientlibs/libs/wcm/foundation/components/page/responsive/css/generated/base.css; or The resource from “http://localhost:4502/etc.clientlibs/fd/xfaforms/clientlibs/xfalib/css/listboxwidget.css” was blocked due to MIME type (“”) mismatch (X-Content-Type-Options: nosniff).