文章目录1. 工具介绍2. 准备3. 使用4. 效果展示注意本文章只能作为学习用途, 主体内容来源于Github开源项目, 如侵犯到您的权益请联系删除。注意本文章只能作为学习用途, 主体内容来源于Github开源项目, 如侵犯到您的权益请联系删除。注意本文章只能作为学习用途, 主体内容来源于Github开源项目, 如侵犯到您的权益请联系删除。书接上回去年写了一篇文章介绍如何强制开启F12开发者工具WX强制开启F12开发者工具先回答几个问题旧版工具如何下载点此下载微信4.1版本后3.9版已无法登录并强制更新解决办法由于旧版无法登录需要绕过的原因今天为大家介绍一个新的强制开启F12工具1. 工具介绍这个工具通过 patch 一些 Chrome 调试协议CDP的过滤器和其他的条件判断来强制小程序连接到外部调试器也就是远程调试LanDebug 模式。这个调试协议是基于 protobuf 实现的私有协议通过逆向开发者工具提取相应的协议实现该工具实现了一个简单的小程序调试协议转换为标准 Chrome 调试协议从而允许我们使用标准基于 chromium 浏览器的内嵌开发者工具来调试任意小程序2. 准备如果你已经安装了下列的环境则仅需要注意是否安装了yarn即可node.js (需要至少 LTS v22)找到安装的目录在安装目录下新建两个文件夹【node_global】和【node_cache】在【node_global】下手动创建一个【node_modules】文件夹创建完毕后使用管理员身份打开cmd命令窗口npm config set prefix “你的路径\node_global”npmconfigsetprefixC:\Program Files\nodejs\node_globalnpm config set cache “你的路径\node_cache”npmconfigsetcacheC:\Program Files\nodejs\node_cache配置环境变量在【系统变量】中点击【新建】NODE_PATH变量名NODE_PATH 变量值C:\Program Files\nodejs\node_global\node_modules 注意【变量值】之前创建的路径而不是必须该C:\Program Files\nodejs\node_global\node_modules值在【系统变量】中选择【Path】点击【编辑】添加【NODE_PATH】%NODE_PATH%编辑【用户变量】中的【Path】修改默认的【 AppData\Roaming\npm 】修改成 【node_global】的路径C:\Program Files\nodejs\node_global切换国内镜像源# 清除可能损坏的缓存npmcache clean--force# 切换到腾讯云镜像推荐npmconfigsetregistry https://mirrors.cloud.tencent.com/npm/# 或者华为云镜像npmconfigsetregistry https://mirrors.huaweicloud.com/repository/npm/# 验证新源npmconfig get registryyarn 包管理器安装npminstall-gyarn基于的 chromium 浏览器例如 Chrome, Edge, 等等3. 使用第 1 步克隆并安装依赖# 第一步gitclone https://github.com/evi0s/WMPFDebugger# 第二步cdWMPFDebugger# 第三步 默认执行 yarn install是简写形式yarn第 2 步运行src/index.ts。该命令会启动调试服务器和 CDP 代理服务器同时相关 hook 代码也会被自动注入到小程序运行时中npx ts-node src/index.ts注意: 在这个步骤之后你需要先启动小程序第三步再打开开发者工具第四步。如果操作顺序反了你可能需要从重新第二步开始第 3 步打开任意你想调试的小程序第 4 步打开浏览器访问devtools://devtools/bundled/inspector.html?ws127.0.0.1:62000即可。你也可以将 CDP 端口在例子中为 62000修改到任意其他端口。相关代码定义在src/index.ts中4. 效果展示工具地址https://github.com/evi0s/WMPFDebugger参考文章https://www.freebuf.com/articles/460418.html感谢关注【遇事不決洛必達】欢迎点赞收藏和交流指正我会持续分享我的学习经验和心得。
