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:
- Get the Firebug Lite bookmarklet for IE8
- Run the Raphael in IE8 with Firebug Lite running, with
console.log();
logging the Raphael objects you want to inspect the VML of. - In the Firebug Lite console, click on the appropriate green
Raphaël’s object { }
entry 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 formoffsetLeft
,offsetTop
currentStyle
containsheight
,width
,left
,top
; there's alsoruntimeStyle
(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.