Debuging CSS with JQuery and Chrome

by EvanJPalmer

I wouldn’t consider myself much of a front end dev. I’m more back end (I guess).

As a result, the following might be a common technique for working out problems with CSS.

Anywho, here it goes:

I debug and write my CSS with JQuery.

What I mean by that is this:

I’ve tried to apply a bunch of styling to some elements, but it hasn’t worked. The first thing I do is get the CSS selector and throw it into jquery in Chrome’s Developer Tools console. Did it find the right element(s)? If no, I mess around with the selector until it’s right, and put it back into the CSS. Job done.

If it DID find the correct elements, why is the style not being applied? I now add and remove attributes and styles in JQuery and see where that takes me. 

I use other techniques too, but that’s a good one.

Advertisements