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

Question

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

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

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

这是一个显示 Raphael tiger demo 的示例在 IE8 模式下(IE7 模式是一样的)。然而，查看DOM(使用IE Developer Tools)，它看起来不应该是老虎，而应该只是一堆1px x 1px的形状堆积在left:0px;top:0px; .

在 DOM 或最终输出中，形状的填充、路径、描边、位置和转换属性的定义在哪里？



在 DOM 中的某个地方，有一些东西定义了以蓝色突出显示的形状的属性，赋予它白色填充和虎须的路径定义。这些数据在哪里以及如何访问它？

如果在 IE8 中无法按原样使用，那么包含插件、工具栏或非 IE8 VML 处理器的答案总比没有好。如果有办法在超旧版本的 IE 中做到这一点，那很好，它们都可以通过 http://modern.ie 自由合法地获得用于测试目的。

Answer 1

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

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

获取 Firebug Lite IE8 书签

在运行 Firebug Lite 的 IE8 中运行 Raphael，使用 console.log();记录 Raphael 对象 您要检查的 VML。

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

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

outerHTML包含 XML 格式的 VML 路径定义和大多数其他属性

offsetLeft , offsetTop

currentStyle包含 height , width , left , top ;还有runtimeStyle ( style 似乎与 IE 开发工具中显示的数据一样不可靠)

除了 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 .