1# Circuit IR可视化工具开发说明 2 3若当前工具功能不满足开发者需求，开发者需增强工具能力，则可基于已有源码进行工具二次开发，编译打包生成自定义的工具。 4 5## 使用场景 6 71. 编译打包发布工具 8 92. 开发者需增强工具能力，进行二次开发 10 11## 工具开发 12 13### 环境说明 14 15系统：建议Ubuntu 20.04或者Windows 10 16 17#### 下载源码后安装依赖库： 18 191.右键windows开始菜单，单击运行，输入cmd，单击确定。 20 212.在命令行中进入到circuit_viewer目录下，运行npm i安装依赖库，如下图所示： 22 23 24 25#### 打包 26 27使用工具或本地代码有更新时，需在circuit_viewer目录下运行npm run dist打包源码，如下图所示： 28 29 30 31打包成功后会生成dist/main.js文件 32 33#### 运行 34 35本地安装python3，在dist目录内运行python -m http.server启动web服务，如下图所示： 36 37 38 39打开chrome浏览器，访问127.0.0.1:8000，如下图所示： 40 41 42 43#### 发布 44 45将dist目录下的文件放到web服务器根目录，必要的文件列表如下： 46 47config.json ---- 配置节点和线的颜色 48favicon.ico ---- 页面打开后左上角的图标 49index.html ----- 页面入口文件 50main.js -------- 打包发布的工具主程序文件 51 52#### 开发 53 54源码中，engine目录为自研图形引擎，跟circuit ir相关文件有如下三个： 55 561. 解析log文件：src/ir/LogParser.js 57 582. 根据解析结果生成节点和线：src/ir/IrToPicture.js 59 603. 可视化展示流图：src/ir/IrViewer.js 61 62开发者可以对以上三个文件进行二次开发，增强工具能力 63 64#### 调试 65 661. 安装chrome浏览器 67 682. 使用vscode打开工程，创建.vscode目录，新建launch.json(调试配置)，如下图： 69 70 71 723. 新建task.json(打包配置)，如下图： 73 74 75 764. 在vscode界面点击F5，将会自动打包和启动调试，在src的源码中可以下断点调试
