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-24 21:09:13 +08:00
parent d62cc0a26c
commit 27f4884216
13 changed files with 199 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
cc-inspector/src/views/devtools/bridge.ts Normal file
View File

@@ -0,0 +1,69 @@
import CCP from "cc-plugin/src/ccp/entry-render";
import { Msg, Page, PluginEvent } from "../../core/types";
import { TestClient, testServer, TestServer } from "./test/server";
import { Terminal } from "../../scripts/terminal";
export type BridgeCallback = (data: PluginEvent, sender: chrome.runtime.Port) => void;
if (chrome.devtools) {
console.log("chrome devtools")
}
class Bridge implements TestClient {
/**
* 把callback保存为变量，方便测试
*/
public onMessage: BridgeCallback | null = null;
/**
* 和background建立的链接
*/
private connect: chrome.runtime.Port | null = null;
private terminal = new Terminal(Page.Devtools);
constructor() {
this.init();
}
private init() {
if (CCP.Adaptation.Env.isChromeRuntime) {
this.connect = chrome.runtime.connect({ name: Page.Devtools });
this.connect.onDisconnect.addListener(() => {
console.log(...this.terminal.disconnect(""))
this.connect = null;
})
this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => {
console.log(...this.terminal.message(JSON.stringify(event)));
const data = PluginEvent.create(event);
if (this.onMessage) {
this.onMessage(data, sender);
}
});
} else {
testServer.add(this);
}
}
recv(event: PluginEvent): void {
this.doMessage(event);
}
doMessage(data: PluginEvent) {
if (this.onMessage) {
this.onMessage(data, null);
}
}
send(msg: Msg, data?: any) {
if (CCP.Adaptation.Env.isChromeDevtools) {
if (this.connect) {
let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)
this.connect.postMessage(sendData)
} else {
console.warn(...this.terminal.log("重新和background建立链接"))
this.init();
this.send(msg, data)
}
} else {
testServer.recv(msg, data);
}
}
}
export const bridge = new Bridge();

69
cc-inspector/src/views/devtools/connectBackground.ts
View File

@@ -1,69 +0,0 @@
import CCP from "cc-plugin/src/ccp/entry-render";
import { Msg, Page, PluginEvent } from "../../core/types";
import { TestClient, testServer, TestServer } from "./test/server";
export type BackgroundCallback = (data: PluginEvent, sender: any) => void;
if (chrome.devtools) {
console.log("chrome devtools")
}
class ConnectBackground implements TestClient {
connect: chrome.runtime.Port | null = null;
constructor() {
this._initConnect();
}
private _initConnect() {
if (CCP.Adaptation.Env.isChromeRuntime) {
this.connect = chrome.runtime.connect({ name: Page.Devtools });
this.connect.onDisconnect.addListener(() => {
console.log(`%c[Connect-Dis]`, "color:red;")
this.connect = null;
})
} else {
testServer.add(this);
}
}
/**
* 把callback保存为变量，方便测试
*/
private callback: BackgroundCallback | null = null;
onBackgroundMessage(cb: BackgroundCallback) {
this.callback = cb;
if (this.connect) {
this.connect.onMessage.addListener((event, sender) => {
cb && cb(event, sender)
});
}
}
recv(event: PluginEvent): void {
this.doCallback(event);
}
doCallback(data: PluginEvent) {
if (this.callback) {
this.callback(data, null);
}
}
sendMsgToContentScript(msg: Msg, data?: any) {
if (CCP.Adaptation.Env.isChromeDevtools) {
this.postMessageToBackground(msg, data);
} else {
testServer.recv(msg, data);
}
}
postMessageToBackground(msg: Msg, data?: any) {
if (CCP.Adaptation.Env.isChromeDevtools) {
if (this.connect) {
let sendData = new PluginEvent(Page.Devtools, Page.Background, msg, data)
this.connect.postMessage(sendData)
} else {
console.warn("重新和background建立链接")
this._initConnect();
this.postMessageToBackground(msg, data)
}
} else {
testServer.recv(msg, data);
}
}
}
export const connectBackground = new ConnectBackground();

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

@@ -48,7 +48,7 @@ import { defineComponent, nextTick, onMounted, PropType, reactive, Ref, ref, toR
import PluginConfig from "../../../cc-plugin.config";
import { Msg, Page, PluginEvent } from "../../core/types";
import Bus, { BusMsg } from "./bus";
import { connectBackground } from "./connectBackground";
import { bridge } from "./bridge";
import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
import { appStore, RefreshType } from "./store";
import Test from "./test/test.vue";
@@ -274,12 +274,12 @@ export default defineComponent({
}
};
// 接收来自background.js的消息数据
connectBackground.onBackgroundMessage((data: PluginEvent, sender: any) => {
bridge.onMessage = (data: PluginEvent, sender: any) => {
if (!data) {
return;
}
if (data.target === Page.Devtools) {
console.log("[Devtools]", data);
debugger;
if (data.isTargetDevtools()) {
PluginEvent.finish(data);
const { msg } = data;
if (msg) {
@@ -290,8 +290,10 @@ export default defineComponent({
console.warn(`没有${msg}消息的函数`);
}
}
} else {
debugger;
}
});
};
}
_initChromeRuntimeConnect();
window.addEventListener(
@@ -310,13 +312,13 @@ export default defineComponent({
return;
}
requestList.push({ id: data.id, cb });
connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data);
bridge.send(Msg.GetObjectItemData, data);
});
Bus.on(BusMsg.UpdateSettings, () => {
syncSettings();
});
Bus.on(BusMsg.LogData, (data: string[]) => {
connectBackground.sendMsgToContentScript(Msg.LogData, data);
bridge.send(Msg.LogData, data);
});
onMounted(() => {
syncSettings();
@@ -381,7 +383,7 @@ export default defineComponent({
}
function updateNodeInfo() {
if (selectedUUID) {
connectBackground.sendMsgToContentScript(Msg.NodeInfo, selectedUUID);
bridge.send(Msg.NodeInfo, selectedUUID);
}
}
let selectedUUID: string | null = null;
@@ -389,10 +391,12 @@ export default defineComponent({
(elTree.value as any)?.filter(val);
}
function onBtnClickUpdateTree() {
connectBackground.sendMsgToContentScript(Msg.TreeInfo, frameID);
const id = toRaw(frameID.value);
bridge.send(Msg.TreeInfo, id);
}
function onChangeFrame() {
connectBackground.sendMsgToContentScript(Msg.UseFrame, frameID);
const id = toRaw(frameID.value);
bridge.send(Msg.UseFrame, id);
}
const elLeft = ref<HTMLDivElement>();
const version = ref(PluginConfig.manifest.version);
@@ -451,10 +455,10 @@ export default defineComponent({
},
onBtnClickUpdatePage() {
connectBackground.sendMsgToContentScript(Msg.Support);
bridge.send(Msg.Support);
},
onMemoryTest() {
connectBackground.sendMsgToContentScript(Msg.MemoryInfo);
bridge.send(Msg.MemoryInfo);
},
onChangeFrame,

4
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 { bridge } from "./bridge";
import { Msg } from "../../core/types";
export function init() {
if (chrome && chrome.devtools) {
// 对应的是Elements面板的边栏
@@ -18,7 +20,7 @@ export function init() {
panel.onShown.addListener((window) => {
// 面板显示，查询是否是cocos游戏
console.log("panel show");
// connectBackground.postMessageToBackground(Msg.Support, null)
// bridge.sendToBackground(Msg.Support, null)
});
panel.onHidden.addListener(() => {
// 面板隐藏

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

@@ -15,7 +15,7 @@ import ccui from "@xuyanfeng/cc-ui";
import { ITreeData } from "@xuyanfeng/cc-ui/types/cc-tree/const";
import { defineComponent, ref } from "vue";
import { Msg, Page, PluginEvent } from "../../../core/types";
import { connectBackground } from "../connectBackground";
import { bridge } from "../bridge";
import { FrameDetails, Group, Info, InvalidData, NodeInfoData, TreeData } from "../data";
import { testServer, TestServer } from "./server";
const { CCButton, CCSection } = ccui.components;
@@ -70,7 +70,7 @@ export default defineComponent({
children: [],
};
const event = new PluginEvent(Page.Inject, Page.Devtools, Msg.TreeInfo, data);
connectBackground.doCallback(event);
bridge.doMessage(event);
},
onFrames() {
const data: FrameDetails[] = [

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

@@ -14,7 +14,7 @@
<script lang="ts">
import ccui from "@xuyanfeng/cc-ui";
import { defineComponent, PropType, ref, watch } from "vue";
import { defineComponent, PropType, ref, toRaw, watch } from "vue";
import Bus, { BusMsg } from "../bus";
import { Group } from "../data";
import UiProp from "./ui-prop.vue";
@@ -53,7 +53,8 @@ export default defineComponent({
return {
fold,
onLog() {
Bus.emit(BusMsg.LogData, [props.group.id]);
const raw = toRaw(props);
Bus.emit(BusMsg.LogData, [raw.group.id]);
},
};
},

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

@@ -35,7 +35,7 @@ import { nextTick } from "process";
import { defineComponent, onMounted, onUnmounted, PropType, ref, toRaw, watch } from "vue";
import { Msg } from "../../../core/types";
import Bus, { BusMsg } from "../bus";
import { connectBackground } from "../connectBackground";
import { bridge } from "../bridge";
import { DataType, EngineData, EnumData, ImageData, Info, NumberData, Property, StringData, TextData, Vec2Data, Vec3Data } from "../data";
import Engine from "./property-engine.vue";
import PropertyImage from "./property-image.vue";
@@ -139,7 +139,8 @@ export default defineComponent({
},
onChangeValue() {
if (!props.value.readonly) {
connectBackground.postMessageToBackground(Msg.SetProperty, toRaw(props.value));
const raw = toRaw(props.value);
bridge.send(Msg.SetProperty, raw);
}
},
};