How to find bad CSS and javascript statements within Firefox?

[pstein]

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?

 

Peter

 

[ishan_shah]

you can manually find error in css file by check which section is not working Or you can use this website to find syntax error in css file:http://beautifytools.com/css-validator.php

For js you can use

Quote

CTRL + SHIFT + J

in firefox.

[dsonesuk]

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.