如何在Firefox中调试错误的SVG解析？ （即错误控制台中的“意外值X解析Y属性”）

Question

要点：

我想看到更详细的XML / SVG解析错误消息。我想知道错误发生在哪里。我怎么能这样做？

背景：

我正在使用Firefox中一些复杂的javascript生成的SVG。正如我正在开发的那样，有时在搜索大的时候我会看到Firefox错误控制台（或firebug）中的错误“意外的值NaN解析y属性”。这很清楚。但是，没有行号，Firebug中没有显示代码 - 基本上无法追踪此错误发生的位置。

使用简单的JS，这是追踪坏代码的问题。但是，随着我的JS变得越来越复杂，我真的需要能够看到数百个潜在行中的哪一行导致了这一点。

理想情况下，我希望看到此解析错误的方式与我看到JS错误或HTML错误的方式相同：

Unexpected value NaN parsing y attribute.
Line 103:    svgElement.setAttribute('x', some_bad_js_variable);

有没有办法做到这一点？即使知道哪个SVG元素受到影响也会有所帮助，除了“某处出现错误”之外的任何内容。谢谢！

Answer 1

将近三年后使用Firefox 29.0.1，我遇到了同样的困难。我最终评论出连续的代码块，直到找到有问题的行。

FWIW，就我而言，Firefox并不喜欢我创建了一个具有空白属性的节点：

    <clipPath id="chart_area">
       <rect x="" y="" width="" height=""/>
    </clipPath>

删除属性或将其设置为任何值后，问题就消失了。我很惊讶，因为我预计错误会出现在Javascript中。我希望这有助于其他人。

Answer 2

提出bugzilla中的错误，并要求将元素标记名称添加到错误消息中：https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG

添加行号会更困难。如果也想要它，那么专门为它创建另一个bug，因为你不太可能得到它。