Any advice on debugging html and css files?

I seem to be spending an inordinately large amount of time debugging issues with html and css files, I’d love to hear some recommendations to help me isolate these issues quicker. I’m using VS Code on Ubuntu and I run into several issues with html/css. The issues I’ve had are about half self-inflicted editing errors and the other half are files that haven’t been updated by either VS code’s debugger, the django runserver, or the browser. I am at the point where I don’t trust any of the tools or my code.

Is there a command to clear and reload files to the runserver? If I use the css file’s url in the browser address bar to display it as text is that a certain indication that I’m not using a cached file? How does the runserver load css files, does it do it every time even without restarting, or are there some situations where a modified file does not get uploaded unless you restart the server? For instance if I modify a css file, save it, and then refresh the browser, does the runserver use the newly modified css file every time?

I’m clearing the browser’s cache regularly and I’m not completely sure the browser is honoring my request to have the cache cleared, so currently I’m ping-ponging between two browsers to verify they are both getting the same information.

Thanks for any advice, recommendations, or tips.

Do a search on “disable browser cache chrome”. There’s a setting where you can disable the cache completely, but only when the developer tools are open.

I believe that incognito mode also limits the cache being used.

Also, I believe there’s some middleware available somewhere that sets the response header to not cache files. (I don’t have the details on that because I much prefer the chrome settings.)

For clarification, runserver doesn’t “load” css files. Nor does runserver “use” css files. They’re just data being returned to the browser when requested.

The browser issues requests. If the browser has a file cached, it’s not going to issue a request for that file. (You’ll see this in that you won’t see the request for those files being sent to the server.) If the browser doesn’t have the file cached, it sends a request to the server. The server will then read the file and send it to the browser.

Thanks Ken, I’ll be sure to set the browser to no-cache from now on and I have noticed that sometimes the debugger will stop displaying http msgs regarding css file transfers. From what you are saying the msg traffic is the best indication that changes to css files are being used by the browser. I also installed djlint and so far it seems to help on django specific html.

For me css files have always been hard to debug because most of the time I get no indication why my requested rules aren’t working, and many times it has to do with elements in a different section of html, then when the browser isn’t uploading the css changes I make more changes until my original layout is totally messed up. DOH!