internet-explorer - 如何在IE中调试或查看XML输出？ (例如来自Raphael)

我正在与Raphael.js一起制作跨浏览器的交互式矢量图形，试图添加具有单独代码的新功能，以使该功能在“SVG模式”和“VML模式”下工作。

我的问题是，我看不到任何方法可以检查，调试，更改甚至看不到Raphael创建的实际IE VML输出的定义属性。

在SVG中，这很容易-您只需使用Firebug或Inspect Element来深入研究DOM，然后SVG就可以在其中使用正确的标记。但是，在VML中的IE7和IE8中，在IE浏览器工具中单击“刷新”后，有很多<shape/>实体-但它们都声称具有相同的属性和标记。实际的定义VML属性无处可见。

这是一个示例，显示IE8模式下的Raphael tiger demo(IE7模式相同)。但是，查看DOM(使用IE开发人员工具)，看起来它不应该是老虎，应该只是left:0px;top:0px;上堆积的1px x 1px形状。

在DOM或最终输出中，形状的填充，路径，笔触，位置和变换属性的定义在哪里？

在DOM中的某处，有一些定义了以蓝色突出显示的形状的属性，从而赋予了它白色填充和老虎须晶的路径定义。这些数据在哪里，我该如何访问？

如果无法按原样在IE8中实现，那么涉及插件，工具栏或非IE8 VML处理器的答案总比没有好。如果有办法在IE的超旧版本中做到这一点，那么可以通过http://modern.ie自由合法地获取它们，以进行测试

最佳答案

更新:似乎在将IE11设置为IE8模式时，如果您记录VML元素或其节点，则无需Firebug就可以浏览它。此外，如果您可以在控制台中定位VML对象(例如，控制台中的window.someVML = raphaelElement.node;然后是window.someVML)，则可以更改其样式元素，如下所示:someVML.style.outline = "#000000 5px solid";，它可以实时更新和更新currentStyle元素。但是，除了覆盖fill之外，我找不到用存储在sub-xml中的stroke或innerHTML做到这一点的任何方法。

我发现一些东西可以显示VML的当前属性-它们是不可编辑的，但是总比没有好:

获取IE8的Firebug Lite书签

在运行Firebug Lite的IE8中运行Raphael，并通过 console.log();记录要检查其VML的Raphael对象。

在Firebug Lite控制台中，单击相应的绿色Raphaël’s object { }条目

展开 node -这是实际的VML，因为它实际上在页面上。要查看的特殊属性:

outerHTML包含VML路径定义和XML格式

的大多数其他属性

offsetLeft，offsetTop

currentStyle包含height，width，left，top；还有runtimeStyle(style似乎是与IE dev工具中所示的数据一样不可靠的数据)

除了在outerHTML的XML中存在，我在任何地方(包括fill.rvml和stroke.rvml子代)都找不到填充或笔触数据

请注意，如果您想轻松地将实际VML输出与Raphael对象属性进行比较，则可以看到Raphael对象的属性attrs(path，fill，stroke，path ...)和matrix以及node和paper将您返回到。父Raphael纸对象。

因此，通常记录Raphael对象要比console.log(someRaphObject.node);更好，这样您就可以通过Raphael与VML中的实际结果进行预期结果的并排比较。

关于Firebug Lite和IE的重要说明-可以mess up the normal IE dev tools console。一些ways to work around that here。

关于internet-explorer - 如何在IE中调试或查看XML输出？ (例如来自Raphael)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17471380/