Weinre入门手册(下篇)

2. Weinre进阶

2.1 Weinre工作原理


  如上图, Weinre由三部分组成,第一部分是运行在PC上的Debug Server, 它会与其他两部分交互,我们在测试页引入的那个target.js文件就存在于这个Server里, 如果你想找到那个Target文件, 可以通过下图的路径找到:

  第二部分是Debug Client, 这个就是我们上面一直在使用的运行在chrome中的调试客户端,它与Debug Server进行连接,并提供调试接口给用户。

  第三部分是Debug Target, 也就是运行在我们远程设备浏览器中的target.js, 它通过XHR与Server连接交互,将我们的代码暴露给Server, 来实现DOM Inspection与修改。

  我们实验的步骤也就是分别开启这三部分, 运行grunt后, 就开启了我们设置好的Debug Server, 然后在浏览器中输入http://ip:weinre端口就打开了Debug Client, 在调试页面中嵌入target.js代码, 在手机中打开页面, 就开启Debug Target。

2.2 Multi-User

  这里所说的多用户, 并不是支持多用户同时修改调试同一个页面, 只是提供了DebugServer的多用户共享功能, 也就是说无需每个人都开一个Weinre服务来调试自己的页面, 只要运行一个Debug Server, 各自在各自的Debug Client上调试自己的Debug Target。

  要使用这个功能, 需要给每个用户分配一个id, 他们通过自己的id来链接Weinre服务, 这里仅仅是一个简单的标识, 任何人都可以通过别人的id调试别人的页面, 造成混乱, Weinre并没有提供任何安全服务来避免这种情况, 按照官网的文档, 这个id需要保密, 通过这种方式,可以勉强解决这个问题。Weinre默认就是以多用户模式启动, 只是我们没有设置id, 它会自动为我们分配一个叫做anonymous的id。

  按照上面的解释, 可以知道, 我们只要修改Debug Client的访问路径和Debug Target中嵌入的target.js的url, 就可以使用这个功能了, 具体的说就是在各自的url最后加入#id(id为用户分配的id)即可。下图是修改后的打开Debug Client的路径:

下图是修改后嵌入调试页面的Debug Target路径:

2.3 Weinre安全性

   就像官网中说的:About security for weinre: there is none. Weinre解决的问题安全问题就是限制Debug Server的访问权限, 它的实现也是通过简单的设置boundHost选项来完成, 如果启动Server时设置boundHost选项为localhost, 那么只有运行在localhost上的软件能与Debug Server交互, 如果设置为"-all-"或其他的话, 那么任何能访问运行Debug Server设备的远程设备, 都可以与Debug Server交互, 这就可能造成信息泄露。

2.4 Weinre与其他类似工具比较

  • JSConsole

  这个工具与Weinre功能类似, 更像是简化版的Weinre, 它相对于Weinre的优点就是提供了现成了线上Debug Server与Debug Client, 无需用户在PC本地运行Debug服务, 只要在需要调试的页面像Weinre一样加入一个target库, 就可以在JSConsole官网上调试这个页面了。点击这里体验JSConsole

  使用步骤:打开JSConsole官网, 输入":listen"后, 会得到如下的一个url, 这个就是target库, 我们要将输出的结果复制到要调试的页面中, 接下来在手机上访问这个调试页面,如果页面中有console输出, 那么就可以在网站上看到输出的结果。

  这个工具更专注于Console功能, 它还提供了一个运行在苹果设备上的软件, 下载地址如下:下载链接。与这个app类似的还有一款收费软件叫做Bugaboo, 它也是运行在苹果设备上的app, 同样是在手机上提供了一个console功能。

2.5 远程调试未来的发展

  从Weinre的功能介绍已经可以看出存在很多不足了, 这些功能的欠缺就是远程调试未来要解决的问题, 例如调试javascript、 完善Resources资源的查看包括Cookie等、Network资源加载的显示的完整性等。因为Weinre是使用javascript编写的, 并不支持底层的断点调试等功能。现在的V8并不包含调试模块, 只有最新的webkit协议才拥有web调试特性, 如果手机上的浏览器具有了这样的调试特性, 那么只要通过远程协议就可以在PC上调试远程mobile页面。BlackBerry, 与Opera Mobile浏览器已经加入了远程调试特性, 通过下面的链接可以学习如何使用这样的新特性:BlackBerry, Opera Mobile

3. Q&A

  • Q: console.log无法显示在Client的ConsolePanel上。

  A: 要确保webview已经完全加载并且在Weinre上注册成功, 只有满足这两个条件才能看到console.log的内容。判断是否注册成功的方法是, 在Client的Targetlist中能看到远程端设备的信息。下图不满足条件, 所以在Console面板中看不到输出信息。

  需要使用setTimeout加一个延时,保证输出信息在连接成功之后发生。

  • Q: Network Panel都能看到哪些信息?

  A: 如果webview已经与Client建立了链接, 那么在Network Panel中可以看到ajax请求的数据。为什么看不到页面加载过程的请求的原因同上(注册成功前, 无法获取到)。

  • Q:为什么不支持JS调试

  A: Chrome开发者工具使用了很多native的代码来实现调试功能,而Weinre是完全基于JS的,没有包含任何native代码, JS并没有对本地的断点等的功能的支持。

  • Q: 页面有时候没过一会显示的数据就不见了是怎么回事?

  A: 如果出现这种情况, 可能是超时造成的, 在启动Weinre的时候, 可以带上deathTimeout参数延长超时时长。

References

[1] Debugging Mobile Javascript with WEINRE

[2] Debugging mobile web applications with weinre

[3] Web移动应用调试工具—Weinre

[4] Weinre官网

[5] Console.log not working with weinre?

[6] Weinre Issues问题汇总

[7] Debugging Mobile Web Apps: Weinre and JSConsole Now, Remote WebKit Eventually

[8] Debugging Mobile Web Apps: Weinre and JSConsole Now, Remote WebKit Eventually翻译版

[9] JSConsole工具


相关阅读:Weinre入门手册(上篇)

网易云新用户大礼包:https://www.163yun.com/gift

本文来自网易实践者社区,经作者哈乐授权发布。