文章目录
- 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”
npmconfigsetprefix"C:\Program Files\nodejs\node_global"npm config set cache “你的路径\node_cache”
npmconfigsetcache"C:\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?ws=127.0.0.1:62000即可。你也可以将 CDP 端口（在例子中为 62000）修改到任意其他端口。相关代码定义在src/index.ts中
4. 效果展示
工具地址：https://github.com/evi0s/WMPFDebugger
参考文章：https://www.freebuf.com/articles/460418.html
感谢关注【遇事不決洛必達】！欢迎点赞收藏和交流指正，我会持续分享我的学习经验和心得。
