0

I have encountered an annoying problem while trying to debug some CSS in Chrome. I am rather new to CSS, and using Chrome's "Computed" window in the CSS developer tools has been very handy in figuring out where CSS properties I'm trying to assign are being overwritten later down the chain. (Please feel free to correct any incorrect terminology so I can be on the same page).

Here's an example of how it helped me successfully change the color for an active jQuery UI Tab: http://1drv.ms/1yJzyec (don't have enough rep points yet to post a picture. This goes to my OneDrive.)

I need to use this approach to figure out what's going wrong with my CSS for a hovered or focused element. Here's the problem: as soon as I click into Chrome's developer tools to see the chain of inheritance for a specified element, it is no longer hovered/focused because I've clicked into the developer tools, preventing me from seeing the inheritance.

Are there any other tools out there that can help me dissect an HTML element's CSS inheritance chain in real-time?

Thanks!

Jacob Stamm
  • 1,660
  • 1
  • 29
  • 53

1 Answers1

0

Using Chrome developer tools, you can force the element to be in the hovered state.

enter image description here

Click on the Toggle Element State icon (dash-bordered box with pointer) to show this.

kei
  • 20,157
  • 2
  • 35
  • 62
  • This feature is working really well for the `:focus` pseudoclass, however, I need to force the element to have the jQuery UI CSS class `.ui-state-focus`. Any ideas? – Jacob Stamm Oct 31 '14 at 14:15
  • Thank you for getting back to me. However, this isn't working for me in this particular situation because, even when I manually assign it the class of `ui-state-focus`, as soon as I click anywhere in the dev tools, it loses that class. If I could get it to keep that class explicitly, even after I click into the dev tools, _then_ I will be able to trace its CSS inheritance. – Jacob Stamm Oct 31 '14 at 17:00