How to See the CSS Files Loaded in a Page in Google Chrome

Only part of CSS file is getting loaded in Chrome

The file is far from valid which should probably be looked at but here's what I've found…

• I cannot paste the contents of your CSS file into http://cssbeautify.com/ - the CSS is cut off in almost the same place as Chrome is doing
• I can paste into http://www.codebeautifier.com/ which can generate a CSS file that will load just fine! Very strange.

Through some trial and error it seem that a CSS file that is concatenated on a single line looks like it has been cut off when using the Chrome Developer Tools. The file seems to have been parsed as using Ctrl+Shift+F and searching for something at the end of the file (I was searching for zag-divider) then Chrome is reporting that it is found, although the found count seemed wrong.

Specifically, it seems that any line of this CSS file that is >= 66,537 characters will be cut off! For example:

• a single line CSS file <= 66,536 characters will not be cut off
• a single line CSS file >= 66,537 characters will be cut off
• a multi line CSS file >= 66,537 characters will have only lines that are >= 66,537 will be cut off

I had a single line of exactly 66,537 characters of CSS which was cut off, but by adding a single carriage return after the first selector and reloading, the entire file was shown correctly in the Console.

So to summarise… a CSS file with any line >= 66,537 characters looks like it has been cut off part way through in the Chrome Developer Tools although the file has actually been loaded fully. I tested this by adding a rule to the end of the line which was applied by Chrome.

Note: I would have been happier if the seemingly magic number was 2¹⁶

Edit: Investigation carried out on Chrome 23.0.1271.97 m

Google Chrome clears CSS styles for current page when opening link in new tab or opening a new window

This issue was fixed by Google developers and will be merged to the stable channel soon already merged into Version 53.0.2785.143 m (64-bit).

https://bugs.chromium.org/p/chromium/issues/detail?id=648237#c6

See all loaded .js files in Google Chrome debugger tool

If you go to the sources tab in Chrome, you'll see the a list of domains. Search for your own domain, for example 'localhost'. If you open the map, you'll see all folders and files that are loaded into your current page.

Example:

You'll also see all other domains where you've used files (like JS, CSS, images, etc.) from.

---

Related Topics