Nefarious Pomegranate Magnate

    @hippy/devtools-protocol
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    项目介绍

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

    快速上手

    协议修改维护

    在需要修改相对应的协议时,修改 json 下的协议及对应的 文档 并提交 MRMaster;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 文件下协议后,在成功 mergemaster 后会触发 OCI 创建一个临时分支生成新的 typescript 文件并进行创建 MR 至 master 并且发布新的 NPM 包至腾讯 NPM 镜像源: @hippy/devtools-protocol

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

      npm run build

    行为准则

    Command / Event 命名规范

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

    Keywords

    none

    Install

    npm i @hippy/devtools-protocol

    DownloadsWeekly Downloads

    8

    Version

    0.0.1

    License

    none

    Unpacked Size

    4.17 MB

    Total Files

    98

    Last publish

    Collaborators

    • ivanfanwu
    • zoomchan-cxj
    • chestershen