ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

MetaMask Extension 如何用 Mock Segment API 调试 MetaMetrics 事件?

MetaMask Extension 如何用 Mock Segment API 调试 MetaMetrics 事件? MetaMask Extension 如何用 Mock Segment API 调试 MetaMetrics 事件【免费下载链接】metamask-extension:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites项目地址: https://gitcode.com/GitHub_Trending/me/metamask-extension如果你正在开发 MetaMask 浏览器扩展metamask-extension想查看插件发出的 MetaMetrics 埋点事件track、page、identify长什么样又不想把这些数据发往生产 Segment 环境仓库内置了一个 Mock Segment API 可以本地接收并打印这些事件。本文基于仓库自带的 development/README.md 和 mock-segment.js 的说明给出完整的操作步骤配置.metamaskrc、构建扩展、启动本地 mock 服务并验证事件确实被打印出来。准备条件以下要求来自根目录 README.md 的“Building on your local machine”一节安装 Node.js 24使用 nvm 的话执行nvm use会自动选择正确版本在项目内执行corepack enable由 Corepack 按package.json的packageManager字段管理 Yarn复制配置文件生成.metamaskrccp .metamaskrc{.dist,}执行yarn install安装依赖注意.metamaskrc.dist中SEGMENT_WRITE_KEY一行默认是被注释掉的;SEGMENT_WRITE_KEY后面需要自己添加或取消注释并赋值。配置 .metamaskrc 指向 Mock 服务按 development/README.md 的 “Debugging with the Mock Segment API” 一节在.metamaskrc中添加或替换两个变量SEGMENT_HOSThttp://localhost:9090 SEGMENT_WRITE_KEYFAKE这两个值缺一不可。mock-segment.js 的注释里明确说明如果 Segment key 没有设置扩展根本不会发送任何 metric 事件SEGMENT_WRITE_KEY填任意占位值如FAKE即可因为它只是本地 mock 用。构建扩展按文档说明用yarn dist把项目构建到./dist/目录yarn dist这一步会让上面的SEGMENT_HOST/SEGMENT_WRITE_KEY配置被打进构建产物之后扩展的埋点请求就会发往http://localhost:9090而不是生产 Segment 环境。启动 Mock Segment API在命令行运行node development/mock-segment.js该服务的行为来自 mock-segment.js 与 development/lib/create-segment-server.js默认监听 9090 端口可通过--port/-p参数或环境变量port覆盖对收到的每个请求都返回 HTTP 200对 CORS 预检OPTIONS也返回 200把请求体解析为 Segment batch 事件并把解析结果打印到控制台看到[mock-segment]: Listening on port 9090说明服务已就绪。触发事件并验证扩展只有在用户同意后才发送 MetaMetrics 事件所以先按 development/README.md 给出的路径开启解锁扩展打开 Account 菜单点击Settings点击Security Privacy把Participate in MetaMetrics开关拨到ON。之后正常使用扩展切换页面、切换网络等mock 服务的控制台就会打印每个收到的事件格式为事件类型标签加名称再附 JSON 形式的 properties。例如track事件会显示[mock-segment]: Track event received: 事件名 { key: value }其中事件名、属性键值都是运行时真实触发的内容上面的 JSON 只是示意输出结构track取e.event作为名称page取e.nameidentify取userId或anonymousId属性分别取event.properties或event.traits见 mock-segment.js 的getNameOrId逻辑。如果控制台没有输出按文档给出的第二种验证方式交叉检查打开浏览器开发者工具的Network标签页选中background.html上下文过滤发往/v1/batch的POST请求。Mock 模式下完整地址应为http://localhost:9090/v1/batch。请求能到达但 mock 服务没打印说明解析环节有问题请求根本没发出先回到前面检查.metamaskrc里两个变量是否都配置了、MetaMetrics 是否已开启。限制与可替代路径Mock 服务非常原始对任何请求一律返回 200唯一作用就是截获并打印请求不做任何校验或转发见 create-segment-server.js 注释。如果最终要验证真实 Segment 环境development/README.md 提供了替代路径注册 Segment 账号、创建 Workspace 和 Node.js Source把SEGMENT_HOSThttps://api.segment.io和真实的Write Key写入.metamaskrc后同样yarn dist构建事件会显示在 Segment 的 Debugger 中。两条路径共用同一套.metamaskrc配置入口按调试目的二选一即可。构建产物加载到 Chrome/Firefox 的方法分别见 docs/add-to-chrome.md 和 docs/add-to-firefox.md。【免费下载链接】metamask-extension:globe_with_meridians: :electric_plug: The MetaMask browser extension enables browsing Ethereum blockchain enabled websites项目地址: https://gitcode.com/GitHub_Trending/me/metamask-extension创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表