使用 Chrome 开发工具调试 PhoneGap 应用

PhoneGap/Cordova是创建移动APP一个很酷的框架,但也仍有些不足的地方,不能讲十全十美。 你怎么debug你的app? 假设你现在写一种不常规的app, 你需要给console.log更多的信息并且要十分耐心的调式你的app.有一种不完全的解决方案是使用Chrome Dev Tools. 说它不完全是因为有些PhoneGap特性不能在Chrome下运行, 但如果你的app更像一个移动网站,那么这会对你有很大的帮助。

我假设你已经可以编写一两个app且能调试,所以这里就不再涉及如何构建PhoneGap应用程序. 这里只会涉及到如何设置和使用 Chrome's Dev Tools来调试你的app。这篇文章实在Windows 7 下的说明,过两天将发布Mac版本的。

目录(文件夹)设置

我的所有的PhoneGap app共享同一个父级目录, "Repo". 所以我的建议是创建一个Repo站点. 当然, 有些人宁愿一个app为一个网站. 如果你也这么做, 这种方法依然可行, 只是改变了万盏的目录位置.

首先启动 Internet Information Services 7 (IIS7).。我的正还在开始菜单上,通常情况下他会在“管理工具”下。

 

在左侧点击三角形,展开您的计算机名 (我的电脑的名字为TROYMILESF42B)。

展开站点列表。

右击Sites(站点)。

使用 Chrome 开发工具调试 PhoneGap 应用

单击 Add Web Site...(创建站点...)。

给站点起一个名字,我的是"Repos"。

选择一个应用程序池,我选的是ASP.NET v4.0。

选择到你的根文件夹的路径。

 

如果你的机器运行的安全性高,您可能需要给它一个用户帐户运行授权。

使用 Chrome 开发工具调试 PhoneGap 应用

我强烈建议设置80端口以外的端口,我使用的8088。

选中“立即启动网站”复选框。

单击确定.

使用浏览器,浏览到你的网站.

使用 Chrome 开发工具调试 PhoneGap 应用

使用快捷键 Ctrl+Shift+I打开Chrome's developer's tools.

单击Sources 选项卡,然后单击箭头左上方显示的源文件。

使用 Chrome 开发工具调试 PhoneGap 应用

双击一个文件名,打开该文件

使用 Chrome 开发工具调试 PhoneGap 应用

设置一个断点, 只需点击一个行号的左侧。再次单击它可以禁用断点。右键单击它并点击,删除断点,将其删除。

这棒极了,但...

这些已经很棒了,但我们仍有问题. 我们不再有"设备就绪"事件,所以这很有可能破坏你的代码. 举个例子, 罗盘程序不经过PhoneGap的处理将不能正常有导航设备对象。 但,HTML的网站也好不了哪里去的。

我还在未解决"设备就绪"问题努力,但是还没有弄好.现在只是测试事件与替换了一些导航设备的测试数据。

PhoneGap 的详细介绍请点这里
PhoneGap 的下载地址请点这里

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3c403520447f264941974375a1277960.html