使用 Weinre ，我们可以在本地电脑的浏览器来调试在模拟器上的应用。Weinre 是基于 Chrome Developer Tools ，所在用起来跟 Chrome 浏览器的开发者工具差不多。

下面我们可以先去安装一个 Weinre ，然后再看一下怎么样使用它来调试应用。

先安装一下 node.js ，在之前的视频里我们已经安装好了 … 然后打开 终端工具 …

我们使用 npm 来安装 Weinre … 输入 sudo npm -g install weinre

安装好以后，再输入 weinre ，可以启动 weinre 服务 … 提示成功以后 … 打开浏览器 ..

输入 localhost:8080 … 这样可以打开 weinre 服务在本地电脑上的站点 …

这里我们可以把 localhost 改成本地电脑的调试的 ip 地址 … 也就是 127.0.0.1 ….

这个 debug client user interface …. 就是调试应用的界面 … 点击后面的链接 … 可以在新的标签里打开这个链接 ….

你会发现，它跟 Chrome 浏览器的开发者工具长的差不多 …

再回到 weinre 站点的页面上 … 我们需要在应用的网页上嵌入一个 Target Script …. 这样才能使用 weinre 调试应用…

复制一下这行代码 ….

再打开我们的应用的主页 … 也就是应用项目目录下的 www 这个目录下面的 index.html ….

把复制的代码粘贴到页面上 …. 然后保存一下…

Feature

另外我们还需要去配置一下应用的 config.xml … 这个文件在应用项目目录下面的 www 这个目录里面。

在这个文件里，需要输入一组 feature 标签 ….

它的作用就是启用 debug-server ，调试服务器 …. 然后指定一下调度服务器的 ip 地址 …. 这里我们设置成了 127.0.0.1 ，表示使用本地电脑上的调试服务器。

在它的下面，我们需要再指定一下这个应用的 key ，也就是应用的唯一的标识符 ….

保存 ….

编译并安装

回到终端工具，新建一个窗口 … 进入到应用目录 … 再去重新编译并安装一下 iOS 的应用 … phonegap run ios …

预览

如果一切正常的话，在调度的界面上，Targets 下面的文字会变成绿色的。

打开 Elements 选项卡 … 可以看到应用的页面上的代码 … 你可以像调试一般的网页一样 … 修改页面上的元素 … 还有元素上应用的样式等等 ….