移动端debug调试方案调研

最近开发一个移动端H5的需求,发现了一个诡异的问题: 在ios上对于 new Date(2019.1.23) 这种代码返回值居然是 invalid date,甚是奇怪. 但是因为H5是放在app的webview中运行的,不能像android一样直接直接调试. 只好借助于erude这个移动端的调试库勉强查找到问题. 但是在查看问题的过程中有以下痛点:

• 不能很方便在全局注入js命令来修改url,不能很方便查看全局挂载对象
  因为真机测试的时候只能访问test或者prod环境,我需要进入H5的时候,在erude中通过类似location.href=‘http://localhost.mm.com'这种方式来把webview容器的当前访问链接改成我的本地链接.我需要在电脑上拼接好这个js命令之后,通过内部沟通工具发送到手机,然后复制粘贴在erude的命令输入框内,由于手机屏太小,比较难受.
• 查看页面报错日志不太方便
  手机屏太小,勉强能看到报错信息.
• dom信息查看有修改工具不完善
  手机屏太小勉强能看到dom,但是不能修改dom,并且不能设置样式等操作.

所以期望能把chrome-dev-tools的功能方便在手机端使用就好了.随之调研了业内的移动端调试方案.

工具框架	主要功能	参考资料
spy-debugger	1、页面调试＋抓包 2、操作简单，无需USB连接设备 3、支持HTTPS。 4、spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy。 5、自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用了SSL pinning技术的原生App不造成任何影