web爱好者 器粉新人
超级管理员
2015-08-14 10:52:13 

微信webview前端调试高清优化版 - (windows版)

 本帖最后由 web爱好者 于 2016-01-27 21:57:50 编辑
微信开发者工具支持X5内核
移动开发者在微信webview上调试页面一直是件非常蛋疼的事情,简直是盲人捉象,业界没有一款能够满足可视化、可编辑、可断点的综合调试能力目前业界常用的一些移动调试方法
  • chrome模拟器
  • weinre
  • fiddler
  • safari
来看下这几个调试方法的优劣:[td]
方法优点缺点
chrome模拟器可视化、可编辑、可断点非真机,与实际场景误差比较大
weinre跨平台无法调试js,且需额外引入调试js
fiddler远程代理到本地调试没有断点、可视化
safari调试ios上的app包裹的浏览器不支持跨平台
我们的业务开发通常在QB、微信、手Q场景,以上几种调试都难以满足快速迭代调试,排查问题也很费劲在过去半年里,我们X5内核经过不断的迭代,逐步探索出一套适合我们业务前端开发的一套调试工具(x5 inspect),x5 inspect彻底解决在QB、微信、手Q场景的真机远程调试,做到可视化编辑、可断点、可打log的完整闭环调试这期间经历了三个阶段:
  • 第一阶段:命令模式阶段,需要运行脚本,手工安装调试内核;
  • 第二阶段:半自动化阶段,按步骤执行操作流程即可安装一套调试工具;
  • 第三阶段:内核集成调试工具,开启开关即可使用。
接下来重点阐述第三阶段的调试方案

  • 下载tbs2.0调试包并解压得到apk(http://res.imtt.qq.com/tbs_inspect/tbs_2.0_inspector_beta.zip),放在手机sdcard/tbs/com.tencent.mm目录下,打开微信访问debugtbs.qq.com,先点击“清除TBS内核”,再点击“安装本地TBS内核”即可;(blink版本全量上线以后此步骤省略)

  • 微信访问一个页面,手机USB连接电脑,打开chrome浏览器,输入chrome://inspect即可

  • 微信访问页面如下图:

  • pc chrome浏览器访问chrome://inspect如下图:

  • 点击inspect按钮访问效果如下图:
 本主题由 web爱好者 于 2017-02-24 11:39:12 限时置顶
7 条回复
。嗯哈哈哈哈 铁杆器粉
超级管理员
器哥产品同学
活跃会员 热心会员 中秋节勋章
2015-08-14 11:48:35 沙发
建议同学加下这个QQ群哈,腾讯X5浏览服务用户群 323394017 
巴布豆_8bdp6g 器粉跑堂
2015-10-17 11:46:58 板凳
弄了好几次才成功,真好呀啊
Andy_NXNBqy 器粉跑堂
2016-01-14 12:02:13 地板
查找待调试网页失败,请尝试完全退出微信后重新打开重试(若反复失败请尝试重启手机)
这是什么情况?
멍하니고양이 器粉跑堂
2016-07-17 20:22:48 4#
Andy_NXNBqy 发表于 2016-01-14 12:02:13 
查找待调试网页失败,请尝试完全退出微信后重新打开重试(若反复失败请尝试重启手机)
这是什么情况? ...

兄弟,你这个问题解决了吗?
raccoon 器粉跑堂
2016-08-03 15:48:09 5#
。嗯哈哈哈哈 发表于 2015-08-14 11:48:35 
建议同学加下这个QQ群哈,腾讯X5浏览服务用户群 323394017

这个群号不对吧
A泼pple 器粉跑堂
2016-08-24 19:42:48 6#
Andy_NXNBqy 发表于 2016-01-14 12:02:13 
查找待调试网页失败,请尝试完全退出微信后重新打开重试(若反复失败请尝试重启手机)
这是什么情况? ...

你好,你这个问题,现在解决了吗,我也碰到这样的问题。
快乐人生_dRlOLz 器粉跑堂
2017-02-25 17:05:15 发自手机 7#
该楼层已被删除
回复

您需要 登录 后才可以回帖