0

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.

4

1 回答 1

0

虽然您不能因 CSS 错误而中断，但您仍然可以在开发人员工具控制台中记录不需要的值，以便更轻松地跟踪它们。

您可以通过在 Javascript 代码中添加一些检查来做到这一点。由于我不知道您的代码，因此我添加了一些通用解决方案。

负宽度示例：

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.');
}

当值不是数字（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.');
}

此外，您可以在它们上添加断点，并将断点配置为仅在给定表达式为真时停止（例如：）isNaN(left)。

于 2013-07-12T13:27:48.437 回答