Question

Similar to how ‘Pause on exceptions’ works, is it possible to pause whenever you create a svg element and sets invalid attributes on it?

This example (test on jsfiddle):

circle.setAttribute('fill', 'steelblue');
circle.setAttribute('r', 'big'); // A 'big' circle is obviously wrong

will generate the following error in chrome, but there is no mapping back to the javascript call that generated the svg so it can be hard to find the error:

Answer 1

This is not possible because of how svg is rendered in the browser. Imagine that svg is a like XML, or (HTML) for that matter. Its not executed in a step process like lines of code. Its read into a rendering engine that quickly renders the object and its attributes. The pause would have to happen during this rendering, inside of the engine, and this would cause all sorts of rendering issues.

In reference to your example, javascript doesn’t do any sort of type checking on what you pass into the setAttribute value, (I mean it really couldn’t as different attributes require different types), but rather adds that key value pair to the element object. (try logging the circle object, before and after and you’ll see what I mean). Later when you add your circle to the DOM, it simply takes the object and parses it like I stated above.

Basically this type of error handling will never exist in the browser because the code that you have in your example is correct and executes properly, however you as a programmer need to make sure that you are passing the correct type of value to the setAttribute method. So its not an error in the javascript and that is why you do not get the breakpoint there.