在Web上,使用 Windows 8模拟器 & vs 2012调试IE10触摸事件&你的响应设计

分享于 

6分钟阅读

Web开发

  繁體

在10天内开发 Windows 8应用程序。

虽然 lucky IE10,但我一直在寻找一种简单的方法来在我的经典笔记本电脑上做基本测试,而不是每次都切换到平板电脑。 在寻找这一点时,我发现了几个&技巧,可以帮助你调试代码中的IE10触摸事件。 不错的副作用:同样的方法也会帮助你测试&调试你的响应式网页设计 !

pre必需:要遵循本教程,你需要首先:

1 - 在你的计算机上下载&安装 Windows 8版本预览: http://preview.windows.com
2 下载&安装 Visual Studio 2012 RC Express 用于 Windows 8: http://msdn.microsoft.com/en-us/windows/apps/br229516

IE 10的触摸事件模型

如果你还不知道我们的触摸实现如何工作,你应该首先阅读以下 3篇文章:

作为补充资源,你可能会看到 Pointer.JS 库,它模仿了其他浏览器的IE10模型。

模拟触摸的Windows 8仿真器

Windows 模拟器是用开发工具安装的,通常设计帮助你测试&调试地铁样式应用程序。 你可以在这里了解更多细节: 首先查看 Windows 模拟器。

不过,还没有什么可以阻止我们使用它来调试运行 inside IE10的web应用程序。 让我来向你们演示

1 - 通过启动位于 inside" Program Files ( x86 ) 通用 FilesMicrosoft SharedWindows Simulator11.0的Microsoft.Windows.Simulator.exe 启动模拟器。"

然后点击桌面 icon。

2 - 启动 IE10,导航到"互联网选项"和"高级"选项卡。 检查"禁用脚本调试( IE )"&"是否禁用脚本调试( 其它)"是否为检查:

3 - 导航到要测试和/或者调试的URL。 例如让我们测试这个演示: 手指绘画IE 测试驱动器。 使用模拟器,你可以使用这里 2按钮模拟经典鼠标输入和/或者触摸切换模式:

首先,你会认为你将得到完全相同的结果:

但是点击这个按钮

将向你展示,你有一个用于缩放&旋转的双触摸模拟:

这些双触摸功能更有趣,可以用于演示: 浏览器 Surface

使用模拟器,你可以通过触摸手势模拟缩放&旋转。

Visual Studio 2012调试JavaScript代码

如果你希望更深入地测试触摸经验的&调试,你可以能需要调试你的JavaScript代码。 第一个明显的解决方案是按F12键来使用IE10开发人员工具。 但是在模拟器的小窗口中使用F12键是不太舒服的。

另一个伟大的解决方案是使用 Visual Studio 2012的调试器。 以下是要遵循的步骤:

1 - 在主会话( 在模拟器之外) 上启动 Visual Studio 2012 RC Express并导航至"调试"->"附加到进程。 "

2 - 找到" iexplorer.exe"进程( 类型",脚本") 附加到:

3 - 如果一切正常,你应该使用浏览器 Surface 演示来使用这里结果:

如果不是这种情况,你可能已经附加到错误的 iexplore.exe 进程或者你忘了取消选中disable脚本调试选项"。

选择正确的进程后,你将在名为的节点下的右窗格中看到所有JavaScript文件。

4 - 让我们先把精力集中在JavaScript调试体验上。 打开" demo.js"文件并在第 136行添加一个断点: if (Options.inertiaBounce()) {:

拍摄一个图像并使用触摸屏进行投掷,它应该自动分成 Visual Studio:

然后可以进入代码,查看JavaScript控制台输出,直接跳到函数的定义,等等 是一个非常先进的调试体验。

总之,你可以完全调试你的JavaScript触摸逻辑,以支持IE10而无需任何触控设备。 当然,你需要在真正的触摸设备上测试 final 代码 & web应用程序,以了解代码的行为。 但是,这种方法可以帮助你并节省你的时间。

测试&调试你的响应式设计

模拟器和 vs 2012也可以是一些好朋友,帮助你测试&调试你的响应式设计。 让我们先来看看模拟器为我们提供了什么。

我已经在网上搜索了实现响应性设计原则的最佳网站。 我已经选择使用这个: http://garretkeizer.com/ 用于以下屏幕截图。 你可以找到其他很酷的网站进行测试: http://mediaqueri.es

以下是使用模拟器的缺省设置在 IE 10中的网站设计:

现在让我们回顾一下模拟器的一些很酷的选项。

1 - 你可以通过点击这些按钮来测试设计的变化,以为单位,或者以收费的横向模式为单位。

以下是所选网站的结果:

2 - 通过单击这里按钮,你还可以模拟各种形式的因素和分辨率:

1 - 这是以为单位的网站的结果:

现在你可以继续使用 vs DOM工具来帮助你查看CSS的动态编辑。 例如附加调试器后,你将看到一个名为"dom资源管理器"的窗口。 当鼠标悬停在HTML节点上时,你将看到在模拟器中突出显示的各个区域:

当然,你还可以对你的文章进行收费,编辑你的风格在 Visual Studio 中,以潜在修复你的CSS设计。

我希望这些小技巧能帮助你节省一些时间。 你应该关注这些免费的免费工具 !


Window  Windows  设计  event  Using  DEB  
相关文章