From c2937542594856c5c647f57ff1da56efb179a517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E5=BD=A6=E5=B3=B0?= <774177933@qq.com> Date: Mon, 18 Mar 2019 18:03:07 +0800 Subject: [PATCH] no message --- CocosCreatorInspector/src/background/index.js | 24 ++++++++++++-- CocosCreatorInspector/src/content/index.js | 5 +-- CocosCreatorInspector/src/content/inject.js | 33 +++++++++++++++---- CocosCreatorInspector/src/core/plugin-msg.js | 3 ++ CocosCreatorInspector/src/devtools/index.js | 8 +++++ .../panel/ccType/NodeBaseProperty.vue | 31 ++++++++--------- .../src/devtools/panel/index.vue | 19 +++++++++-- CocosCreatorInspector/src/manifest.js | 5 +++ 8 files changed, 97 insertions(+), 31 deletions(-) diff --git a/CocosCreatorInspector/src/background/index.js b/CocosCreatorInspector/src/background/index.js index 354d09f..08bcd69 100644 --- a/CocosCreatorInspector/src/background/index.js +++ b/CocosCreatorInspector/src/background/index.js @@ -2,11 +2,12 @@ let PluginMsg = require("../core/plugin-msg"); // 链接池子 let ConnPool = { Devtools: null, - + DevtoolsPanel: null, + Content: null, }; function shortConnectionLink(request, sender, sendResponse) { - console.log(`%c[短连接|id:${sender.id}|url:${sender.url}]\n${JSON.stringify(request)}`, 'background:#aaa;color:#BD4E19') + // console.log(`%c[短连接|id:${sender.id}|url:${sender.url}]\n${JSON.stringify(request)}`, 'background:#aaa;color:#BD4E19') sendResponse && sendResponse(request); if (request.msg === PluginMsg.Msg.Support || request.msg === PluginMsg.Msg.ListInfo || @@ -19,6 +20,11 @@ function shortConnectionLink(request, sender, sendResponse) { function longConnectionLink(data, sender) { console.log(`%c[长连接:${sender.name}]\n${JSON.stringify(data)}`, 'background:#aaa;color:#bada55') sender.postMessage(data); + if (data.msg === PluginMsg.Msg.UrlChange) { + if (sender.name === PluginMsg.Page.DevToolsPanel) { + ConnPool.Content && ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}}) + } + } // chrome.tabs.executeScript(message.tabId, {code: message.content}); // port.postMessage(message); } @@ -32,12 +38,20 @@ chrome.runtime.onConnect.addListener(function (port) { port.onMessage.removeListener(longConnectionLink); if (port.name === PluginMsg.Page.Devtools) { ConnPool.Devtools = null; + } else if (port.name === PluginMsg.Page.Content) { + ConnPool.Content = null; + } else if (port.name === PluginMsg.Page.DevToolsPanel) { + ConnPool.DevtoolsPanel = null; } }); // 缓存 if (port.name === PluginMsg.Page.Devtools) { ConnPool.Devtools = port; + } else if (port.name === PluginMsg.Page.Content) { + ConnPool.Content = port; + } else if (port.name === PluginMsg.Page.DevToolsPanel) { + ConnPool.DevtoolsPanel = port; } }); @@ -45,6 +59,12 @@ chrome.runtime.onConnect.addListener(function (port) { // [短连接] 监听来自content.js发来的事件 chrome.runtime.onMessage.addListener(shortConnectionLink); +chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { + if (changeInfo.status === "complete") { + // 加载新的url + ConnPool.Content.postMessage({msg: PluginMsg.Msg.UrlChange, data: {url: tab.favIconUrl}}); + } +}) function createPluginMenus() { // 右键菜单 diff --git a/CocosCreatorInspector/src/content/index.js b/CocosCreatorInspector/src/content/index.js index 22cc335..a7a2d77 100644 --- a/CocosCreatorInspector/src/content/index.js +++ b/CocosCreatorInspector/src/content/index.js @@ -19,10 +19,11 @@ function injectScriptToPage(url) { injectScriptToPage("js/inject.js"); // 和background.js保持长连接通讯 -let conn = chrome.runtime.connect({name: "connect.js"}) +let conn = chrome.runtime.connect({name: PluginMsg.Page.Content}) // conn.postMessage('test'); conn.onMessage.addListener(function (data) { - console.log(data) + // 将background.js的消息返回到injection.js + window.postMessage(data, "*"); }) // 接受来自inject.js的消息数据,然后中转到background.js window.addEventListener('message', function (event) { diff --git a/CocosCreatorInspector/src/content/inject.js b/CocosCreatorInspector/src/content/inject.js index 8491612..78f7a80 100644 --- a/CocosCreatorInspector/src/content/inject.js +++ b/CocosCreatorInspector/src/content/inject.js @@ -16,13 +16,17 @@ let cc_inspector = { }, init() { setInterval(function () { - this.checkIsGamePage(true); + // this.checkIsGamePage(true); // if (this.stop) { // } else { // } }.bind(this), 1000); // 注册cc_after_render事件 - + window.addEventListener('message', function (event) { + if (event.data.msg === PluginMsg.Msg.UrlChange) { + this.checkIsGamePage(true); + } + }.bind(this)); }, updateTreeInfo() { let isCocosCreatorGame = this.checkIsGamePage(true); @@ -90,26 +94,26 @@ let cc_inspector = { }, pluginSetNodeColor(uuid, colorHex) { - let node = window.inspectorGameMemoryStorage[uuid]; + let node = this.inspectorGameMemoryStorage[uuid]; if (node) { node.color = cc.hexToColor(colorHex); } }, pluginSetNodeRotation(uuid, rotation) { - let node = window.inspectorGameMemoryStorage[uuid]; + let node = this.inspectorGameMemoryStorage[uuid]; if (node) { node.rotation = rotation; } }, pluginSetNodePosition(uuid, x, y) { - let node = window.inspectorGameMemoryStorage[uuid]; + let node = this.inspectorGameMemoryStorage[uuid]; if (node) { node.x = x; node.y = y; } }, pluginSetNodeSize(uuid, width, height) { - let node = window.inspectorGameMemoryStorage[uuid]; + let node = this.inspectorGameMemoryStorage[uuid]; if (node) { node.width = width; node.height = height; @@ -117,7 +121,7 @@ let cc_inspector = { }, // 设置节点是否可视 pluginSetNodeActive(uuid, isActive) { - let node = window.inspectorGameMemoryStorage[uuid]; + let node = this.inspectorGameMemoryStorage[uuid]; if (node) { if (isActive === 1) { node.active = true; @@ -188,6 +192,21 @@ let cc_inspector = { sendMsgToDevTools(msg, data) { window.postMessage({msg: msg, data: data}, "*"); }, + + onMemoryInfo() { + this.sendMsgToDevTools(PluginMsg.Msg.MemoryInfo, { + performance: { + jsHeapSizeLimit: window.performance.memory.jsHeapSizeLimit, + totalJSHeapSize: window.performance.memory.totalJSHeapSize, + usedJSHeapSize: window.performance.memory.usedJSHeapSize, + }, + console: { + jsHeapSizeLimit: console.memory.jsHeapSizeLimit, + totalJSHeapSize: console.memory.totalJSHeapSize, + usedJSHeapSize: console.memory.usedJSHeapSize, + }, + }); + } } window.ccinspector = window.ccinspector || cc_inspector; window.ccinspector.init && window.ccinspector.init();// 执行初始化函数 diff --git a/CocosCreatorInspector/src/core/plugin-msg.js b/CocosCreatorInspector/src/core/plugin-msg.js index e79cffc..e99a173 100644 --- a/CocosCreatorInspector/src/core/plugin-msg.js +++ b/CocosCreatorInspector/src/core/plugin-msg.js @@ -2,6 +2,7 @@ module.exports = { Page: { Inject: "inject.js", Devtools: "devtools.js", + DevToolsPanel:"DevToolsPanel", Content: "content.js", Popup: "popup.js", Options: "options.js", @@ -10,5 +11,7 @@ module.exports = { NodeInfo: "node_info",// 具体的节点信息 ListInfo: "list_info",// 节点树信息 Support: "game_support",// 游戏支持信息 + MemoryInfo:"memory_info",// + UrlChange:"url_change", } } diff --git a/CocosCreatorInspector/src/devtools/index.js b/CocosCreatorInspector/src/devtools/index.js index 8e542c2..1644670 100644 --- a/CocosCreatorInspector/src/devtools/index.js +++ b/CocosCreatorInspector/src/devtools/index.js @@ -1,3 +1,4 @@ +const PluginMsg = require("../core/plugin-msg"); // 对应的是Elements面板的边栏 chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) { sidebar.setObject({some_data: "some data to show!"}); @@ -5,8 +6,15 @@ chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) { // 创建devtools-panel chrome.devtools.panels.create("Cocos", "icon/icon48.png", "pages/devtools_panel.html", function (panel) { console.log("[CC-Inspector] Dev Panel Created!"); + let conn = chrome.runtime.connect({name: PluginMsg.Page.DevToolsPanel}); + conn.onMessage.addListener(function (event, sender) { + debugger + }); + panel.onShown.addListener(function (window) { console.log("panel show"); + debugger + conn.postMessage({msg: PluginMsg.Msg.UrlChange, data: {}}) }); panel.onHidden.addListener(function (window) { console.log("panel hide"); diff --git a/CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue b/CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue index f330932..ea0bed1 100644 --- a/CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue +++ b/CocosCreatorInspector/src/devtools/panel/ccType/NodeBaseProperty.vue @@ -129,17 +129,14 @@ -
-
- -
-
- {{itemData.color}} -
-
+
+
+ +
+ {{itemData.color}} + +
@@ -177,7 +174,7 @@ // console.log("change changePositionX:" + this.itemData.x); // console.log("change changePositionY:" + this.itemData.y); this._evalCode( - "window.pluginSetNodePosition(" + + "window.ccinspector.pluginSetNodePosition(" + "'" + this.itemData.uuid + "'," + "'" + this.itemData.x + "'," + "'" + this.itemData.y + "'" + @@ -188,7 +185,7 @@ // console.log("change width:" + this.itemData.width); // console.log("change height:" + this.itemData.height); this._evalCode( - "window.pluginSetNodeSize(" + + "window.ccinspector.pluginSetNodeSize(" + "'" + this.itemData.uuid + "'," + "'" + this.itemData.width + "'," + "'" + this.itemData.height + "'" + @@ -198,7 +195,7 @@ changeRotation() { console.log("change rotation:" + this.itemData.rotation); this._evalCode( - "window.pluginSetNodeRotation('" + + "window.ccinspector.pluginSetNodeRotation('" + this.itemData.uuid + "','" + this.itemData.rotation + "')"); this._freshNode(); @@ -207,7 +204,7 @@ let color = this.itemData.color; console.log("color:" + color); this._evalCode( - "window.pluginSetNodeColor('" + + "window.ccinspector.pluginSetNodeColor('" + this.itemData.uuid + "','" + color + "');"); this._freshNode(); @@ -215,7 +212,7 @@ onBtnClickNodeHide() { let uuid = this.itemData.uuid; if (uuid !== undefined) { - let code = "window.pluginSetNodeActive('" + uuid + "', 0);"; + let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 0);"; this._evalCode(code); this._freshNode(); } @@ -223,14 +220,14 @@ onBtnClickNodeShow() { let uuid = this.itemData.uuid; if (uuid !== undefined) { - let code = "window.pluginSetNodeActive('" + uuid + "', 1);"; + let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 1);"; this._evalCode(code); this._freshNode(); } }, _freshNode() { let uuid = this.itemData.uuid; - let code2 = "window.getNodeInfo('" + uuid + "')"; + let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')"; this._evalCode(code2); }, _evalCode(code) { diff --git a/CocosCreatorInspector/src/devtools/panel/index.vue b/CocosCreatorInspector/src/devtools/panel/index.vue index d3e7528..09bf8dd 100644 --- a/CocosCreatorInspector/src/devtools/panel/index.vue +++ b/CocosCreatorInspector/src/devtools/panel/index.vue @@ -4,7 +4,12 @@
Test1 Test2 - Test3 + 内存测试 +
+
+ JS堆栈限制: {{memory.performance.jsHeapSizeLimit}} + JS堆栈大小: {{memory.performance.totalJSHeapSize}} + JS堆栈使用: {{memory.performance.usedJSHeapSize}}
@@ -56,6 +61,10 @@ label: 'label' }, watchEveryTime: false,// 实时监控节点树 + memory: { + performance: {}, + console: {}, + }, } }, created() { @@ -76,6 +85,8 @@ } else if (eventMsg === PluginMsg.Msg.NodeInfo) { this.isShowDebug = true; this.treeItemData = eventData; + } else if (eventMsg === PluginMsg.Msg.MemoryInfo) { + this.memory = eventData; } }.bind(this)); @@ -202,8 +213,7 @@ }`; console.log(injectCode); let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) { - if (info.isException) { - debugger + if (info && info.isException) { console.log(info.value) } @@ -234,6 +244,9 @@ // chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`) let f = require("../../core/event-mgr"); console.log(f.id); + }, + onMemoryTest() { + this.evalInspectorFunction("onMemoryInfo"); } } } diff --git a/CocosCreatorInspector/src/manifest.js b/CocosCreatorInspector/src/manifest.js index 6588dbf..0919c33 100644 --- a/CocosCreatorInspector/src/manifest.js +++ b/CocosCreatorInspector/src/manifest.js @@ -37,7 +37,12 @@ module.exports = { "http://*/*", "https://*/*", "*://*/*", + "audio", "system.cpu", + "clipboardRead", + "clipboardWrite", + "system.memory", + "processes",// 这个权限只在chrome-dev版本都才有 "tabs", "storage", "nativeMessaging",