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

Question

I am working with Raphael.js to make interactive vector graphics with multiple browsers, trying to add a new function with separate code so that this function works in "SVG" and "VML" mode.

My problem is that I don’t see the ability to check, debug, modify or even see the defining properties of the actual output of the VML IE that Raphael creates.

---

In SVG, it's simple - you just dig into the DOM with Firebug or Inspect Element, and the SVG is right there with the correct markup. However, in IE7 and IE8 in VML, after clicking Refresh, there are many <shape/> objects in IE browser tools, but they all claim to have the same properties and layout. In fact, the defining properties of VML are nowhere to be seen.

Here is an example demonstrating the Raphael tiger demo in IE8 mode (IE7 mode is the same). However, looking at the DOM (using IE Developer Tools), it looks like it shouldn't be a tiger and should be nothing more than a bunch of 1px by 1px shapes folded in left:0px;top:0px; .

Where in the DOM or the end result are the definitions of the fill, path, stroke, position, and shape transform properties defined?

Somewhere in the DOM, there is something defining the properties of the figure highlighted in blue, giving it a definition of the white bay and the path of the tiger mustache. Where is this data and how can I access it?

---

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

Answer 1

update: It looks like IE8 is set to IE8 mode, if you register a VML element or its node, you can view it without having to use Firebug. In addition, if you can target a VML object in the console (for example, window.someVML = raphaelElement.node; then window.someVML in the console), you can change your style elements as follows: someVML.style.outline = "#000000 5px solid"; and it updates and updates the currentStyle element. However, I cannot find any way to do this with fill or stroke , which are stored as sub-xml without overwriting innerHTML .

---

I found something that shows the current VML properties - they are not editable, but this is better than nothing:

• Get Firebug Lite for IE8
• Launch Raphael in IE8 with Firebug Lite running, with console.log(); logging Raphael objects you want to test VML.
• In the Firebug Lite console, click the corresponding green entry for Raphaël's object { }

• Expand node is the actual VML as it is actually located on the page. Special 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 also runtimeStyle ( style appears to be the same invalid data, as shown in IE dev tools)
  • I cannot find fill or stroke data anywhere (including fill.rvml and stroke.rvml files), except for XML in outerHTML

---

Note: if you want to easily compare the actual VML output with the properties of the Raphael object, you can see the properties of the Raphael attrs object ( path , fill , stroke , path ...) and matrix next to the node , and paper returns you to the original paper Raphael object .

Thus, it is usually better to register a Raphael object than console.log(someRaphObject.node); so that you can perform this parallel comparison of the expected result through Raphael and the actual result in VML.

---

An important note about Firebug Lite and IE is that it can ruin the regular IE dev tool console . Some ways to get around this are here .

Answer 2

I'm going to guess that these are the IE8 dev tools that are the problem here, and not the DOM that is not correct (after all, VML is displayed correctly), so let's work along this path and think about alternative ways to view the DOM using the best tools.

• I'm not a fan of compatibility mode, but in this case, maybe it's worth considering. Given that IE10 dev tools are significantly more powerful than IE8, have you tried this in IE10-compatible IE10 mode (or even in IE7-compat mode)? It would use VML in this mode as a regular copy of IE8, but you would have the available IE10 dev tools, which are much better than IE8, so you could better understand what is going on.

• Another option is to use Firebug Lite , which is an abridged version of Firefox's Firebug developer that runs on any browser. I haven’t used it for a while, since all other browsers now have good enough tools for developers that they really don’t need, but this is a decent little utility and is especially useful for viewing the DOM what you want in this case. In this particular case it may be more capable than IE8's own built-in development tools.

Hope these ideas help.

But one last thought:

You mentioned that you are trying to write "separate code so that the function works in" SVG mode "and" VML mode ".

I am puzzled by this because you are using Raphael, and the whole point of Raphael is that he does it for you; the developer simply writes the Raphael object, and Raphael deals with separate code branches for VML or SVG. Given this, I'm not sure why you felt 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 are discussing that it is compatible with IE7 and IE8, so I must warn you that the VML language has changed significantly between these two versions of IE. Again, Raphael deals with internal and transparent differences with the developer, but if you write VML code manually, you need to know about these differences. You can read a little about it here: http://ajaxian.com/archives/the-vml-changes-in-ie-8