幸运的是,拥有一台Windows 8平板设备,一直在寻找一种更简单的方法来对传统笔记本电脑进行基本测试,而不必每次都切换到平板设备。在寻找过程中,发现了一些技巧和窍门,这些技巧和窍门可能会帮助在不使用触屏设备的情况下调试代码中的IE10触摸事件。一个不错的副作用是:相同的方法也可以帮助测试和调试响应式网页设计!
要按照本教程操作,首先需要: 1. 下载并安装Windows 8 Release Preview到机器上: 2. 下载并安装Visual Studio 2012 RC Express for Windows 8:
如果还不了解触摸实现方式,应该首先阅读以下三篇文章:
Windows 8模拟器用于模拟触摸 Windows模拟器与开发工具一起安装,通常设计用于帮助测试和调试Metro风格应用。可以在这里了解更多细节: 不过,没有什么可以阻止使用它来调试在模拟器中运行的IE10中的Web应用程序。让向展示如何操作。
1. 通过启动位于"Program Files (x86)\Common Files\Microsoft Shared\Windows Simulator\11.0"中的Microsoft.Windows.Simulator.exe来启动模拟器,并点击桌面图标。 2. 启动IE10,导航到"Internet选项"和"高级"标签。确保两个"禁用脚本调试(Internet Explorer)"和"禁用脚本调试(其他)"都没有被选中。 3. 导航到想要测试和/或调试的URL。例如,让测试IE Test Drive中的"手指绘画"。使用模拟器,可以模拟传统的鼠标输入和/或触摸切换模式,使用这两个按钮:
首先,可能会认为会得到完全相同的结果:但点击这个按钮将显示有双触摸模拟用于缩放和旋转:这些双触摸功能更有趣的是使用这样的演示:
使用模拟器,将能够通过触摸手势模拟缩放和旋转。Visual Studio 2012调试JavaScript代码如果想更深入地测试和调试触摸体验,可能需要调试JavaScript代码。第一个明显的解决方案是按F12键使用IE10开发者工具。但在模拟器的小窗口中使用F12键并不十分舒适。
另一个很好的解决方案是使用Visual Studio 2012的调试器。以下是需要遵循的步骤: 1. 在主会话(模拟器之外),启动Visual Studio 2012 RC Express并导航到"DEBUG" -> "Attach to Process…" 2. 定位"iexplorer.exe"进程(类型为"x86, Script")以附加: 3. 如果一切顺利,应该使用Browser Surface演示得到这个结果: 如果情况并非如此,可能附加到了错误的iexplore.exe进程,或者忘记了取消选中禁用脚本调试选项。 如果选择了正确的进程,将在右侧窗格中看到所有JavaScript文件,位于名为"Solution Explorer"的节点下,名为"Script Documents"。
4. 然后让首先集中精力在JavaScript调试体验上。打开例如"demo.js"文件,并在第136行添加一个断点:
if (Options.inertiaBounce()) {
:
}
5. 取一张图片并使用触摸模拟抛出它,它应该自动进入Visual Studio:
可以逐步进入代码,查看JavaScript控制台输出,通过右键单击直接跳转到函数的定义等。好吧,将拥有一个非常高级的调试体验!
总之,可以完全调试JavaScript触摸逻辑以支持IE10,而不需要任何触屏设备。当然,需要在真正的触屏设备上测试最终代码和Web应用程序,以完美了解代码在真实条件下的行为。但仍然,这种方法可以帮助并节省时间。
测试和调试响应式设计 模拟器和VS 2012也可以是一些好朋友,帮助测试和调试响应式设计。让从回顾模拟器为此提供了什么开始。