使用Windows 8模拟器与VS 2012调试 IE10 的触摸事件以及你的交互式设计

junwong 发布于 2012/07/16 12:33
阅读 1K+
收藏 0
我有幸现在有一个Windows 8的平板电脑,但也在寻找一个简单的方法让我不需要每次都启动平板电脑 来测试一些功能(尤其是触摸相关的)。最后我找到了一些方法让我不需要使用硬件设备就能测试这些 功能。

在开始教程之前,你必须先安装:
1 – 下载并安装 Windows 8 Release Preview : http://preview.windows.com 
2 – 下载并安装 Visual Studio 2012 RC Express for Windows 8http://msdn.microsoft.com/en-us/windows/apps/br229516

Internet Explorer 10的触摸事件模型
如果你不知道这些触摸事件是如何工作的,你可以参考这三篇文章:

用 Windows 8模拟器去模拟触摸
在你安装SDK的时候,Windows 8模拟器就被安装进去了,它可以帮助你测试/调试你的 Metro 风格App。你可以从这里了解更多: First look at Windows Simulator

现在开始:
1 - 启动模拟器Microsoft.Windows.Simulator.exe,它一般在“Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\11.0”目录下


然后点击桌面按钮

2 - 启动 IE10,导航到“Internet Options” 的“Advanced” 标签。检测"Disable script debugging (Internet Explorer)"与"Disable script debugging (Other)"是否都没有被选中


3 - 随便导航到一个可以测试的url去测试。例如用这个Demo:Finger Painting from the IE Test Drive. 当使用模拟器测试时,通过下图的两个按钮就能分别测试鼠标点击与触摸模式的区别

首先,你会看到这样的结果:


但是只要你点击下图这个按钮:


就能模拟出旋转以及双指触摸的效果。


来看看这个Demo:  Browser Surface  ,能更好的体现双指触摸的效果


通过模拟器,你可以通过触摸手势模拟出放缩以及旋转效果。

Visual Studio 2012 来测试 JavaScript
如果你希望更深入地了解这些,你肯定需要测试你的JavaScript代码。第一个方法就是直接在IE10 developer tools  上按F12。
另一个方法就是使用 Visual Studio 2012的调试器。以下就是所有步骤:
1 - 启动 Visual Studio 2012 然后点击"Debug -> Attach to Process..."


2 - 找到"iexplorer.exe"进入然后附加它。


3 -  如果一切进展顺利的话,那么结果如下图:


如果你的结果不像上图那样,那么你可能要去看看你是否附加了错误的 iexplorer.exe或者你忘了取消选中 script debugging 选项。

你可以从"Solution Explorer"的"Script Documents"节点上看到所有的JavaScript文件。

4 - 打开"demo.js"文件然后在第136行添加一个断点。

5 - 启动调试,会在运行到断点处自动暂停。


此时你就能进入代码中单步查看JavaScript控制台的输出,也可以右键点击方法名去查看JavaScript方法等等。

总之,你可以不需要任何硬件设备就是测试IE10下的JavaScript的触摸逻辑。但是最后我们是肯定需要用真实设备来测试最后的发布版本的,只是能用模拟器就解决这个问题确实能在开发时为我们省去不少时间。

测试/调试你的交互式设计
别忘了 Win8模拟器以及VS 2012也是测试应用交互式设计是否良好的利器。下面来看看它是如何做到的。
首先要寻找最能体现良好交互设计的演示网站。我最后选择了这个http://garretkeizer.com/ ,并配有几张截图。你可以可以从http://mediaqueri.es去寻找其他比较酷的网站。

下图就是用模拟器的IE10默认设置查看该网页的效果


现在看看模拟器提供了那些比较酷的设置

1 - 你能通过这两个按钮测试网页是横向还是纵向的显示




2 - 你也能通过以下选项随意更改屏幕分辨率来测试不同情况下的网页显示


3 - 比如下图就是在 2560 x 1440 分辨率下的截图(前面对应的截图是 1366x768分辨率)


4 - 如果想知道更深,你可以使用VS 2012提供的 DOM Explorer tool 来检阅以及即时编辑CSS。例如一旦IE10被附加了调试器,你将能看到一个名称为"DOM Explorer"的窗口。当你的鼠标停留在HTML节点上时,在模拟器上你可以看到都有对应的不同区域的高亮显示


原文链接 , OSChina.NET 原创翻译
加载中
返回顶部
顶部