Debugging CSS in Google Chrome

As CSS is not a scripting language, you cant properly debug it. Anyway if you know where it goes wrong you can try to tune it by hand.

Aditionally you've got the w3c validator here: http://jigsaw.w3.org/css-validator/ which may give you some feedback

CSS - How to debug active/selected input elements in Google Chrome

You can right click on the element in the Chrome Inspector and there is a 'Force state...' context menu item.

Here is a video clip demonstrating how to do it. https://developers.google.com/web/updates/2015/05/triggering-of-pseudo-classes

How to force Chrome browser to reload .css file while debugging in Visual Studio?

There are much more complicated solutions, but a very easy, simple one is just to add a random query string to your CSS include.

Such as src="/css/styles.css?v={random number/string}"

If you're using php or another server-side language, you can do this automatically with time(). So it would be styles.css?v=<?=time();?>

This way, the query string will be new every single time. Like I said, there are much more complicated solutions that are more dynamic, but in testing purposes this method is top (IMO).

Google Chrome Developer Tools not showing css filename next to css

There are multiple cases,
1. You are using less CSS files.
2. The CSS class is on same page.
3. Class is generated by a plugin

Freeze screen in chrome debugger / DevTools panel for popover inspection?

Got it working. Here was my procedure:

Browse to the desired page
Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS
Select the Sources tab in chrome inspector
In the web browser window, hover over the desired element to initiate the popover
Hit F8 on Windows/Linux (or fn + F8 on macOS) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
Go to the Elements tab in inspector
Find your popover (it will be nested in the trigger element's HTML)
Have fun modifying the CSS

how does one debug a css file

Download firebug, or try using a google chrome web debugger (ctrl + shift + J)

Fire bug may be better for you because it will allow you to edit the webpage and see how certain css calls will effect the page. It is what I use all the time

There is also a download (ill get the link) that will allow you to run firebug in other browsers

Edit

Firebug lite (For Google Chrome)

Firebug (For Firefox)

Debugging CSS in Google Chrome