devtool链接时，如果找不到对应的content，主动报错显示，让用户知道出问题了

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",

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);
     });

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)) {

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();
     }
   }
 });

src/scripts/background/tabMgr.ts

@@ -1,6 +1,10 @@
 import { TabInfo } from "./tabInfo";
 
 export class TabMgr {
+  constructor() {
+    debugger;
+    this.tabArray = [];
+  }
   /**
    * chrome打开的所有标签页面
    */

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) => {

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 {

src/views/devtools/index.vue

@@ -136,6 +136,10 @@ export default defineComponent({
       let data: Array<TreeData> = 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;