Chrome DevTools Inspector 扩展实践

最新推荐文章于 2024-08-10 07:19:11 发布

Web_boom

最新推荐文章于 2024-08-10 07:19:11 发布

阅读量910

点赞数 1

本文链接：https://blog.csdn.net/Android_boom/article/details/124925751

版权

本文详细介绍了如何通过扩展Chrome DevTools Inspector以增强React Native应用的调试体验，特别是如何将客户端网络信息显示在网络面板中。文章讨论了Chrome DevTools的工作原理，react native debugger的调试流程，以及如何利用chrome devtools protocol实现跨域调试。作者通过创建proxy服务转发CDP消息，成功实现了网络信息的展示。

摘要由CSDN通过智能技术生成

前言

云音乐 app 内有很多使用 react native 开发的应用，例如云贝中心、云音乐商城、会员中心等。为了更好地提升开发效率，改善调试体验，团队决定开发 react native 调试工具，通过为 react native debugger 增加一些扩展功能，实现业务信息的展示和调试能力，例如：跨端通信信息展示、网络信息展示等。

因为云音乐 react native 应用的网络请求都是通过客户端发送，因此想把客户端网络信息通过 chrome devtools protocol 展示在 network 里。经过尝试后，期间遇到了一些问题和做出的尝试记录如下。

chrome devtools 介绍

chrome devtools 是前端常用的调试工具，集成在 chrome 里。web 应用通过 chrome devtools protocol 与 devtools frontend （平时打开 f12 调试面板的页面，也是个前端项目，下面用 frontend 表示）建立连接，将被调试应用信息传递到 frontend 上展示。 web 调试方案示例

ChromeDevTools/devtools-frontend 是 chrome devtools frontend 的项目代码。也可以作为单独的项目使用，用于自定义调试功能。项目内使用的 devtools frontend 是 3964 版本，新版的 frontend 对打包方式、代码结构都做了调整。

devtools frontend 模块加载

通过配置远程调试端口 --remote-debugging-port=9222 启动 chrome，http://localhost:9222/ 可以看得到调试链接，例如：http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/7B2421304FE8EF659B264D4F476083DA 是一个 inspector 的地址，从 inspector.html 入手看下项目如何启动。

inspector.html 加载 Runtime.js 和 inspector.js，inspector.js 只做了一件事

Runtime.startApplication('inspector');

模块加载过程如下 Runtime.startApplication('inspector') 加载过程

模块经过加载解析过程后，启动应用：

前端应用通过读取 module.json 获得模块信息；
实例化 new Runtime，建立 Runtime -> Module -> Extension 依赖关系；
加载核心模块资源（script 和 css 资源）;
启动核心模块入口（Main.Main）。

到此是模块的加载过程。

inspector 启动方式

查看 inspector.json 内容

{
  "modules" : [
    { "name": "screencast", "type": "autostart" }
  ],
  "extends": "devtools_app",
  "has_html": true
}

inspector 应用继承自 devtools_app。只比 devtools_app 多了一个模块 screencast 页面快照，可以用于实时查看页面变化，。

devtools_app 应用就是常用的 devtools 工具，可以用于 web 应用调试，devtools_app.json 依赖的模块内容如下：

{
  "modules" : [
    { "name": "emulation", "type": "autostart" },
    { "name": "inspector_main", "type": "autostart" },
    { "name": "browser_debugger" },
    { "name":