美文网首页让前端飞Web前端之路
chrome 调试微信,适用于已上线代码检查

chrome 调试微信,适用于已上线代码检查

作者: MaramLee | 来源:发表于2020-03-27 13:01 被阅读0次

开发微信公众号时,直接在 chrome 浏览器打开,总是会出现微信访问,如果这时候去掉微信访问,也行,但是来回注释总是觉得不爽。而且有时候是测试或线上环境出了 bug,又找不到原因,这时候,chrome 调试微信就有了作用。

准备工作

准备一个安卓机并且安装有微信;
准备好连接电脑的数据线;
电脑上安装有 chrome 浏览器。

操作步骤

  1. 手机打开微信,在微信中访问连接(可以复制此链接,用文件传输助手发送出去,然后点击链接打开):http://debugx5.qq.com,或者微信扫描下方二维码:

    http://debugx5.qq.com
  2. 如果已经有 x5 插件,会显示如下页面,跳转步骤5;如果是提示安装 x5,跳转步骤3。


    x5 调试页面
  3. 如果提示你打开链接 http://debugtbs.qq.com 安装 x5 插件,根据提示做就好了。注意,都是在手机微信中操作。

  4. 安装好后,一般会提示你微信输入并发送链接 debugmm.qq.com/?forcex5=true 然后点击链接,跟着做就好。

  5. 打开 http://debugx5.qq.com 链接,选择“信息”,勾选“打开TBS内核Inspector调试功能”。点击后就会直接退出,你可以再次打开链接查看是否勾选。

    打开TBS内核Inspector调试功能
  6. 手机连接电脑,并打开开发者模式中的 usb 调试。不同型号手机略有不同,可自行百度打开方式。我的是华为,我这里就提供下华为的打开方式:

  • 华为的开发者模式,打开方式比较不同,要注意:设置 -- 关于本机 -- 版本号
    注意,这里的版本号,你点击一下,下发提示您已处于开发者模式,无需进行此操作,就代表你已经打开开发者模式。而一般,没打开过的,都是没有任何提示,此时,请连续多次点击,直到提示已经打开开发者模式即可。
  • 打开 USB 调试。当进入开发者模式后,才能打开 USB 调试,所以上一步必须先完成。设置 -- 系统和更新(系统) -- 开发人员选项 -- USB 调试(打开)
  1. 连接好手机后,在谷歌浏览器地址栏输入 chrome://inspect/#devices ,之后会出现以下类似页面:

    谷歌调试
  2. 手机微信中打开需要调试的页面,谷歌浏览器chrome://inspect/#devices页面中会多一条你打开的数据,点击这条你需要调试的链接下的 “inspect”,chrome 会重新打开一个窗口用于调试。

    调试
  3. 只要手机一直是开发者模式,点击手机上微信,在电脑 chrome 上就会同步联动,并且可以调试,很方便。但是注意,这个调试和手机同步,手机熄屏了,这边也没法调了。

相关文章

  • chrome 调试微信,适用于已上线代码检查

    开发微信公众号时,直接在 chrome 浏览器打开,总是会出现微信访问,如果这时候去掉微信访问,也行,但是来回注释...

  • chrome调试微信

    打开微信,设法打开网址 http://debugx5.qq.com(推荐直接把这个网址发给文件传输助手,然后就可以...

  • 前端调试

    代码调试 chrome调试 代码调试 1.debugger 可以直接在编写代码的时候,加入debugger,打开浏...

  • chrome调试工具

    F12或者右键检查即可打开chrome调试工具 一、使用调试工具 1、ctrl+滚轮可以放大开发者工具代码大小 2...

  • RN笔记

    1、VSCode 代码格式化 2、Chrome 调试

  • 加快apk的构建速度,如何把编译时间从130秒降到17秒

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发 公司的项目代码比较多,每次调试改动java文...

  • 上线checkList清单

    上线checklist清单分类检查点检查人是否通过说明代码是否经过代码工具检查,严重问题已全部修正(idea工具推...

  • Chrome浏览器打开微信页面

    当我们打开微信浏览器的页面时,会提示这个 下面教大家用Chrome浏览器打开微信页面,以方便调试。 1、微信的UA...

  • Flutter开发调试

    代码开发后出问题都会需要调试,调试方法很重要。 1. 断点调试 断点调试跟大家熟悉的 Chrome 的断点调试基本...

  • Laravel 调试利器 Clockwork

    使用 Clockwork 扩展在 Chrome 浏览器中显示 Laravel 应用调试信息,适用于传统的web项目...

网友评论

    本文标题:chrome 调试微信,适用于已上线代码检查

    本文链接:https://www.haomeiwen.com/subject/acrluhtx.html