使用Windows 8模拟器和VS 2012调试IE10触摸事件和您的响应式Web设计
5.00/5 (1投票)
使用 Windows 8 模拟器和 VS 2012 调试 IE10 触摸事件和您的响应式网页设计。
我目前正在处理 IE10 的触摸事件，即使我很幸运拥有一台 Windows 8 平板电脑，我也一直在寻找一种更简单的方法来在我的经典笔记本电脑上进行基本测试，而无需每次都切换到平板电脑。在寻找过程中，我发现了一些技巧和窍门，可以在不使用触摸设备的情况下帮助您调试代码中的 IE10 触摸事件。一个不错的附带好处是：相同的方法还可以帮助您测试和调试响应式网页设计！
先决条件：要学习本教程，您首先需要
1 – 下载并安装 Windows 8 Release Preview： http://preview.windows.com
2 – 下载并安装 Visual Studio 2012 RC Express for Windows 8： http://msdn.microsoft.com/en-us/windows/apps/br229516
Internet Explorer 10 的触摸事件模型
如果您还不了解我们的触摸实现是如何工作的，您应该先阅读这 3 篇文章
作为补充资源，您可以查看 Pointer.JS 库，该库模拟了 IE10 在其他浏览器上的模型。
Windows 8 模拟器用于模拟触摸
Windows 模拟器随开发工具一起安装，通常用于帮助您测试和调试 Metro 风格应用程序。您可以在这里了解更多详细信息： Windows 模拟器初探
尽管如此，没有任何东西可以阻止我们使用它来调试在模拟器中运行的 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 – 如果一切顺利，您应该在“浏览器表面”演示中使用此结果
如果不是这种情况，您可能附加到了错误的 iexplore.exe 进程，或者您忘记取消选中禁用脚本调试选项。
如果您选择了正确的进程，您将在右侧窗格中名为“**Solution Explorer**”的节点下的“**Script Documents**”下看到所有 JavaScript 文件。
4 – 那么，让我们首先将精力集中在 JavaScript 调试体验上。例如，打开“**demo.js**”文件，然后在第 136 行添加一个断点：if (Options.inertiaBounce()) {
5 – 拿起一张图片并使用触摸模拟进行拖动，它应该会自动中断到 Visual Studio
然后您可以单步执行代码，查看 JavaScript 控制台输出，通过右键单击函数直接跳转到其定义，等等。是的，您将获得非常高级的调试体验！
总而言之，您可以在没有任何触摸设备的情况下完全调试您的 JavaScript 触摸逻辑以支持 IE10。当然，您需要在真实的触摸设备上测试您的最终代码和 Web 应用程序，才能完美了解您的代码在真实条件下的行为。但仍然，这种方法可以帮助您并为您节省时间。
测试和调试您的响应式设计
模拟器和 VS 2012 也可以成为帮助您测试和调试响应式设计的得力助手。让我们先回顾一下模拟器在这方面提供的功能。
我在网上搜索了实现响应式设计原则的最佳网站。我选择使用这个网站：http://garretkeizer.com/ 进行以下截图。您可以在此处找到其他很棒的网站进行测试：http://mediaqueri.es
这是他的网站在 Internet Explorer 10 中的设计，使用了模拟器的默认设置
现在让我们回顾一下模拟器的一些很酷的选项，以便进一步操作。
1 – 您可以通过单击这些按钮来测试设计在纵向或横向模式下的变化
这是所选网站的结果
2 – 您还可以通过单击此按钮模拟各种外形尺寸和分辨率显示
3 – 这是同一网站在2560x1440下的结果（与前面截图的默认 1366x768 相比）
4 – 现在，如果您想进一步深入，您可以使用 VS 2012 中强大的DOM 浏览器工具来帮助您查看和实时编辑您的 CSS。例如，一旦调试器附加，您将看到一个名为“DOM Explorer”的窗口。当您的鼠标悬停在 HTML 节点上时，您将在模拟器中实时看到各种区域被高亮显示
当然，您将能够在 Visual Studio 中查看、编辑和跟踪您的样式，以潜在地修复您的 CSS 设计。
我希望这些小技巧能帮助到你们中的一些人并节省时间。您应该留意这些免费工具！