diff --git a/src/core/types.ts b/src/core/types.ts index d4144bf..7ac263e 100644 --- a/src/core/types.ts +++ b/src/core/types.ts @@ -122,7 +122,11 @@ export enum Msg { ResponseUpdateFrames = "response-update-frames", RequestUseFrame = "request-use-frame", ResponseUseFrame = "response-use-frame", - + /** + * 测试从background层主动断开devtools的链接 + */ + RequestDisconnectDevtools = "request-disconnect-devtools", + DevtoolConnectError = "devtool-connect-error", RequestLogData = "request-log-data", RequestLogCustom = "request-log-custom", ReqWriteClipboard = "request-write-clipboard", diff --git a/src/scripts/background/content.ts b/src/scripts/background/content.ts index c26a9a1..00ba06f 100644 --- a/src/scripts/background/content.ts +++ b/src/scripts/background/content.ts @@ -42,6 +42,10 @@ export class Content { } }); port.onDisconnect.addListener((port: chrome.runtime.Port) => { + const ret = ["localhost", "127.0.0.1"].find((el) => port.sender.url.includes(el)); + if (ret) { + debugger; + } debugLog && console.log(...this.terminal.disconnect("")); this.onDisconnect(port); }); diff --git a/src/scripts/background/devtools.ts b/src/scripts/background/devtools.ts index 2d79807..21003e9 100644 --- a/src/scripts/background/devtools.ts +++ b/src/scripts/background/devtools.ts @@ -1,4 +1,4 @@ -import { debugLog, Msg, Page, PluginEvent, RequestUseFrameData, ResponseSupportData } from "../../core/types"; +import { debugLog, Msg, Page, PluginEvent, RequestUseFrameData } from "../../core/types"; import { Terminal } from "../terminal"; import { TabInfo } from "./tabInfo"; @@ -34,10 +34,12 @@ export class Devtools { } }); port.onDisconnect.addListener((port: chrome.runtime.Port) => { - debugLog && console.log(...this.terminal.disconnect("")); - if (this.onDisconnect) { - this.onDisconnect(port); + const ret = ["localhost", "127.0.0.1"].find((el) => port.sender.url.includes(el)); + if (ret) { + debugger; } + debugLog && console.log(...this.terminal.disconnect("")); + this.onDisconnect(port); }); } public onDisconnect(port: chrome.runtime.Port) { @@ -47,6 +49,11 @@ export class Devtools { if (data.msg === Msg.RequestUseFrame) { // 因为devtool是定时器驱动,这里改变了content,后续就会将数据派发到对应的content中去 this.tabInfo.useFrame((data.data as RequestUseFrameData).id); + } else if (data.msg === Msg.RequestDisconnectDevtools) { + if (this.port) { + this.port.disconnect(); + this.tabInfo.devtool = null; + } } else { // 从devtools过来的消息统一派发到目标content中 if (data.check(Page.Devtools, Page.Background)) { diff --git a/src/scripts/background/index.ts b/src/scripts/background/index.ts index bca67d9..a7e54d8 100644 --- a/src/scripts/background/index.ts +++ b/src/scripts/background/index.ts @@ -1,8 +1,8 @@ -import { debugLog, Page, PluginEvent } from "../../core/types"; +import { debugLog, Msg, Page, PluginEvent } from "../../core/types"; import { getDevToolsInspectorId } from "../../core/util"; import { Terminal } from "../terminal"; -import { tabMgr } from "./tabMgr"; import "./notify"; +import { tabMgr } from "./tabMgr"; const terminal = new Terminal(Page.Background); debugLog && console.log(...terminal.init()); @@ -16,11 +16,15 @@ chrome.runtime.onConnect.addListener((port: chrome.runtime.Port) => { tabMgr.addTab(tab, port); } else if (port.name.startsWith(Page.Devtools)) { const id = getDevToolsInspectorId(port.name); + console.log(`devtools tab id is ${id}`); const tab = tabMgr.findTab(id); if (tab) { tab.addDevtools(port); } else { - debugger; + // 没有发现与之对应的调试content,主动断开链接 + const event = new PluginEvent(Page.Background, Page.Devtools, Msg.DevtoolConnectError, "missing content"); + port.postMessage(event); + port.disconnect(); } } }); diff --git a/src/scripts/background/tabMgr.ts b/src/scripts/background/tabMgr.ts index cce42ab..5caf49d 100644 --- a/src/scripts/background/tabMgr.ts +++ b/src/scripts/background/tabMgr.ts @@ -1,6 +1,10 @@ import { TabInfo } from "./tabInfo"; export class TabMgr { + constructor() { + debugger; + this.tabArray = []; + } /** * chrome打开的所有标签页面 */ diff --git a/src/views/devtools/bridge.ts b/src/views/devtools/bridge.ts index 2972760..35d4dbf 100644 --- a/src/views/devtools/bridge.ts +++ b/src/views/devtools/bridge.ts @@ -16,6 +16,13 @@ class Bridge implements TestClient { private terminal = new Terminal(Page.Devtools); private _inited = false; + public disconnect() { + if (this.connect) { + this.connect.disconnect(); + this.connect = null; + debugger; + } + } private init() { if (this._inited) { return; @@ -25,9 +32,10 @@ class Bridge implements TestClient { // 调试的标签ID const id = chrome.devtools.inspectedWindow.tabId; this.connect = chrome.runtime.connect({ name: `${Page.Devtools}-${id}` }); - this.connect.onDisconnect.addListener(() => { + this.connect.onDisconnect.addListener((port: chrome.runtime.Port) => { debugLog && console.log(...this.terminal.disconnect("")); this.connect = null; + debugger; }); this.connect.onMessage.addListener((event, sender: chrome.runtime.Port) => { diff --git a/src/views/devtools/data.ts b/src/views/devtools/data.ts index 885a06d..0729d06 100644 --- a/src/views/devtools/data.ts +++ b/src/views/devtools/data.ts @@ -546,6 +546,19 @@ export class TreeData implements ITreeData { this.id = id; this.text = text; } + test(text: string) { + this.id = this.text = text; + this.color = "#ffffffff"; + this.icon = "icon_node"; + this.active = true; + this.children = []; + return this; + } + testaddChild(text: string) { + const child = new TreeData().test(text); + this.children.push(child); + return child; + } } export class Property { diff --git a/src/views/devtools/index.vue b/src/views/devtools/index.vue index 993624c..766e572 100644 --- a/src/views/devtools/index.vue +++ b/src/views/devtools/index.vue @@ -136,6 +136,10 @@ export default defineComponent({ let data: Array = event.data; isShowDebug.value = true; }); + bridge.on(Msg.DevtoolConnectError, (event: PluginEvent) => { + const msg = event.data; + ccui.footbar.showError(`Devtools connect error:\n${msg}`); + }); bridge.on(Msg.ResponseSupport, (event: PluginEvent) => { let data: ResponseSupportData = event.data; const isCocosGame: boolean = data.support;