CocosPlugin/cc-inspector-chrome
1
0
Fork 0
mirror of https://github.com/tidys/cc-inspector-chrome synced 2025-04-20 08:58:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化多个frame的inspect target的逻辑

Browse Source
This commit is contained in:
xu_yanfeng 2025-01-08 16:37:12 +08:00
parent 0c5279e8e2
commit a20b913e37
11 changed files with 52 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
cc-inspector/src/scripts/background/portContent.ts
View File

@ -16,24 +16,10 @@ export class PortContent extends PortMan {
};
}
init(): void {
// 使用新连上来的content
const { frameId } = this.port.sender;
if (frameId !== undefined) {
portMgr.useFrame(frameId);
}
// 新的content连上来，需要更新devtools
portMgr.updateFrames();
this.onDisconnect = (disPort: chrome.runtime.Port) => {
/**
* const index = this.content.findIndex((el) =>
disPort.sender?.frameId !== undefined &&
el.sender?.frameId !== undefined &&
el.sender?.frameId === disPort.sender?.frameId
);
*/
// content失去链接需要更新Devtools
portMgr.removePort(this);
portMgr.updateFrames();
};
this.onMessage = (data: PluginEvent) => {
// content的数据一般都是要同步到devtools

25
cc-inspector/src/scripts/background/portDevtools.ts
View File

@ -1,38 +1,27 @@
import { Msg, Page, PluginEvent, RequestTreeInfoData, RequestUseFrameData, ResponseSupportData } from "../../core/types";
import { Msg, Page, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types";
import { PortMan } from "./portMan";
import { portMgr } from "./portMgr";
export class PortDevtools extends PortMan {
init(): void {
// 当devtools链接后，主动同步frames数据
portMgr.updateFrames();
this.onDisconnect = () => {
portMgr.removePort(this);
};
this.onMessage = (data: PluginEvent) => {
if (data.msg === Msg.RequestUseFrame) {
// 因为devtool是定时器驱动，这里改变了content，后续就会将数据派发到对应的content中去
portMgr.useFrame((data.data as RequestUseFrameData).id);
} else {
// 从devtools过来的消息统一派发到Content中
// 从devtools过来的消息统一派发到目标content中
if (data.check(Page.Devtools, Page.Background)) {
if (data.msg === Msg.RequstTreeInfo) {
const d = data.data as RequestTreeInfoData;
if (!portMgr.isCurrentFrme(d.frameID)) {
console.log(`frameID[${data.data}]不一致`);
debugger;
}
}
data.reset(Page.Background, Page.Content);
const port = portMgr.getCurrentUsePort();
if (!port) {
console.warn(`not find any port`);
const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, { support: false, msg: "disconnect with game, please refresh page" } as ResponseSupportData);
this.send(e);
return;
}
if (port) {
port.send(data);
} else {
debugger;
const e = new PluginEvent(Page.Background, Page.Devtools, Msg.ResponseSupport, { support: false, msg: "disconnect with game, please refresh page" } as ResponseSupportData);
this.send(e);
}
}
}
};

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

@ -56,6 +56,7 @@ export class PortMgr {
}
if (portMan) {
this.portArray.push(portMan);
this.updateFrames();
this.logState();
return portMan;
}
@ -85,6 +86,7 @@ export class PortMgr {
let index = this.portArray.findIndex((el) => el === item);
if (index > -1) {
this.portArray.splice(index, 1);
this.updateFrames();
this.logState();
}
}
@ -110,15 +112,6 @@ export class PortMgr {
}
useFrame(id: number) {
this.currentUseContentFrameID = id;
// 更新这个frame的tree
const sendData = new PluginEvent(Page.Background, Page.Content, Msg.RequestSupport, {} as RequestSupportData);
this.getCurrentUsePort()?.send(sendData);
}
isCurrentFrme(id: number) {
if (typeof id !== "number") {
throw new Error("id must be number");
}
return this.currentUseContentFrameID === id;
}
}
export const portMgr = new PortMgr();

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

@ -201,6 +201,9 @@ export class Inspector extends InjectEvent {
"quat",
"node",
"components",
"enabledInHierarchy",
"hideFlags",
"isValid",
"parent",
// 生命周期函数
"onFocusInEditor",
@ -214,6 +217,14 @@ export class Inspector extends InjectEvent {
"onDisable",
"onDestroy",
"onLoad",
"internalLateUpdate",
"internalOnDestroy",
"internalOnEnable",
"internalOnDisable",
"internalUpdate",
"internalPreload",
"internalOnLoad",
"internalStart",
];
const keyHidden = this.getAllPropertyDescriptors(node);
const keyVisible1 = Object.keys(node); // Object不走原型链

1
cc-inspector/src/views/devtools/bus.ts
View File

@ -8,6 +8,7 @@ export enum BusMsg {
* 开关定时器，方便测试
*/
EnableSchedule = "EnableSchedule",
ChangeContent = "ChangeContent",
SelectNode = "SelectNode",
}

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

@ -25,10 +25,16 @@ export enum CompType {
Button = "cc.Button",
BlockInputEvents = "cc.BlockInputEvents",
Scene = "cc.Scene",
Animation = "cc.Animation",
}
export function getSimpleProperties(typeName: string): string[] {
const config = {};
config[CompType.Animation] = [
"defaultClip", //
"clips",
"playOnLoad",
];
config[CompType.Scene] = [
"autoReleaseAssets",
"position",

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

@ -16,7 +16,7 @@ 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";
import { Msg, PluginEvent, RequestTreeInfoData, RequestUseFrameData, ResponseSetPropertyData } from "../../core/types";
import { bridge } from "./bridge";
import { Bus, BusMsg } from "./bus";
import { EngineData, TreeData } from "./data";
@ -48,12 +48,17 @@ export default defineComponent({
bridge.send(Msg.RequestVisible, selectedUUID);
}
}
function changeContent(data: RequestUseFrameData) {
treeData.value = [];
selectedUUID = null;
}
onMounted(() => {
if (elTree.value) {
const el = toRaw(elTree.value);
ins = new Mousetrap(el.treeElement);
ins.bind(["space"], onQuickVisible, "keydown");
}
Bus.on(BusMsg.ChangeContent, changeContent);
Bus.on(BusMsg.ShowPlace, funcShowPlace);
Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
timer.create();
@ -62,6 +67,7 @@ export default defineComponent({
if (ins) {
ins.unbind(["space"], "keydown");
}
Bus.off(BusMsg.ChangeContent, changeContent);
Bus.off(BusMsg.ShowPlace, funcShowPlace);
Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
timer.clean();

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

@ -74,7 +74,9 @@ export default defineComponent({
const tabID = chrome.devtools.inspectedWindow.tabId;
chrome.scripting.executeScript({ files: ["js/execute.js"], target: { tabId: tabID } }, (results: chrome.scripting.InjectionResult[]) => {});
}
ccui.footbar.showTipsArray({
tips: ["press space in the hierarchy to quickly control the display and hiding of nodes"],
});
function _inspectedCode() {
let injectCode = "";
chrome.devtools.inspectedWindow.eval(injectCode, (result, isException) => {
@ -120,12 +122,6 @@ export default defineComponent({
value: item.frameID,
};
});
// 第一次获取到frame配置后，自动获取frame数据
if (frameID === null && iframes.value.length > 0 && !iframes.value.find((el) => el.value === frameID.value)) {
frameID.value = iframes[0].value;
onChangeFrame();
}
});
const memory = ref<{
@ -148,6 +144,7 @@ export default defineComponent({
function onChangeFrame() {
const id = Number(toRaw(frameID.value));
bridge.send(Msg.RequestUseFrame, { id } as RequestUseFrameData);
Bus.emit(BusMsg.ChangeContent, { id } as RequestUseFrameData);
}
const elLeft = ref<HTMLDivElement>();
const version = ref(PluginConfig.manifest.version);

8
cc-inspector/src/views/devtools/inspector.vue
View File

@ -26,7 +26,6 @@ export default defineComponent({
console.log(`update node info: ${selectedUUID}`);
bridge.send(Msg.RequestNodeInfo, { uuid: selectedUUID } as RequestNodeInfoData);
} else {
// TODO: 需要检查当前的这个节点是否有效
treeItemData.value = null;
}
}
@ -44,12 +43,19 @@ export default defineComponent({
selectedUUID = uuid;
updateNodeInfo();
};
function changeContent() {
selectedUUID = null;
treeItemData.value = null;
}
onMounted(() => {
Bus.on(BusMsg.ChangeContent, changeContent);
Bus.on(BusMsg.SelectNode, funSelectNode);
Bus.on(BusMsg.EnableSchedule, funcEnableSchedule);
timer.create();
});
onUnmounted(() => {
Bus.off(BusMsg.ChangeContent, changeContent);
Bus.off(BusMsg.SelectNode, funSelectNode);
Bus.off(BusMsg.EnableSchedule, funcEnableSchedule);
timer.clean();

18
cc-inspector/src/views/devtools/ui/property-engine.vue
View File

@ -9,6 +9,7 @@
<script lang="ts">
import { defineComponent, PropType, toRaw } from "vue";
import { Bus, BusMsg } from "../bus";
import { CompType } from "../comp";
import { EngineData } from "../data";
export default defineComponent({
name: "property-engine",
@ -25,18 +26,11 @@ export default defineComponent({
Bus.emit(BusMsg.ShowPlace, toRaw(props.data));
},
getEngineTypeIcon() {
switch (props.data.engineType) {
case "cc_Sprite": {
return "icon_picture";
}
case "cc_Label": {
return "icon_text";
}
case "cc_Node": {
return "icon_node";
}
}
return "icon_unknown";
const map = {};
map[CompType.Spirte] = "icon_picture";
map[CompType.Label] = "icon_text";
map[CompType.Node] = "icon_node";
return map[props.data.engineType] || "icon_unknown";
},
};
},

3
cc-inspector/src/views/devtools/ui/property-image.vue
View File

@ -75,8 +75,9 @@ export default defineComponent({
}
.url {
padding: 0 5px;
flex: 1;
color: white;
color: gray;
font-weight: normal;
font-size: 12px;
overflow: hidden;