Search code examples
internet-explorerdebuggingraphaelvmlie-developer-tools

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

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?

enter image description here

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

Solution

  • 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.