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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...