前端开发工具【免费下载链接】relayRelay is a JavaScript framework for building>项目地址https://gitcode.com/gh_mirrors/relay29/relay点击查看免费下载本指南以 RelayReact 数据驱动框架官方调试文档为主线系统讲解 Relay DevTools 浏览器扩展的安装方式、两大核心面板Network Panel 与 Store Panel的使用方法、多环境Multiple Environments切换机制并深入到 Relay Runtime 源码层面揭示 DevTools 获取请求与 Store 数据的底层原理。读完本文你将能够熟练使用 Relay DevTools 定位网络请求问题、审查 Store 中的记录数据并理解其与 Relay Environment 的协作机制。安装 Relay DevTools 扩展Relay DevTools 是一个浏览器扩展在 Chrome DevTools 中新增一个名为Relay的标签页。它分为外部公开版本与内部版本两种发布渠道两者的安装方式和使用前提不同。外部版本公开渠道推荐外部版本经过更充分的发布验证Bug 更少但更新频率低于内部版本不一定总是包含最新特性。安装步骤如下打开 Chrome 网上应用店搜索Relay Developer Tools扩展 IDncedobpgnmkhcmnnkcimnobpfepidadl点击安装扩展即会注入到 Chrome DevTools 中。安装完成后打开任意运行 Relay 应用的页面在 DevTools 顶部标签栏中即可看到新增的Relay标签页。注意内部版本由 Facebook 内部 Gatekeeper 推送仅对该公司员工可用普通开发者请使用外部版本。内部版本Facebook 内部专用内部版本包含最新更新且安装更快但仅适用于具备相应权限的 Facebook 内部环境下载新版 DevTools 前务必先删除所有旧版本的扩展避免版本冲突加入 Relay Support 小组系统会自动将你加入cpe_relay_devtools_extensionGatekeeper等待 20~30 分钟扩展会自动推送到 Chrome 浏览器也可执行sudo soloctl -i立即获取扩展。Edge内部 Edgium用户在C:\Users\User\AppData\Local\Google\Chrome\User Data\Work Profile\Extensions中搜索包含 Relay Developer Tools 的manifest.json取得其所在目录路径形如...\Extensions\blob\version\然后在edge://extensions/页面点击加载解压缩的扩展如需要先开启允许来自其他应用商店的扩展。DevTools 背后的工作原理Environment 注册与日志管线在深入面板操作之前先了解 Relay DevTools 如何拿到运行时数据这有助于解释为什么打开页面就能看到请求与记录。环境注册__RELAY_DEVTOOLS_HOOK__当创建一个新的 Relay Environment 时RelayModernEnvironment与多 Actor 环境ActorSpecificEnvironment都会在构造函数末尾调用registerEnvironmentWithDevTools(this)将自身注册给 DevTools。其实现位于 packages/relay-runtime/util/registerEnvironmentWithDevTools.jsconst devToolsHook _global _global.__RELAY_DEVTOOLS_HOOK__; if (devToolsHook) { devToolsHook.registerEnvironment(environment); }关键点DevTools 扩展会在全局注入一个__RELAY_DEVTOOLS_HOOK__钩子环境Environment创建时调用registerEnvironment(environment)完成注册代码注释明确要求这必须是构造函数中的最后一步确保环境已完全初始化注册逻辑同时适用于RelayModernEnvironment与MultiActorEnvironment每个 actor 的ActorSpecificEnvironment都会独立注册这一点在 registerEnvironmentWithDevTools-test.js 中有对应测试用例验证。日志管线Network 事件的产生DevTools 的 Network 面板数据来自 Environment 的日志系统。wrapNetworkWithLogObserver位于 packages/relay-runtime/network/wrapNetworkWithLogObserver.js在RelayModernEnvironment构造时对网络层做包装见 RelayModernEnvironment.js把每次网络请求转换成结构化日志事件事件名称触发时机附带数据network.start请求开始networkRequestId、params、variables、cacheConfignetwork.next收到响应数据networkRequestId、responsenetwork.error请求出错networkRequestId、errornetwork.complete请求正常完成networkRequestIdnetwork.unsubscribe订阅被取消networkRequestIdnetwork.info请求过程中的附加信息networkRequestId、info源码注释还特别说明之所以在 Environment 层面统一包装网络层是因为依赖每个网络调用点自行包装日志不可行最终必然造成日志缺口同时 DevTools 会直接改写env.__log方法并依赖它接收网络事件——这正是wrapNetworkWithLogObserver必须接收 environment 实例的原因。这些事件类型在 packages/relay-runtime/store/RelayStoreTypes.js 中定义为NetworkStartLogEvent、NetworkNextLogEvent、NetworkErrorLogEvent等联合类型LogEvent。提示如果你的应用没有使用RelayModernEnvironment而是自定义了 Environment请确保其同样具备__log能力并完成 DevTools 注册否则面板中可能看不到数据。导航 Relay DevToolsNetwork Panel 与 Store Panel安装扩展并打开 DevTools 后会看到新增的Relay标签页其中包含两个可选面板Network Panel与Store Panel。Network Panel查看请求明细Network 面板用于查看活动环境active environment中发出的每一个请求其数据来源正是上文提到的network.*日志事件。你可以滚动浏览所有请求列表按关键词搜索请求点击请求查看详情。每条请求的详情包含三部分核心信息字段说明对应日志字段Status请求状态成功 / 出错 / 取消等network.error/network.complete/network.unsubscribeVariables该请求携带的 GraphQL 变量network.start中的variablesResponse服务端返回的响应数据network.next中的response典型排障场景当页面数据异常时先检查 Network 面板中对应查询的 Status 是否为 error再核对 Variables 是否符合预期最后在 Response 中确认返回结构从而快速定位是请求发错还是数据返回异常。Store Panel审查 Store 记录Store 面板用于查看活动环境中 Store 数据里的每一条记录record。你可以滚动浏览所有记录搜索记录查看每条记录的详情一键将 Store 数据以JSON 格式复制到剪贴板便于在外部工具中对比分析。每条记录的详情包含ID记录的唯一标识对应 Relay 的 dataIDTypeName记录对应的 GraphQL 类型名__typenameData记录中的全部字段数据。引用跳转是 Store 面板最有价值的交互当记录中的某个字段是对另一条记录的引用reference时直接点击该引用即可跳转到被引用的那条记录从而沿着关联关系顺藤摸瓜地审查整张数据图data graph。这个交互与 Runtime 中的StoreInspector实现相互印证。位于 packages/relay-runtime/store/StoreInspector.js 的getWrappedRecord使用 JavaScriptProxy包装记录当读取某字段值且该值带有__ref单条引用时会递归解析为被引用记录当值为__refs引用列表如 connection 边时则解析为记录数组。这正是面板中点击引用跳转到对应记录的底层机制。同时StoreInspector 还会在__DEV__下向window.devtoolsFormatters注入自定义格式化器让 Relay 记录在 Console 中以类型名 {id: ..., …}的形式友好展示需在 Chrome DevTools 设置中勾选Enable custom formatters。// StoreInspector 的 inspect 入口StoreInspector.js inspect (environment, dataID) { installDevtoolFormatters(); return getWrappedRecord( environment.getStore().getSource(), dataID ?? client:root, ); };Multiple Environments多环境切换当应用运行在多个 Relay Environment 下例如多账号、多租户、或使用了MultiActorEnvironment的场景DevTools 左下方会出现一个环境切换下拉框dropdown menu。Network 面板中的请求与 Store 面板中的记录都按环境分组通过下拉框即可在多个活动环境之间自由切换查看各自独立的请求与数据无需刷新页面即可完成切换便于对比不同环境下的数据差异。这一能力同样有源码支撑registerEnvironmentWithDevTools会对每个环境实例独立调用registerEnvironment包括MultiActorEnvironment.forActor()产生的每个ActorSpecificEnvironment见 ActorSpecificEnvironment.js。测试用例 registerEnvironmentWithDevTools-test.js 分别验证了RelayModernEnvironment与MultiActorEnvironment两种类型环境都能正确注册到 DevTools 钩子。反馈入口如果你在使用过程中遇到问题或有功能建议可以在扩展面板的右上角找到反馈入口。Relay 团队通过该渠道持续收集 DevTools 的使用反馈这也是文档明确给出的唯一反馈路径。小结与调试建议调试目标推荐面板关键观察点请求是否发出、是否出错Network PanelStatus、Variables、Response变量是否与预期一致Network Panel请求详情的 Variables某条记录是否存在/内容正确Store PanelID、TypeName、Data 字段记录之间的引用关系Store Panel点击引用跳转多环境数据隔离是否正确环境下拉框切换环境后请求与记录是否独立结合源码可以确认DevTools 的 Network 面板数据源自wrapNetworkWithLogObserver生成的network.*日志事件Store 面板数据源自StoreInspector对RecordSource的代理封装而所有数据的可见性都建立在__RELAY_DEVTOOLS_HOOK__环境注册机制之上。掌握这三条链路你就能在真实项目中高效利用 Relay DevTools 排查数据流问题。赞分享前端开发工具【免费下载链接】relayRelay is a JavaScript framework for building>项目地址https://gitcode.com/gh_mirrors/relay29/relay点击查看免费下载相关推荐Relay DevTools 调试指南从安装到深度理解 Relay 网络与 Store 面板Relay DevTools 调试指南从安装到深度理解 Relay 网络与 Store 面板 导读 本文以 website/versioned_docs/ve前端开发工具Relay DevTools 调试指南浏览器扩展安装、Network 请求与 Store 数据面板使用详解Relay DevTools 调试指南浏览器扩展安装、Network 请求与 Store 数据面板使用详解 Relay DevTools 是 Relay 官方前端开发工具Relay DevTools 调试指南从安装到网络面板与 Store 面板的完整使用解析Relay DevTools 调试指南从安装到网络面板与 Store 面板的完整使用解析 Relay DevTools 是面向 Relay 数据驱动 Reac前端开发工具创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考