Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Debug CSS
Sharing simple trick that I'm using for debuggin everyday:
0- Fluid(s)
img,object,video,embed {
max-width: 100%;
1- use Pesticide plugin:
ExtensionPesticide for Chrome
or just do it yourself:
* {
border: 1px solid red !important;
2- Bookmarks:
3- or use a grunt tasks, I recommend this approach:
4- PhantomCSS: Visual/CSS regression testing with PhantomJS
5- W3C validator:
6- clean you CSS
Be aware that CSS controlled by JS is not going to be checked.
7- Find Unused CSS Rules With Google Chrome Audit Tool:
In Chrome’s developer tools, visit the Audit tab. Despite it’s name, the taxman won’t start shaking you by the ankles.
Run the Web Page Performance option. You can then get a list of unused css rules for the page you are on.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment