如何在IE中调试或查看VML输出？ （例如从拉斐尔） [英] How to debug or see VML ouput in IE? (e.g. from Raphael)

问题描述

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

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

---

在SVG中，很简单 - 您只需使用Firebug或Inspect Element挖掘DOM，SVG就在那里正确的标记。然而，在IE7和IE8的VML中，在IE浏览器工具中点击刷新之后，有许多< shape /> 实体 - 但是它们都声称具有相同的属性和标记。实际定义的VML属性无处可见。

以下是一个示例，显示

解决方案

更新：似乎在IE11设置为IE8模式，如果您记录VML元素或其节点，则可以在不需要Firebug的情况下进行浏览。另外，如果您可以在控制台中定位VML对象（例如 window.someVML = raphaelElement.node; 然后 window.someVML 在控制台），您可以更改其样式的元素，如下所示： someVML.style.outline =＃000000 5px solid; ，它的实时更新和更新 currentStyle 元素。但是，我无法找到任何方式来执行此操作，而 fill 或 stroke 将其存储为sub-xml，没有覆盖 innerHTML 。

---

我找到了一些东西这显示了VML的当前属性 - 它们不可编辑，但它比没有更好：

1. 获取 Firebug Lite IE8的bookmarklet


2. 在IE8中运行Raphael，使用Firebug Lite， strong> console.log（）; 记录Raphael对象，您要检查的VML。


3. 在Firebug Lite控制台，点击相应的绿色Raphaël的对象{} 条目



4. 展开 节点 - 这是实际的VML，因为它实际上是在页面上。要查看的特殊属性：

   
   
   
   
   
   • outerHTML 包含VML路径定义和大多数其他属性以XML形式
   
   
   • offsetLeft ， offsetTop
   
   
   • currentStyle 包含 height ， width ， left ， top ;还有 runtimeStyle （ style 似乎与IE开发工具中显示的不可靠数据相同）
   
   
   • 我找不到填充或笔触数据（包括fill.rvml和stroke.rvml子项），除了在 outerHTML

---

请注意，如果您想轻松将实际的VML输出与Raphael对象属性进行比较，可以看到Raphael对象的属性 attrs （ path ， fill ， stroke ， path ...）和矩阵旁边节点和纸步骤你回到父Raphael纸张对象。

所以，通常最好记录Raphael对象比 console.log（someRaphObject.node）; ，以便您可以通过Raphael与VML中的实际结果进行并行比较。

---

关于Firebu的重要提示g Lite和IE - 它可以弄乱正常的IE开发工具控制台。一些在这里解决的方法。

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?

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

解决方案

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.

这篇关于如何在IE中调试或查看VML输出？ （例如从拉斐尔）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！