Chrome Developer tools: Capture dynamic styles / state – active, hover, focus, visited

  • In chrome, press F12 to open the developer tool
  • Click Elements (other items in the main menu will be Network, Sources, Timelines, Profiles, Resources, Audits, Console)
  • Click Styles, so the path is Elements -> Styles (other items in the sub-menu will be Computed, Event Listeners, DOM Breakpoints, Properties)
  • On the extreme right of the developer tools inside Elements -> Styles there are three icons in the filter section (+, pin, diamond)
  • Click the middle Pin icon, Force element state section will appear with check boxes as :active, :hover, :focus, :visited
  • Play with these options to show styles specific to these dynamic CSS styles

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s