cssgoogle-chrome-devtoolshtml
I am trying to figure out how to inspect an element using Chrome. Now I know how to inspect an element, but how do I inspect a button's functions, like hover and active as well.
I am trying to inspect the Youtube's sign-in button on the top left of the page. I got the hover attributes, but how do I inspect the link and active state attributes?
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right. This will give you insights as to the styles being overridden or ignored (line threw). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.
To bring up the Chrome DevTools window, hit Ctrl+Shift+I in a Chrome browser tab. (Command+Opt+I for a mac)
For more info visit https://developer.chrome.com/devtools/index
Best Answer
When you're inspecting the element, in the styles tab, there's a "toggle element state" button. Click it to apply various pseudo-states: