可视化埋点打印

背景

每次开发完埋点都要自测，你是加调试代码打印呢？还是查看浏览器的network呢？这两种方式都不方便，想要一个一目了然查看工具。

调研

实时查看埋点上报，需要做一下几点。

1. 拦截埋点服务上报请求
2. 解析请求上报中的参数、映射参数
3. 个性化打印。

技术方案

1. service worker的 fetch 事件

• 开启静态服务 ❌

• 植入项目 ❌

this.addEventListener('fetch', event => {
  // event.request.url
  // ...
})

2. chrome.devtools

• 插件机制(友好) ✅

chrome.devtools.network.onRequestFinished.addListener(request => {
  // request.url
  // ...
})

chrome.devtools

• devtools.inspectedWindow

  和当前窗口进行交互：例如 执行当前调试页面上下文的代码。

• devtools.network ✅

  检索开发者工具的网路请求相关信息(network)

• devtools.panels ✅

  创建面板、访问已存在的面板和添加侧边栏。

项目结构

├── output/                         
├── public/
│   ├── icons                       
│   └── manifest.json               # 插件的配置文件
├── src/                          
│   ├── assets              
│   ├── config/                  
│   ├── pages/                    
│   │   └── devtools/              
│   │       ├── index.html     
│   │       └── index.js 
│   │   └── panel/                 # 开发者工具中的自定义面板 
│   │       └── index.js  
│   │   └── popup/                 # 点击插件icon后的弹窗
│   │       └── index.js 
│   ├── utils/                                        
├── README.md
├── package.json