Yiandevtools NPM

modeling-developer-console

简介

本项目是建模开发者工具，助力建模应用构建-实时查看请求以及后台执行脚本，产品页面分析

该项目具有以下能力:

支持chrome浏览器开发者模式安装
支持F12打开点击浏览sql数据
使用vue3.x开发
使用manifest_version 2
- 使用tabs权限
- 使用webRequest权限
- 使用webRequestBlocking权限
- 使用storage权限
- 其他(后续将持续扩展)
内置content_scripts页面
内置popup页面
内置devtools页面
集成element plus库
集成ace代码编辑器
集成bus总线，pako解压缩
使用yarn run watch可使代码热更新

基础

环境准备

Node 版本要求

项目需要 Node.js v14.17.5 或更高版本 (推荐最新稳定版)。你可以使用 n，nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。

yarn 1.22.11

安装

通过以下命令安装依赖包:

yarn install

如果遇到问题报错，可以查看使用 vue-cli 创建 vue3.x 版本项目报错这篇文章

插件开发

yarn run watch

打开chrome浏览器，使用开发者模式加载根目录下面的dist文件夹，你不必每次重新打包，yarn run watch 命令会自动推送代码更新到浏览器扩展程序

插件打包

yarn run build

进阶

目录结构

项目src目录结构及说明如下:

├─assets               # 静态资源目录
│  └─images
├─background           # 最底层js
├─content              # content_scripts
│  └─components
├─devtools             # devtools页面
│  └─components
├─devtools_page        # 主要逻辑都在这里面
│  ├─components
│  └─workjs
├─plugins              # chrome插件配置和注入
├─popup                # popup页面
│  └─components
└─utils                # 公共方法