How do I debug bad SVG parsing in Firefox? (ie. "Unexpected value X parsing Y attribute" in error console)

Question

Summary:

I want to see more detailed XML/SVG parsing error messages. I want to know where the errors are happening. How can I do this?

Background:

I'm working with some complicated javascript-generated SVG in Firefox. As I'm developing, sometimes while hunting down a big I'll see errors in the Firefox error console (or firebug) "Unexpected value NaN parsing y attribute". This is pretty clear. However, there's no line number, no code shown in Firebug - basically no way to track down where this error occurs.

With simple JS, it's a matter of tracking down the bad code. However, as my JS gets more complicated, I really need to be able to see which of hundreds of potential lines is causing this.

Ideally, I'd like to see this parsing error the same way I see JS errors or HTML errors:

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

Is there any way to do this? Even knowing which SVG element is being affected would help, anything besides "There was an error somewhere". Thanks!

Answer 1

Nearly three years later and using Firefox 29.0.1, I have the same difficulty. I ended up commenting out successive blocks of code until I found the offending line.

FWIW, in my case Firefox didn't like the fact that I had created a node with blank attributes:

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

Once I removed the attributes or set them to any value, the problem went away. I was surprised because I'd expected the error to be in the Javascript instead. I hope this helps someone else.

Answer 2

Raise a bug in bugzilla and ask for the element tag name to be added to the error message: https://bugzilla.mozilla.org/enter_bug.cgi?product=Core&component=SVG

Adding a line number would be more difficult. If want that too then create another bug specifically for it as you're less likely to get it.