CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-16 07:01:03 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

逻辑优化

Browse Source
This commit is contained in:
xu_yanfeng 2025-01-06 19:46:38 +08:00
parent 250155cd35
commit 82215235d9
12 changed files with 150 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
cc-inspector/src/core/types.ts
View File

@ -87,6 +87,8 @@ export enum Msg {
RequestSetProperty = "request-set-property",
ResponseSetProperty = "response-set-property",
RequestVisible = "request-visible",
RequestDestroy = "request-destroy",
ResponseError = "response-error",
}
@ -205,3 +207,4 @@ export function PageInclude(page: Page) {
export function MsgInclude(msg: Msg) {
return inEnum(Msg, msg);
}
export const debugLog: boolean = false;

4
cc-inspector/src/scripts/background/index.ts
View File

@ -1,10 +1,10 @@
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, Page, PluginEvent, RequestSupportData } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent, RequestSupportData } from "../../core/types";
import { Terminal } from "../terminal";
import { PortMan } from "./portMan";
import { portMgr } from "./portMgr";
const terminal = new Terminal(Page.Background);
console.log(...terminal.init());
debugLog && console.log(...terminal.init());
function isDevtools(port: chrome.runtime.Port) {
const devtoolsUrl = `chrome-extension://${port.sender?.id}/${ChromeConst.html.devtools}`;
if (port.sender?.url === devtoolsUrl) {

8
cc-inspector/src/scripts/background/portMan.ts
View File

@ -1,4 +1,4 @@
import { Page, PluginEvent } from "../../core/types";
import { debugLog, Page, PluginEvent } from "../../core/types";
import { Terminal } from "../terminal";
export abstract class PortMan {
@ -29,15 +29,15 @@ export abstract class PortMan {
this.terminal = new Terminal(`Port-${this.name}`);
port.onMessage.addListener((data: any, port: chrome.runtime.Port) => {
const event = PluginEvent.create(data);
console.log(...this.terminal.chunkMessage(event.toChunk()));
debugLog && console.log(...this.terminal.chunkMessage(event.toChunk()));
if (event.valid && this.onMessage) {
this.onMessage(event);
} else {
console.log(...this.terminal.log(JSON.stringify(data)));
debugLog && console.log(...this.terminal.log(JSON.stringify(data)));
}
});
port.onDisconnect.addListener((port: chrome.runtime.Port) => {
console.log(...this.terminal.disconnect(""));
debugLog && console.log(...this.terminal.disconnect(""));
if (this.onDisconnect) {
this.onDisconnect(port);
}

6
cc-inspector/src/scripts/background/portMgr.ts
View File

@ -1,4 +1,4 @@
import { Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent, RequestSupportData, ResponseUpdateFramesData } from "../../core/types";
import { FrameDetails } from "../../views/devtools/data";
import { Terminal } from "../terminal";
import { PortContent } from "./portContent";
@ -76,9 +76,9 @@ export class PortMgr {
if (arr.length) {
// console.table(arr)
console.log(...this.terminal.log(str.join("\n"), true));
debugLog && console.log(...this.terminal.log(str.join("\n"), true));
} else {
console.log(...this.terminal.log("no port connected"));
debugLog && console.log(...this.terminal.log("no port connected"));
}
}
public removePort(item: PortMan) {

20
cc-inspector/src/scripts/content/index.ts
View File

@ -1,12 +1,12 @@
// content.js 和原始界面共享DOM，具有操作dom的能力
// 但是不共享js,要想访问页面js,只能通过注入的方式
import { ChromeConst } from "cc-plugin/src/chrome/const";
import { Msg, Page, PluginEvent, ResponseSupportData } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent, ResponseSupportData } from "../../core/types";
import { DocumentEvent } from "../const";
import { Terminal } from "../terminal";
const terminal = new Terminal(Page.Content);
console.log(...terminal.init());
debugLog && console.log(...terminal.init());
// #region 注入脚本
export function injectScript(url: string) {
@ -19,9 +19,9 @@ export function injectScript(url: string) {
document.head.removeChild(script);
};
document.head.appendChild(script);
console.log(...terminal.green(`inject script success: ${content}`));
debugLog && console.log(...terminal.green(`inject script success: ${content}`));
} else {
console.log(...terminal.red("inject script failed"));
debugLog && console.log(...terminal.red("inject script failed"));
}
}
@ -29,13 +29,13 @@ export function injectScript(url: string) {
document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) => {
let data: PluginEvent = PluginEvent.create(event.detail);
if (data.valid && data.check(Page.Inject, Page.Content)) {
console.log(...terminal.chunkMessage(data.toChunk()));
debugLog && console.log(...terminal.chunkMessage(data.toChunk()));
data.reset(Page.Content, Page.Devtools);
if (connect) {
// 接受来自inject.js的消息数据,然后中转到background.js
connect.postMessage(data);
} else {
console.log(...terminal.log(`connect is null`));
debugLog && console.log(...terminal.log(`connect is null`));
throw new Error("connect is null");
}
} else {
@ -45,16 +45,16 @@ document.addEventListener(DocumentEvent.Inject2Content, (event: CustomEvent) =>
// #region 和background通讯
let connect: chrome.runtime.Port = chrome.runtime.connect({ name: Page.Content });
connect.onDisconnect.addListener(() => {
console.log(...terminal.disconnect(""));
debugLog && console.log(...terminal.disconnect(""));
connect = null;
});
connect.onMessage.addListener((data: PluginEvent, sender: chrome.runtime.Port) => {
const event = PluginEvent.create(data);
if (event.valid && event.check(Page.Background, Page.Content)) {
console.log(...terminal.chunkMessage(event.toChunk()));
debugLog && console.log(...terminal.chunkMessage(event.toChunk()));
event.reset(Page.Content, Page.Inject);
const e = new CustomEvent(DocumentEvent.Content2Inject, { detail: event });
console.log(...terminal.chunkSend(event.toChunk()));
debugLog && console.log(...terminal.chunkSend(event.toChunk()));
document.dispatchEvent(e);
} else {
throw new Error(`invalid data: ${data}`);
@ -70,7 +70,7 @@ function checkGame() {
if (connect) {
connect.postMessage(sendData);
} else {
console.log(...terminal.log(`connect is null`));
debugLog && console.log(...terminal.log(`connect is null`));
throw new Error("connect is null");
}
}

6
cc-inspector/src/scripts/inject/event.ts
View File

@ -1,4 +1,4 @@
import { Msg, Page, PluginEvent } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
import { DocumentEvent } from "../const";
import { Terminal } from "../terminal";
@ -7,14 +7,14 @@ export class InjectEvent {
constructor() {
document.addEventListener(DocumentEvent.Content2Inject, (event: CustomEvent) => {
const pluginEvent: PluginEvent = PluginEvent.create(event.detail);
console.log(...this.terminal.chunkMessage(pluginEvent.toChunk()));
debugLog && console.log(...this.terminal.chunkMessage(pluginEvent.toChunk()));
this.onMessage(pluginEvent);
});
}
onMessage(data: PluginEvent) {}
sendMsgToContent(msg: Msg, data: any) {
const detail = new PluginEvent(Page.Inject, Page.Content, msg, data);
console.log(...this.terminal.chunkSend(detail.toChunk()));
debugLog && console.log(...this.terminal.chunkSend(detail.toChunk()));
const event = new CustomEvent(DocumentEvent.Inject2Content, { detail });
document.dispatchEvent(event);
}

20
cc-inspector/src/scripts/inject/inspector.ts
View File

@ -1,6 +1,6 @@
// eval 注入脚本的代码,变量尽量使用var,后来发现在import之后,let会自动变为var
import { uniq } from "lodash";
import { Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
import { debugLog, Msg, PluginEvent, RequestLogData, RequestNodeInfoData, RequestSetPropertyData, ResponseNodeInfoData, ResponseSetPropertyData, ResponseSupportData, ResponseTreeInfoData } from "../../core/types";
import { ArrayData, BoolData, ColorData, DataType, EngineData, Group, ImageData, Info, InvalidData, NodeInfoData, NumberData, ObjectData, Property, StringData, TreeData, Vec2Data, Vec3Data } from "../../views/devtools/data";
import { InjectEvent } from "./event";
import { getValue, trySetValueWithConfig } from "./setValue";
@ -62,10 +62,26 @@ export class Inspector extends InjectEvent {
logFunction(value);
break;
}
case Msg.RequestVisible: {
const uuid: string = pluginEvent.data;
const node = this.inspectorGameMemoryStorage[uuid];
if (node) {
node.active = !node.active;
}
break;
}
case Msg.RequestDestroy: {
const uuid: string = pluginEvent.data;
const node = this.inspectorGameMemoryStorage[uuid];
if (node && node.isValid && node.destroy) {
node.destroy();
}
break;
}
}
}
init() {
console.log(...this.terminal.init());
debugLog && console.log(...this.terminal.init());
this.watchIsCocosGame();
}

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

@ -1,6 +1,6 @@
import CCP from "cc-plugin/src/ccp/entry-render";
import { TinyEmitter } from "tiny-emitter";
import { Msg, Page, PluginEvent } from "../../core/types";
import { debugLog, Msg, Page, PluginEvent } from "../../core/types";
import { Terminal } from "../../scripts/terminal";
import { TestClient, testServer } from "./test/server";
export type BridgeCallback = (data: PluginEvent, sender: chrome.runtime.Port) => void;
@ -22,13 +22,13 @@ class Bridge implements TestClient {
if (CCP.Adaptation.Env.isChromeRuntime) {
this.connect = chrome.runtime.connect({ name: Page.Devtools });
this.connect.onDisconnect.addListener(() => {
console.log(...this.terminal.disconnect(""));
debugLog && console.log(...this.terminal.disconnect(""));
this.connect = null;
});
this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => {
const data = PluginEvent.create(event);
console.log(...this.terminal.chunkMessage(data.toChunk()));
debugLog && console.log(...this.terminal.chunkMessage(data.toChunk()));
if (data.valid && data.isTargetDevtools()) {
this.emitter.emit(data.msg, data);
} else {

76
cc-inspector/src/views/devtools/comp/index.ts
View File

@ -1,18 +1,74 @@
export enum CompType {
Node2 = "node-2",
Spirte2 = "sprite-2",
Label2 = "label-2",
Node3 = "node-3",
Spirte3 = "sprite-3",
Label3 = "label-3",
Node = "cc.Node",
Spirte = "cc.Sprite",
Label = "cc.Label",
Widget = "cc.Widget",
Camera = "cc.Camera",
UITransform = "cc.UITransform",
}
export function getSimpleProperties(typeName: string): string[] {
const config = {};
config[CompType.Node2] = ["position", "rotation", "scale", "anchor", "size", "color", "opacity", "skew", "group"];
config[CompType.Label2] = ["string", "horizontalAlign", "verticalAlign", "fontSize", "lineHeight", "overflow", "font", "fontFamily", "ebableBold", "enableItalic", "enableUnderline", "underlineHeight", "cacheMode", "useSystemFont"];
config[CompType.Spirte2] = ["atlas", "spriteFrame", "type", "sizeMode"];
config[CompType.Node] = [
"position", //
"rotation",
"scale",
"anchor",
"size",
"color",
"opacity",
"skew",
"group",
//----------
"worldPosition",
"worldScale",
// "worldRotation",// 渲染有问题，暂时先不支持这个属性
];
config[CompType.UITransform] = ["anchor", "size"];
config[CompType.Widget] = [
"left",
"right",
"top",
"bottom",
"alignMode", //
"isAlignLeft",
"isAlignRight",
"isAlignTop",
"isAlignBottom",
];
config[CompType.Label] = [
"string", //
"horizontalAlign",
"verticalAlign",
"fontSize",
"lineHeight",
"overflow",
"font",
"fontFamily",
"ebableBold",
"enableItalic",
"enableUnderline",
"underlineHeight",
"cacheMode",
"useSystemFont",
];
config[CompType.Camera] = ["clearColor", "clearFlags", "cullingMask", "depth", "zoomRatio", "alignWithScreen"];
config[CompType.Spirte] = [
"atlas",
"spriteFrame",
"type",
"sizeMode", //
"fillCenter",
"fillRange",
"fillRange",
"fillStart",
"fillType",
"grayscale",
"color",
"spriteAtlas",
"trim",
"type",
];
return config[typeName] || [];
}
export const VisibleProp = {

27
cc-inspector/src/views/devtools/hierarchy.vue
View File

@ -13,6 +13,7 @@
<script lang="ts">
import ccui from "@xuyanfeng/cc-ui";
import { IUiMenuItem } from "@xuyanfeng/cc-ui/types/cc-menu/const";
import Mousetrap, { MousetrapInstance } from "mousetrap";
import { storeToRefs } from "pinia";
import { defineComponent, nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
import { Msg, PluginEvent, RequestTreeInfoData, ResponseSetPropertyData } from "../../core/types";
@ -26,7 +27,6 @@ export default defineComponent({
name: "hierarchy",
components: { CCButtonGroup, CCInput, CCTree, CCDock },
setup() {
onMounted(() => {});
const funcShowPlace = (data: EngineData) => {
console.log(toRaw(data));
_expand(data.engineUUID);
@ -41,12 +41,27 @@ export default defineComponent({
const timer: Timer = new Timer(() => {
updateTree();
});
let ins: MousetrapInstance | null = null;
function onQuickVisible() {
console.log("onQuickVisible");
if (selectedUUID) {
bridge.send(Msg.RequestVisible, selectedUUID);
}
}
onMounted(() => {
if (elTree.value) {
const el = toRaw(elTree.value);
ins = new Mousetrap(el.treeElement);
ins.bind(["space"], onQuickVisible, "keydown");
}
Bus.on(BusMsg.ShowPlace, funcShowPlace);
Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
timer.create();
});
onUnmounted(() => {
if (ins) {
ins.unbind(["space"], "keydown");
}
Bus.off(BusMsg.ShowPlace, funcShowPlace);
Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
timer.clean();
@ -96,7 +111,7 @@ export default defineComponent({
});
const { config, frameID } = storeToRefs(appStore());
const matchCase = ref<boolean>(false);
const elTree = ref<typeof CCTree>();
const elTree = ref<typeof CCTree>(null);
const treeData = ref<TreeData[]>([]);
let selectedUUID: string | null = null;
bridge.on(Msg.ResponseTreeInfo, (event: PluginEvent) => {
@ -199,17 +214,17 @@ export default defineComponent({
});
if (selectedUUID) {
menus.push({
name: "visible",
name: "visible (sapce)",
enabled: true,
callback: () => {
console.log("visible");
onQuickVisible();
},
});
menus.push({
name: "destroy",
enabled: false,
enabled: true,
callback: () => {
console.log("destroy");
bridge.send(Msg.RequestDestroy, selectedUUID);
},
});
}

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

@ -186,6 +186,13 @@ export class TestServer {
console.log(data);
break;
}
case Msg.RequestVisible: {
const node: Node = this.testData.findNode(data);
if (node) {
node.active = !node.active;
}
break;
}
default:
break;
}

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

@ -26,7 +26,7 @@
import ccui from "@xuyanfeng/cc-ui";
import { storeToRefs } from "pinia";
import { defineComponent, ref } from "vue";
import { Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
import { debugLog, Msg, Page, PluginEvent, ResponseUpdateFramesData } from "../../../core/types";
import { Terminal } from "../../../scripts/terminal";
import { bridge } from "../bridge";
import { Bus, BusMsg } from "../bus";
@ -89,15 +89,15 @@ export default defineComponent({
onTerminal() {
const t = new Terminal("flag");
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));
console.log(...t.disconnect("disconnect"));
console.log(...t.connect("connect"));
console.log(...t.red("red"));
console.log(...t.green("green"));
console.log(...t.blue("blue"));
console.log(...t.chunkMessage(event.toChunk()));
debugLog && console.log(...t.message("1"));
debugLog && console.log(...t.log("newline", true));
debugLog && console.log(...t.log("oneline", false));
debugLog && console.log(...t.disconnect("disconnect"));
debugLog && console.log(...t.connect("connect"));
debugLog && console.log(...t.red("red"));
debugLog && console.log(...t.green("green"));
debugLog && console.log(...t.blue("blue"));
debugLog && console.log(...t.chunkMessage(event.toChunk()));
},
onTestTree1() {
const data: TreeData = {