开发微信公众号时,直接在 chrome 浏览器打开,总是会出现微信访问,如果这时候去掉微信访问,也行,但是来回注释总是觉得不爽。而且有时候是测试或线上环境出了 bug,又找不到原因,这时候,chrome 调试微信就有了作用。
准备工作
准备一个安卓机并且安装有微信;
准备好连接电脑的数据线;
电脑上安装有 chrome 浏览器。
操作步骤
-
手机打开微信,在微信中访问连接(可以复制此链接,用文件传输助手发送出去,然后点击链接打开):http://debugx5.qq.com,或者微信扫描下方二维码:
-
如果已经有 x5 插件,会显示如下页面,跳转步骤5;如果是提示安装 x5,跳转步骤3。
如果提示你打开链接 http://debugtbs.qq.com 安装 x5 插件,根据提示做就好了。注意,都是在手机微信中操作。
安装好后,一般会提示你微信输入并发送链接 debugmm.qq.com/?forcex5=true 然后点击链接,跟着做就好。
-
打开 http://debugx5.qq.com 链接,选择“信息”,勾选“打开TBS内核Inspector调试功能”。点击后就会直接退出,你可以再次打开链接查看是否勾选。
手机连接电脑,并打开开发者模式中的 usb 调试。不同型号手机略有不同,可自行百度打开方式。我的是华为,我这里就提供下华为的打开方式:
- 华为的开发者模式,打开方式比较不同,要注意:设置 -- 关于本机 -- 版本号
注意,这里的版本号,你点击一下,下发提示您已处于开发者模式,无需进行此操作,就代表你已经打开开发者模式。而一般,没打开过的,都是没有任何提示,此时,请连续多次点击,直到提示已经打开开发者模式即可。 - 打开 USB 调试。当进入开发者模式后,才能打开 USB 调试,所以上一步必须先完成。设置 -- 系统和更新(系统) -- 开发人员选项 -- USB 调试(打开)
-
连接好手机后,在谷歌浏览器地址栏输入 chrome://inspect/#devices ,之后会出现以下类似页面:
-
手机微信中打开需要调试的页面,谷歌浏览器chrome://inspect/#devices页面中会多一条你打开的数据,点击这条你需要调试的链接下的 “inspect”,chrome 会重新打开一个窗口用于调试。
只要手机一直是开发者模式,点击手机上微信,在电脑 chrome 上就会同步联动,并且可以调试,很方便。但是注意,这个调试和手机同步,手机熄屏了,这边也没法调了。