Opera 9 has a lot of new features to help developing content. Here is an example of debugging SVG.
The basic plan is to have an HTML page that has a clock in it. If you look at the broken clock it simply doesn’t appear due to bugs in the code. This might seem frustrating, but it is a good reminder that you need to get at least the minimum right or browsers will have to include megabyutes of bug correction, and spend their developers’ time fixing authors’ bugs instead of making a better browser.
So what’s wrong, and how do we fix it? First, let’s check for warnings. Sure enough, if you open the Error Console (Tools » Advanced » Error Console) we get two messages. One is that there is a failed attribute in SVG — the value
preserveAspectRatio isn’t what the browser likes. Who is right here? Does Opera 9 even support
Luckily, we can check that. Have a look at the table of Opera 9’s supported SVG elements, attributes, and DOM methods, and we see that
preserveAspectRatio is supported. So it is likely that we have an error in our code. Either look for a tutorial on SVG, or look at the specification . Then we can see that there are various effects we can get. Since our clock makes sense so long as we can see the middle of it, looking at the pictures in the spec, or even from reading the text shows that we want to set the value as
So now we know what we want to do, how do we change it? Easily enough… look at the source in Opera 9’s built-in source editor. Make the edit we want in place. To check that it works, press “reload from cache”. If we were working on a locally saved file, this would save our version. When we have downloaded the page, we can also save a local copy (you guessed it, press the “save” button).
…Date()… in the last statement of the script where we should have used
new Date()… (or a variable, as earlier in the script). Opera actually works out how to make sense of this by forcing a type change, but good programming style is worth having, so we should make the second change too.
And Lo! and Behold! We have a simple SVG clock in our page. Being in a space that can’t fit it exactly (the object where the clock is has width 20% and height 50%), we can at least see the middle of the clock and so tell the time…
Note: This article shows the features of Opera 9. While all the code is standards-compliant, it may not work in a non-compliant browser.