How to inspect CSS element using chrome?

Question

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?

Answer 1

When you're inspecting the element, in the styles tab, there's a "toggle element state" button. Click it to apply various pseudo-states:

Answer 2

Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript or look at CSS (you can even temporarily change the CSS while you're there too)

For more information, see https://developers.google.com/chrome-developer-tools/