【爬虫随笔】WX小程序强制开启F12开发者工具

注意本文章只能作为学习用途, 主体内容来源于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 registry

  • yarn 包管理器安装

    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

感谢关注【遇事不決洛必達】！欢迎点赞收藏和交流指正，我会持续分享我的学习经验和心得。