@hippy/devtools-protocol

项目介绍

DevTools FrontEnd 到 DevTools BackEnd 的基于 JSON-RPC 通信。 方案设计文档： https://iwiki.woa.com/pages/viewpage.action?pageId=769466771 协议文档： http://tdf-devtools.woa.com/devtools-protocol/tdf/

快速上手

协议修改维护

在需要修改相对应的协议时，修改 json 下的协议及对应的 文档 并提交 MR 至 Master；OCI 会自动构建新的 TS 声明文件发布 NPM 包以及创建新的 MR 合并至 Master;

协议适配表：https://doc.weixin.qq.com/sheet/e3_AIEAXwYkACknrJw0US0S8y8B91F5G?scode=AJEAIQdfAAohg70lk2AIEAXwYkACk&tab=BB08J2

前端项目使用

安装

npm i @hippy/devtools-protocol

使用示例： 在引用的该声明的前端项目的 @types 目录下 的 index.d.ts 声明文件中加入以下代码即可全局引

/// <reference types="@hippy/devtools-protocol" />

// 示例
registerModuleCallback(TdfCommand.TDFInspectorDumpDomTree, (error, msg) => {
  const { itree } = msg as ProtocolTdf.TDFInspector.DumpDomTreeResponse;
  this.handleRecieveDomTree(itree);
});

常见问题

• 协议支持的格式有哪些？ 支持 JSON, TypeScript 格式；

• JSON 目录下是协议的具体包含哪些 domain 以及每个 domain 下有哪些 command, event; 具体在项目中应该如何进行组包解包？ 可以查看 方案设计文档： https://iwiki.woa.com/pages/viewpage.action?pageId=769466771 的介绍； 即： 参照： JSON-RPC

  Commands Request

  {
      "id": 11,
      "method": "Debugger.getScriptSource",
      "params": {
          "scriptId": "17"
      }
  }
  
  

  Commands Response

  // 成功
  {
      "id": 11,
      "result": {
          "scriptId": "17"
      }
  }
  
  // Error
  {
      "id": 11,
      "error": {
          "code": -1,
          "message": "error message"
      }
  }
  
  

  Events（event 事件类似单向的”通知“，没有回包，无需 ID）

  {
      "method": "Debugger.scriptParsed",
      "params": {
          "scriptId": "17",
          "endColumn": 3,
          "endLine": 72,
          "scriptId": "17",
          "startColumn": 0,
          "startLine": 0,
          "url": "bootstrap.js",
      }
  }
  

• OCI 的作用是什么？ 修改 json 文件下协议后，在成功 merge 至 master 后会触发 OCI 创建一个临时分支生成新的 typescript 文件并进行创建 MR 至 master 并且发布新的 NPM 包至腾讯 NPM 镜像源： @hippy/devtools-protocol

• 本地编译生成 Typescript 的命令？ 确保已经安装 npm 包后, 项目根目录下运行：

  npm run build
  

行为准则

Command / Event 命名规范

• 动作：enable、disable、focus
• 动词+名词：getAttributes、highlightNode、removeNode