I'm using JavaScript to dynamically generate the GUI of my web app. Firebug and the Firefox Web Developer Tools are brilliant for inspecting the end result, or for stepping through code using breakpoints, but one thing I don't know is how to catch CSS errors when they occur, and therefore where they occur.
For example, if I have an error in my algorithm, the script might set a "width" to -7px, or set a "left" to "NaNpx". This appears immediately in the Web Developer Extension Error Console's "Warnings" list, but there is no way of knowing which element it occurred on (unless I visually see an obvious result of the badly styled element. The Warnings list just shows it as "Error parsing value for 'width'. Declaration dropped. -130px" with a timestamp and the URL.
If a bad declaration occurs in a static CSS file, then the filename and line number are shown, but this is of course not possible with a dynamic situation. So the question is, is it possible to "break" upon a CSS error? This presumably means I want to stop the script so that I can inspect the current situation and watch variable values. There are thousands of lines of code, so I can't easily put some alerts or breakpoints in, because it's hard to know where to start.
While you can't break on a CSS error, you still can log undesired values in the Developer Tools console, so you can track them easier.
You could do it, by adding some checks in your Javascript code. Since i don't know your code, i add some generic solution.
Example for the negative width:
if (width < 0)
{
console.log (width + ': You can log whatever you wish here, the element id, tagName, or index, for example, making it easier to find.');
}
Similar thing when the value is not a number (NaNpx):
if (isNaN(left))
{
console.log (left + ':You can log whatever you wish here, the element id, tagName, or index, for example, making it easier to find.');
}
Also, you can add breakpoints on these, and configure the breakpoints to stop only when a given expression becomes true(for example: isNaN(left)).