# 项目介绍
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`;

#### 前端项目使用

安装
```shell
npm i tdf-devtools-protocol
```

使用示例：
在引用的该声明的前端项目的 @types 目录下 的 `index.d.ts` 声明文件中加入以下代码即可全局引用；
```js
/// <reference types="@tencent/tdf-devtools-protocol" />
```

```js
// 示例
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](https://www.jsonrpc.org/specification)

  Commands Request
  ```json
  {
      "id": 11,
      "method": "Debugger.getScriptSource",
      "params": {
          "scriptId": "17"
      }
  }

  ```

  Commands Response
  ```json
  // 成功
  {
      "id": 11,
      "result": {
          "scriptId": "17"
      }
  }

  // Error
  {
      "id": 11,
      "error": {
          "code": -1,
          "message": "error message"
      }
  }

  ```
  Events（event 事件类似单向的”通知“，没有回包，无需 ID）
  ```json
  {
      "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` 镜像源： [tdf-devtools-protocol](https://www.npmjs.com/package/tdf-devtools-protocol)



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


# 行为准则


Command / Event 命名规范
- 动作：enable、disable、focus
- 动词+名词：getAttributes、highlightNode、removeNode
