【微信】实战Adnroid上的小程序调试

2024-03-06 19:28

本文主要是介绍【微信】实战Adnroid上的小程序调试,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

▒ 目录 ▒

    • 🛫 导读
      • 需求
      • 开发环境
    • 1️⃣ XWeb 内核
      • 准备工作
      • 连接手机设备到电脑上
      • 查看效果
    • 2️⃣ X5 内核(遗弃了?)
      • vConsole
      • 操作步骤
    • 🛬 文章小结
    • 📖 参考资料

🛫 导读

需求

如今小程序得到了越来越广泛的应用,针对小程序的分析需求也越来越多。小程序作为前端开发的一个产品形态,必然绕不过Chrome浏览器相关技巧,如果能打开其调试界面,也就离成功不远了。

开发环境

版本号描述
文章日期2024-03-06
手机红米K50
操作系统Android 13
User-AgentMozilla/5.0 (Linux; Android 13; 22041211AC Build/TP1A.220624.014; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/116.0.0.0 Mobile Safari/537.36 XWEB/1160065 MMWEBSDK/20230405 MMWEBID/3573 MicroMessenger/8.0.35.2360(0x28002339) WeChat/arm64 Weixin NetType/WIFI Language/zh_CN ABI/arm64

1️⃣ XWeb 内核

微信在某一次更新中取消了 X5 内核,采用了 XWeb 内核。由此导致之前使用 vConsole 执行 JavaScript 代码的方法失效了。为了解决这个问题,我们需要采用最新的 XWeb 内核调试方法来执行 JavaScript 代码。

准备工作

手机端

  • 在微信中打开链接 http://debugxweb.qq.com/?inspector=true。
    或者直接扫二维码:
    在这里插入图片描述
  • 打开这个链接后如果跳转到微信官网,就算成功了。

电脑端

  • 在电脑上的 Microsoft Edge 浏览器地址栏中输入 edge://inspect/#devices 并打开。
    • 如果使用的是 Chrome 浏览器,地址栏中输入 chrome://inspect/#devices 并打开。
  • 确保以下两个选项处于选中状态。
    在这里插入图片描述

连接手机设备到电脑上

  • 确保手机处于非锁屏状态,并通过数据线与电脑连接。
  • 手机开启开发者模式,然后开启USB调试(不同的设备开启USB调试的方法可能不同,还请自行搜索)
  • 如果是首次连接,手机会弹出一个是否信任调试设备的提示,请选择 “信任”。
  • 这时,设备将会显示在远程目标(Remote Target)中(有数秒钟的延时)。
    在这里插入图片描述

查看效果

在远程目标(Remote Target)下方会出现设备型号,在手机微信内打开你想要快进的网页。
选择上面打开的网页,点击其左下角的 “inspect”,打开调试窗口。
在这里插入图片描述

2️⃣ X5 内核(遗弃了?)

随着微信版本不断的迭代更新,微信要求必须使用新版本才能登录,导致小编只能借其它博客的图片介绍了。
前几年小编也的确用过,总体感觉不太好用,新内核XWeb的确更方便。

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。
vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。
现在 vConsole 是微信小程序的官方调试工具。
小程序和小游戏的 vConsole 展示内容会有一定差别,小程序 vConsole示例:
在这里插入图片描述
小游戏 vConsole示例:
在这里插入图片描述

操作步骤

手机端

  • 在微信中打开链接 http://debugx5.qq.com/。
    或者直接扫二维码:
    在这里插入图片描述
  • 进去后,选择中间‘’信息‘’,然后一直往下翻,把vConsole打开,把下面两个Content Cache关掉。
    在这里插入图片描述
  • 然后打开你要调试的页面,你就你能看到右下角有个绿色按钮vConsole。点击就能查看你代码中console的内容了。

🛬 文章小结

这篇文章介绍了如何使用微信的XWeb内核和X5内核调试功能。
通过调试窗口,可以方便研发排错或者逆向调试等。

📖 参考资料

  • 使用微信的 XWeb 内核调试功能 https://blog.littlebell.top/posts/1704763378/
  • vConsole https://developers.weixin.qq.com/miniprogram/dev/framework/usability/vConsole.html
  • 微信客户端开启vconsole调试 https://blog.csdn.net/zwrlj527/article/details/117789582

ps: 文章中内容仅用于技术交流,请勿用于违规违法行为。

这篇关于【微信】实战Adnroid上的小程序调试的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/781077

相关文章

网页解析 lxml 库--实战

lxml库使用流程 lxml 是 Python 的第三方解析库,完全使用 Python 语言编写,它对 XPath表达式提供了良好的支 持,因此能够了高效地解析 HTML/XML 文档。本节讲解如何通过 lxml 库解析 HTML 文档。 pip install lxml lxm| 库提供了一个 etree 模块,该模块专门用来解析 HTML/XML 文档,下面来介绍一下 lxml 库

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

性能分析之MySQL索引实战案例

文章目录 一、前言二、准备三、MySQL索引优化四、MySQL 索引知识回顾五、总结 一、前言 在上一讲性能工具之 JProfiler 简单登录案例分析实战中已经发现SQL没有建立索引问题,本文将一起从代码层去分析为什么没有建立索引? 开源ERP项目地址:https://gitee.com/jishenghua/JSH_ERP 二、准备 打开IDEA找到登录请求资源路径位置

C#实战|大乐透选号器[6]:实现实时显示已选择的红蓝球数量

哈喽,你好啊,我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记,这是第6篇; 接下来实现实时显示当前选中红球数量,蓝球数量; 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时,在对应的位置显示实时已选择的红球、蓝球的数量; 02 标签名称 分别设置Label标签名称为:lblRedCount、lblBlueCount

滚雪球学Java(87):Java事务处理:JDBC的ACID属性与实战技巧!真有两下子!

咦咦咦,各位小可爱,我是你们的好伙伴——bug菌,今天又来给大家普及Java SE啦,别躲起来啊,听我讲干货还不快点赞,赞多了我就有动力讲得更嗨啦!所以呀,养成先点赞后阅读的好习惯,别被干货淹没了哦~ 🏆本文收录于「滚雪球学Java」专栏,专业攻坚指数级提升,助你一臂之力,带你早日登顶🚀,欢迎大家关注&&收藏!持续更新中,up!up!up!! 环境说明:Windows 10

uniapp设置微信小程序的交互反馈

链接:uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗: title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon:'error'是设置我们失败的logo 设置的文字上限是7个文字,如果需要设置的提示文字过长就需要设置icon并给

springboot实战学习(1)(开发模式与环境)

目录 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 (3)前端 二、开发模式 一、实战学习的引言 (1)前后端的大致学习模块 (2)后端 Validation:做参数校验Mybatis:做数据库的操作Redis:做缓存Junit:单元测试项目部署:springboot项目部署相关的知识 (3)前端 Vite:Vue项目的脚手架Router:路由Pina:状态管理Eleme

深度学习实战:如何利用CNN实现人脸识别考勤系统

1. 何为CNN及其在人脸识别中的应用 卷积神经网络(CNN)是深度学习中的核心技术之一,擅长处理图像数据。CNN通过卷积层提取图像的局部特征,在人脸识别领域尤其适用。CNN的多个层次可以逐步提取面部的特征,最终实现精确的身份识别。对于考勤系统而言,CNN可以自动从摄像头捕捉的视频流中检测并识别出员工的面部。 我们在该项目中采用了 RetinaFace 模型,它基于CNN的结构实现高效、精准的

项目实战系列三: 家居购项目 第四部分

购物车 🌳购物车🍆显示购物车🍆更改商品数量🍆清空购物车&&删除商品 🌳生成订单 🌳购物车 需求分析 1.会员登陆后, 可以添加家居到购物车 2.完成购物车的设计和实现 3.每添加一个家居,购物车的数量+1, 并显示 程序框架图 1.新建src/com/zzw/furns/entity/CartItem.java, CartItem-家居项模型 /***

Birt报表开发实战

我就截图描述得了,没什么含金量,看图基本明白的。 1.开始 a.创建报表文件 b.数据源配置 c.配置数据集 2.网格报表 拖拉式操作,很方便 3.预览效果 其他报表的操作也基本不难,就不扯了! 2.级联参数 官方视频教程:http://demo.actuate.com/demos/cascade/cascade.html