CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-10-23 00:35:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

将消息的请求和响应分离，便于维护

Browse Source
This commit is contained in:
xu_yanfeng
2024-12-27 19:20:22 +08:00
parent f7937a5c8b
commit 3e9d259b2c
16 changed files with 214 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cc-inspector/src/views/devtools/data.ts
View File

@@ -105,7 +105,13 @@ export interface ObjectItemRequestData {
}
export interface FrameDetails {
/**
* 网页的frameID
*/
frameID: number;
/**
* 网页的url
*/
url: string;
}

34
cc-inspector/src/views/devtools/index.vue
View File

@@ -45,10 +45,10 @@ import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { storeToRefs } from "pinia";
import { defineComponent, nextTick, onMounted, reactive, ref, toRaw, watch } from "vue";
import PluginConfig from "../../../cc-plugin.config";
import { Msg, PluginEvent } from "../../core/types";
import { Msg, PluginEvent, RequestNodeInfoData, RequestSupportData, RequestTreeInfoData, RequestLogData, RequestObjectData, RequestUseFrameData, ResponseObjectData, ResponseSetPropertyData, ResponseSupportData } from "../../core/types";
import { bridge } from "./bridge";
import Bus, { BusMsg } from "./bus";
import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
import { EngineData, FrameDetails, NodeInfoData, ObjectData, TreeData } from "./data";
import { appStore, RefreshType } from "./store";
import Test from "./test/test.vue";
import Properties from "./ui/propertys.vue";
@@ -174,7 +174,7 @@ export default defineComponent({
const elTree = ref<typeof CCTree>();
function _initChromeRuntimeConnect() {
const msgFunctionMap: Record<string, Function> = {};
msgFunctionMap[Msg.TreeInfo] = (data: Array<TreeData>) => {
msgFunctionMap[Msg.ResponseTreeInfo] = (data: Array<TreeData>) => {
isShowDebug.value = true;
if (!Array.isArray(data)) {
data = [data];
@@ -189,7 +189,9 @@ export default defineComponent({
});
}
};
msgFunctionMap[Msg.Support] = (isCocosGame: boolean) => {
msgFunctionMap[Msg.ResponseSupport] = (data: ResponseSupportData) => {
debugger;
const isCocosGame: boolean = data.support;
isShowDebug.value = isCocosGame;
if (isCocosGame) {
syncSettings();
@@ -201,9 +203,10 @@ export default defineComponent({
selectedUUID = null;
}
};
msgFunctionMap[Msg.NodeInfo] = (eventData: NodeInfoData) => {
msgFunctionMap[Msg.ResponseNodeInfo] = (eventData: NodeInfoData) => {
isShowDebug.value = true;
try {
// 因为要用到class的一些属性，传递过来的是纯数据，所以需要重新序列化一下
const nodeInfo = new NodeInfoData(eventData.uuid, eventData.group).parse(eventData);
treeItemData.value = nodeInfo;
} catch (error) {
@@ -214,7 +217,7 @@ export default defineComponent({
msgFunctionMap[Msg.MemoryInfo] = (eventData: any) => {
memory.value = eventData;
};
msgFunctionMap[Msg.UpdateProperty] = (data: Info) => {
msgFunctionMap[Msg.ResponseSetProperty] = (data: ResponseSetPropertyData) => {
const uuid = data.path[0];
const key = data.path[1];
const value = data.data;
@@ -239,7 +242,7 @@ export default defineComponent({
}
}
};
msgFunctionMap[Msg.UpdateFrames] = (details: FrameDetails[]) => {
msgFunctionMap[Msg.ResponseUpdateFrames] = (details: FrameDetails[]) => {
// 先把iframes里面无效的清空了
iframes.value = iframes.value.filter((item) => {
details.find((el) => el.frameID === item.value);
@@ -263,7 +266,7 @@ export default defineComponent({
onChangeFrame();
}
};
msgFunctionMap[Msg.GetObjectItemData] = (requestData: ObjectItemRequestData) => {
msgFunctionMap[Msg.ResponseObjectItemData] = (requestData: ResponseObjectData) => {
if (requestData.id !== null) {
let findIndex = requestList.findIndex((el) => el.id === requestData.id);
if (findIndex > -1) {
@@ -277,7 +280,6 @@ export default defineComponent({
if (!data) {
return;
}
debugger;
if (data.isTargetDevtools()) {
PluginEvent.finish(data);
const { msg } = data;
@@ -303,7 +305,7 @@ export default defineComponent({
false
);
Bus.on(BusMsg.ShowPlace, (data: EngineData) => {
console.log(data);
console.log(toRaw(data));
_expand(data.engineUUID);
});
Bus.on(BusMsg.RequestObjectData, (data: ObjectData, cb: Function) => {
@@ -311,13 +313,13 @@ export default defineComponent({
return;
}
requestList.push({ id: data.id, cb });
bridge.send(Msg.GetObjectItemData, data);
bridge.send(Msg.RequestObjectItemData, data as RequestObjectData);
});
Bus.on(BusMsg.UpdateSettings, () => {
syncSettings();
});
Bus.on(BusMsg.LogData, (data: string[]) => {
bridge.send(Msg.LogData, data);
bridge.send(Msg.RequestLogData, data as RequestLogData);
});
onMounted(() => {
syncSettings();
@@ -382,7 +384,7 @@ export default defineComponent({
}
function updateNodeInfo() {
if (selectedUUID) {
bridge.send(Msg.NodeInfo, selectedUUID);
bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
}
}
let selectedUUID: string | null = null;
@@ -391,11 +393,11 @@ export default defineComponent({
}
function onBtnClickUpdateTree() {
const id = toRaw(frameID.value);
bridge.send(Msg.TreeInfo, id);
bridge.send(Msg.RequstTreeInfo, { frameID: id } as RequestTreeInfoData);
}
function onChangeFrame() {
const id = Number(toRaw(frameID.value));
bridge.send(Msg.UseFrame, id);
bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData);
}
const elLeft = ref<HTMLDivElement>();
const version = ref(PluginConfig.manifest.version);
@@ -454,7 +456,7 @@ export default defineComponent({
},
onBtnClickUpdatePage() {
bridge.send(Msg.Support);
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
},
onMemoryTest() {
bridge.send(Msg.MemoryInfo);

5
cc-inspector/src/views/devtools/register-panel.ts
View File

@@ -1,5 +1,7 @@
import CCP from "cc-plugin/src/ccp/entry-render";
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, RequestSupportData } from "../../core/types";
import { bridge } from "./bridge";
export function init() {
if (chrome && chrome.devtools) {
// 对应的是Elements面板的边栏
@@ -17,8 +19,7 @@ export function init() {
console.log("[CC-Inspector] Dev Panel Created!");
panel.onShown.addListener((window) => {
// 面板显示，查询是否是cocos游戏
console.log("panel show");
// bridge.sendToBackground(Msg.Support, null)
bridge.send(Msg.RequestSupport, {} as RequestSupportData);
});
panel.onHidden.addListener(() => {
// 面板隐藏

22
cc-inspector/src/views/devtools/test/server.ts
View File

@@ -1,5 +1,5 @@
import { v4 } from "uuid";
import { Msg, Page, PluginEvent } from "../../../core/types";
import { Msg, Page, PluginEvent, RequestNodeInfoData, RequestObjectData, ResponseNodeInfoData, ResponseObjectData, ResponseTreeInfoData } from "../../../core/types";
import { ArrayData, BoolData, ColorData, EngineData, EnumData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, ObjectItemRequestData, Property, StringData, TextData, TreeData, Vec2Data, Vec3Data, Vec4Data } from "../data";
export class TestClient {
recv(event: PluginEvent) {}
@@ -100,8 +100,8 @@ export class TestServer {
}
recv(msg: string, data: any) {
switch (msg) {
case Msg.NodeInfo: {
const id: string = data as string;
case Msg.RequestNodeInfo: {
const id: string = (data as RequestNodeInfoData).uuid;
const node: Node = this.testData.findNode(id);
let group = [];
if (node) {
@@ -111,37 +111,37 @@ export class TestServer {
group.push(g);
}
const ret: NodeInfoData = new NodeInfoData(id, group);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, ret);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseNodeInfo, ret as ResponseNodeInfoData);
this.send(event);
break;
}
case Msg.TreeInfo: {
case Msg.RequstTreeInfo: {
const ret: TreeData = new TreeData();
this.testData.toTreeData(ret);
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, ret);
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, ret as ResponseTreeInfoData);
this.send(event);
break;
}
case Msg.SetProperty: {
case Msg.RequestSetProperty: {
console.log(data);
break;
}
case Msg.GetObjectItemData: {
const objData = data as ObjectData;
case Msg.RequestObjectItemData: {
const objData: RequestObjectData = data as ObjectData;
const info = this.testData.findInfo(objData.id);
if (info && info instanceof ObjectData) {
const ret: ObjectItemRequestData = {
id: objData.id,
data: info.testProperty(),
};
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.GetObjectItemData, ret);
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseObjectItemData, ret as ResponseObjectData);
this.send(event);
} else {
console.warn("not found data: ", objData.id);
}
break;
}
case Msg.LogData: {
case Msg.RequestLogData: {
console.log(data);
break;
}

15
cc-inspector/src/views/devtools/test/test.vue
View File

@@ -15,7 +15,7 @@
import ccui from "@xuyanfeng/cc-ui";
import { storeToRefs } from "pinia";
import { defineComponent, ref } from "vue";
import { Msg, Page, PluginEvent } from "../../../core/types";
import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
import { Terminal } from "../../../scripts/terminal";
import { bridge } from "../bridge";
import { FrameDetails, Group, InvalidData, NodeInfoData, TreeData } from "../data";
@@ -31,7 +31,8 @@ export default defineComponent({
},
setup(props, { emit }) {
const { config } = storeToRefs(appStore());
const show = ref(__DEV__);
// 仅在web环境显示
const show = ref(__DEV__ && !(chrome && chrome.runtime));
// 测试发送的是纯数据
const testData = {
uuid: "d1NHXHs35F1rbFJZKeigkl",
@@ -74,7 +75,7 @@ export default defineComponent({
},
onTerminal() {
const t = new Terminal("flag");
const event = new PluginEvent(Page.Background, Page.Background, Msg.NodeInfo, "");
const event = new PluginEvent(Page.Background, Page.Background, Msg.ResponseTreeInfo, "");
console.log(...t.message("1"));
console.log(...t.log("newline", true));
console.log(...t.log("oneline", false));
@@ -92,7 +93,7 @@ export default defineComponent({
active: true,
children: [],
};
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data);
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.ResponseTreeInfo, data);
bridge.doMessage(event);
},
onFrames() {
@@ -100,16 +101,16 @@ export default defineComponent({
{ url: "url1", frameID: 1 },
{ url: "url2", frameID: 2 },
];
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.UpdateFrames, data);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseUpdateFrames, data as ResponseUpdateFramesData);
testServer.send(event);
},
onTestNodeInfo() {
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, testData);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, testData);
testServer.send(event);
},
onNull() {
const data = new NodeInfoData("", [new Group("", "1").buildProperty("dependAssets", new InvalidData("Null"))]);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.NodeInfo, data);
const event = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseTreeInfo, data);
testServer.send(event);
},
};

5
cc-inspector/src/views/devtools/ui/ui-prop.vue
View File

@@ -32,7 +32,7 @@
import ccui from "@xuyanfeng/cc-ui";
import { Option } from "@xuyanfeng/cc-ui/types/cc-select/const";
import { defineComponent, onMounted, PropType, ref, toRaw, watch } from "vue";
import { Msg } from "../../../core/types";
import { Msg, RequestSetPropertyData } from "../../../core/types";
import { bridge } from "../bridge";
import Bus, { BusMsg } from "../bus";
import { EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
@@ -81,7 +81,6 @@ export default defineComponent({
expand,
subData,
formatValue(data: any) {
console.log(data);
if (data === null) {
return "null";
} else if (data === undefined) {
@@ -139,7 +138,7 @@ export default defineComponent({
onChangeValue() {
if (!props.value.readonly) {
const raw = toRaw(props.value);
bridge.send(Msg.SetProperty, raw);
bridge.send(Msg.RequestSetProperty, raw as RequestSetPropertyData);
}
},
};