Jump to content

How to find bad CSS and javascript statements within Firefox?


Recommended Posts

It happens sometimes that I wrote and apply buggy CSS & Javascript/jQuery scripts into a webpage.

An errorneous CSS rule could be

.myclassname { width: 1024kk !important; }};

or a javascript

var pane = document.getElementsByClassName("page-header-meta")[0];

does not find at least 1 instance of the class.

So the remaining statements of such a scripts are not executed.

How can I find out (in Firefox) which statement is causing the trouble?

The webdeveloper pane at the bottom is not really useful.

I have problems finding in it errors or warnings which come from my focussed  *.css or *.user.js script (errors from other *.css and *.user.js) should be excluded.

How can I achieve a better/faster error search?




Link to comment
Share on other sites

1) get a decent editor that will highlight these errors for you to correct before viewing in browser.

2) use browers web tools F12, using select for html elements should show what is applied stylewise, if the style property has a invalid value, you should see it have a strikethrough line with warning symbol telling you its invalid.

Usually using console you should see any errors brought up, with line number, by clicking link to linenumber it should take straight to the line where the error occured.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...