How to debug or see VML ouput in IE? (e.g. from Raphael)

Question

I'm working with Raphael.js to make cross-browser interactive vector graphics, trying to add a new feature with separate code to make the feature work in 'SVG mode' and 'VML mode'.

My problem is, I can't see any way to inspect, debug, change or even see the defining properties of the actual IE VML output that Raphael creates.

---

In SVG, it's easy - you just dig into the DOM with Firebug or Inspect Element and the SVG is right there with the right markup. In IE7 and IE8 in VML however, after hitting 'Refresh' in IE browser tools, there are lots of <shape/> entities - but they all claim to have identical properties and markup. The actual defining VML properties are nowhere to be seen.

Here's an example showing the Raphael tiger demo in IE8 mode (IE7 mode is the same). Looking at the DOM (using IE Developer Tools), however, it looks like it shouldn't be a tiger, and should be nothing but a pile of 1px by 1px shapes piled up at left:0px;top:0px;.

Where in the DOM or final output are the definitions of the shapes' fill, path, stroke, position and transformation properties?

Somewhere in the DOM, there's something defining the properties of the shape highlighted in blue, giving it the white fill and path definition of a tiger's whisker. Where is this data and how can I access it?

---

If it's not possible in IE8 as-is, an answer involving plugins, toolbars or non-IE8 VML processors would be better than nothing. If there's a way to do it in super-old versions of IE, that's fine, they can all be obtained freely and legally for testing purposes via http://modern.ie

Headforemost

I suspect that proper VML debugging simply isn't possible in IE, as it was a deprecated technology long before the IE developer tools were even written. – Deflect

@Deflect Thanks for the comment, but are you sure it was deprecated before dev tools? IE didn't get SVG support until IE9 and dev tools was introduced in IE8 (and available as a toolbar in IE6 and IE7 apparently according to wikipedia). I know it's considered deprecated now (though us poor sods who need to support IE8 still need to use it sometimes...), but I thought Microsoft were still invested in it and using it for a few years after the launch of Dev Tools – Headforemost

Answer 1

update: It seems like in IE11 set to IE8 mode, if you log the VML element or its node, you can browse it without needing Firebug. Also, if you can target the VML object in the console (e.g. window.someVML = raphaelElement.node; then window.someVML in the console), you can change elements of its style like this: someVML.style.outline = "#000000 5px solid"; and it live-updates and updates the currentStyle element. However, I can't find any way to do this with fill or stroke which are stored as sub-xml, short of overwriting the innerHTML.

---

I've found something that shows the current properties of the VML - they aren't editable, but it's better than nothing:

1. Get the Firebug Lite bookmarklet for IE8
2. Run the Raphael in IE8 with Firebug Lite running, with console.log(); logging the Raphael objects you want to inspect the VML of.
3. In the Firebug Lite console, click on the appropriate green Raphaël’s object { } entry

4. Expand node - this is the actual VML, as it actually is on the page. Particular properties to look at:

   • outerHTML contains VML path definitions and most other properties in XML form
   • offsetLeft, offsetTop
   • currentStyle contains height, width, left, top; there's also runtimeStyle (style seems to be the same unreliable data as shown in IE dev tools)
   • I can't find fill or stroke data anywhere (including the fill.rvml and stroke.rvml children) except for in the XML in outerHTML

---

Note that if you want to easily compare the actual VML output with the Raphael object properties, you can see the Raphael object's properties attrs (path,fill,stroke,path...) and matrix alongside node, and paper steps you back to the parent Raphael paper object.

So, it's usually better to log the Raphael object than console.log(someRaphObject.node);, so that you can do this side-by-side comparison of expected result via Raphael vs actual result in VML.

---

Important note about Firebug Lite and IE - it can mess up the normal IE dev tools console. Some ways to work around that here.

Headforemost

Answer 2

I'm going to guess that it's IE8's dev tools that are the problem here, rather than the DOM not being correct (after all, the VML is displaying correctly), so let's work down that avenue and think about alternative ways of viewing the DOM using a better toolkit.

1. I'm not a fan of compatibility mode, but in this case it might be worth a thought. Given that IE10's dev tools are significantly more powerful than those in IE8, have you tried this in IE10's IE8-compat mode (or even its IE7-compat mode)? It would use VML in this mode just like a normal copy of IE8, but you'd have the IE10 dev tools available, which are a lot better than in IE8, so you might be able to get a better picture of what's happening.

2. Another option would be to use Firebug Lite, which is a cut-down version of Firefox's dev tool Firebug that runs on any browser. I haven't used it in a while as all the other browsers now have sufficiently good dev tools that it's not really needed, but it's a decent little utility, and is especially useful for browsing the DOM, which is what you want in this case. It might prove more capable in this specific case than IE8's own built-in dev tools.

Hope those ideas are helpful.

But one final thought:

You mention that you're trying to write "separate code to make the feature work in 'SVG mode' and 'VML mode'.

I'm puzzled by this, because you're using Raphael, and the whole point of Raphael is that it does this for you; the developer just writes to the Raphael object, and Raphael deals with the separate code branches for VML or SVG. Given that, I'm not sure why you'd feel the need to write your own SVG/VML code paths.

But as an added point, if you are going to write VML code, I note that you discuss this being compatible with both IE7 and IE8, so I should warn you that the VML language changed significantly between those two IE versions. Again, Raphael deals with the differences internally and transparently to you the developer, but if you're writing VML code manually you'll need to be aware of those differences. You can read a bit about this here: http://ajaxian.com/archives/the-vml-changes-in-ie-8

Outdated

Nice idea, and thanks for the suggestions - unfortunately, IE10 dev tools in IE8 mode and IE7 mode, and Firebug in IE10 in both modes, all give the same results as shown above. It's given me another idea though: googling around I saw that a lot of VML developers complained when IE8 came out that it had worse VML support than IE7, moaning "Why is every IE version buggier than the last?" - so I'm going to try Firebug Lite and if possible IE Dev Tools Toolbar in real IE7 and, if that doesn't work, real IE6 (shudders at the thought). – Headforemost

Yep. Re VML being buggier in IE8 than IE7, this is well documented (I've added a paragraph to the answer to that effect). – Outdated

Thanks for the link, that's useful. To answer the puzzlement - I mentioned that I was trying to look into trying to add some features to Raphael - features that currently don't exist, such as finer non-cufon text manipulation and non-rectangle clipping mask paths that clip vectors. Raphael sets up the object structure and has a lot of useful features, but doesn't cover everything. The problem is, even just trying to do this will be nightmarish if I can't debug the VML side. – Headforemost

ah right, I missed that bit of detail from the question. That makes more sense now. :-) Have you tried talking to the Raphael developers? They'd probably have some insights that might help. – Outdated

AFAIK there's one official Raphael developer (Dmitry) and he's on a hiatus from the project - and tends to just say things are impossible when he's not. I've made some progress though - if you get the Raphael object into console.log() in Firebug Lite and hit 'node' you can see the currentStyle and xml outerhtml properties – Headforemost