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

Answer 1

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

Answer 2

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.