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

调整左侧节点树样式

Browse Source
This commit is contained in:
xuyanfeng 2021-04-03 19:31:47 +08:00
parent 0959012124
commit e6aed721ae
5 changed files with 560 additions and 489 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
source/public/index.html
View File

@ -1,17 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="" style="width: 100%;height: 100%;margin: 0;padding: 0;">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body style="width: 100%;height: 100%;margin: 0;padding: 0;">
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
</noscript> Please enable it to continue.</strong>
<div id="app"></div> </noscript>
<!-- built files will be auto injected --> <div id="app"></div>
</body> <!-- built files will be auto injected -->
</body>
</html> </html>

14
source/src/devtools/ccType/ComponentsProperty.vue
View File

@ -17,18 +17,24 @@
<script lang="ts"> <script lang="ts">
import Vue from "vue" import Vue from "vue"
import {Component, Prop} from "vue-property-decorator"; import {Component, Prop} from "vue-property-decorator";
import UiProp from "@/devtools/ccType/ui-prop.vue"
@Component({}) @Component({
components: {
UiProp
}
})
export default class ComponentsProperty extends Vue { export default class ComponentsProperty extends Vue {
name: string = ""; name: string = "components";
isShowComp: boolean = true; isShowComp: boolean = true;
// @Prop()
components = ""
onClickComp() { onClickComp() {
this.isShowComp = !this.isShowComp; this.isShowComp = !this.isShowComp;
} }
@Prop()
components = ""
} }
</script> </script>

302
source/src/devtools/ccType/NodeBaseProperty.vue
View File

@ -1,185 +1,199 @@
<template> <template>
<div id="app"> <div id="app">
<div> <!-- <div>-->
<ui-prop name="uuid"> <!-- <ui-prop name="uuid">-->
<span> {{ itemData.uuid }}</span> <!-- <span> {{ itemData.uuid }}</span>-->
</ui-prop> <!-- </ui-prop>-->
<ui-prop name="name"> <!-- <ui-prop name="name">-->
<span> {{ itemData.name }}</span> <!-- <span> {{ itemData.name }}</span>-->
</ui-prop> <!-- </ui-prop>-->
<!--坐标--> <!-- &lt;!&ndash;坐标&ndash;&gt;-->
<ui-prop name="Position"> <!-- <ui-prop name="Position">-->
<div style="float: left;width: 100%;"> <!-- <div style="float: left;width: 100%;">-->
<ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;" <!-- <ui-prop name="X" style="width: 50%;float: left; cursor: ew-resize;"-->
@movestep="changePositionActionX" <!-- @movestep="changePositionActionX"-->
step="10"> <!-- step="10">-->
<!--<span>{{itemData.x}}</span>--> <!-- &lt;!&ndash;<span>{{itemData.x}}</span>&ndash;&gt;-->
<input class="myInput" <!-- <input class="myInput"-->
@change="changePosition" <!-- @change="changePosition"-->
placeholder="itemData.x" <!-- placeholder="itemData.x"-->
v-model="itemData.x"> <!-- v-model="itemData.x">-->
</ui-prop> <!-- </ui-prop>-->
<ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;" <!-- <ui-prop name="Y" style="width: 50%;float:left;cursor: ew-resize;"-->
@movestep="changePositionActionY" <!-- @movestep="changePositionActionY"-->
step="10"> <!-- step="10">-->
<!--<span>{{itemData.y}}</span>--> <!-- &lt;!&ndash;<span>{{itemData.y}}</span>&ndash;&gt;-->
<input class="myInput" <!-- <input class="myInput"-->
@change="changePosition" <!-- @change="changePosition"-->
placeholder="itemData.y" <!-- placeholder="itemData.y"-->
v-model="itemData.y"> <!-- v-model="itemData.y">-->
</ui-prop> <!-- </ui-prop>-->
</div> <!-- </div>-->
</ui-prop> <!-- </ui-prop>-->
<!--旋转--> <!-- &lt;!&ndash;旋转&ndash;&gt;-->
<!--rotationX, rotationY暂时舍弃显示--> <!-- &lt;!&ndash;rotationX, rotationY暂时舍弃显示&ndash;&gt;-->
<ui-prop name="Rotation"> <!-- <ui-prop name="Rotation">-->
<span> {{ itemData.rotation }}</span> <!-- <span> {{ itemData.rotation }}</span>-->
<!--<input class="myInput"--> <!-- &lt;!&ndash;<input class="myInput"&ndash;&gt;-->
<!--@change="changeRotation"--> <!-- &lt;!&ndash;@change="changeRotation"&ndash;&gt;-->
<!--placeholder="itemData.rotation"--> <!-- &lt;!&ndash;placeholder="itemData.rotation"&ndash;&gt;-->
<!--v-model="itemData.rotation"--> <!-- &lt;!&ndash;v-model="itemData.rotation"&ndash;&gt;-->
<!--style="width: 98%">--> <!-- &lt;!&ndash;style="width: 98%">&ndash;&gt;-->
</ui-prop> <!-- </ui-prop>-->
<!--缩放--> <!-- &lt;!&ndash;缩放&ndash;&gt;-->
<ui-prop name="Scale"> <!-- <ui-prop name="Scale">-->
<div style="float: left;width: 100%;"> <!-- <div style="float: left;width: 100%;">-->
<ui-prop name="X" style="width: 50%;float: left;"> <!-- <ui-prop name="X" style="width: 50%;float: left;">-->
<span>{{ itemData.scaleX }}</span> <!-- <span>{{ itemData.scaleX }}</span>-->
</ui-prop> <!-- </ui-prop>-->
<ui-prop name="Y" style="width: 50%;float:left;"> <!-- <ui-prop name="Y" style="width: 50%;float:left;">-->
<span>{{ itemData.scaleY }}</span> <!-- <span>{{ itemData.scaleY }}</span>-->
</ui-prop> <!-- </ui-prop>-->
</div> <!-- </div>-->
</ui-prop> <!-- </ui-prop>-->
<!--锚点--> <!-- &lt;!&ndash;锚点&ndash;&gt;-->
<ui-prop name="Anchor"> <!-- <ui-prop name="Anchor">-->
<div style="float: left;width: 100%;"> <!-- <div style="float: left;width: 100%;">-->
<ui-prop name="X" style="width: 50%;float: left;"> <!-- <ui-prop name="X" style="width: 50%;float: left;">-->
<span>{{ itemData.anchorX }}</span> <!-- <span>{{ itemData.anchorX }}</span>-->
</ui-prop> <!-- </ui-prop>-->
<ui-prop name="Y" style="width: 50%;float:left;"> <!-- <ui-prop name="Y" style="width: 50%;float:left;">-->
<span>{{ itemData.anchorY }}</span> <!-- <span>{{ itemData.anchorY }}</span>-->
</ui-prop> <!-- </ui-prop>-->
</div> <!-- </div>-->
</ui-prop> <!-- </ui-prop>-->
<!--尺寸--> <!-- &lt;!&ndash;尺寸&ndash;&gt;-->
<ui-prop name="Size"> <!-- <ui-prop name="Size">-->
<div style="float: left;width: 100%;"> <!-- <div style="float: left;width: 100%;">-->
<ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;" <!-- <ui-prop name="W" style="width: 50%;float: left;cursor: ew-resize;"-->
@movestep="changeSizeActionWidth" <!-- @movestep="changeSizeActionWidth"-->
step="10"> <!-- step="10">-->
<!--<span>{{itemData.width}}</span>--> <!-- &lt;!&ndash;<span>{{itemData.width}}</span>&ndash;&gt;-->
<input class="myInput" <!-- <input class="myInput"-->
@change="changeSize" <!-- @change="changeSize"-->
placeholder="itemData.width" <!-- placeholder="itemData.width"-->
v-model="itemData.width"> <!-- v-model="itemData.width">-->
</ui-prop> <!-- </ui-prop>-->
<ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;" <!-- <ui-prop name="H" style="width: 50%;float:left;cursor: ew-resize;"-->
@movestep="changeSizeActionHeight" <!-- @movestep="changeSizeActionHeight"-->
step="10"> <!-- step="10">-->
<!--<span>{{itemData.height}}</span>--> <!-- &lt;!&ndash;<span>{{itemData.height}}</span>&ndash;&gt;-->
<input class="myInput" <!-- <input class="myInput"-->
@change="changeSize" <!-- @change="changeSize"-->
placeholder="itemData.height" <!-- placeholder="itemData.height"-->
v-model="itemData.height"> <!-- v-model="itemData.height">-->
</ui-prop> <!-- </ui-prop>-->
</div> <!-- </div>-->
</ui-prop> <!-- </ui-prop>-->
</ui-prop> <!-- &lt;!&ndash;透明度&ndash;&gt;-->
<!--透明度--> <!-- <ui-prop name="Opacity">-->
<ui-prop name="Opacity"> <!-- <span>{{ itemData.opacity }}</span>-->
<span>{{ itemData.opacity }}</span> <!-- </ui-prop>-->
</ui-prop> <!-- &lt;!&ndash;斜切&ndash;&gt;-->
<!--斜切--> <!-- <ui-prop name="Skew">-->
<ui-prop name="Skew"> <!-- <div style="float: left;width: 100%;">-->
<div style="float: left;width: 100%;"> <!-- <ui-prop name="X" style="width: 50%;float: left;">-->
<ui-prop name="X" style="width: 50%;float: left;"> <!-- <span>{{ itemData.skewX }}</span>-->
<span>{{ itemData.skewX }}</span> <!-- </ui-prop>-->
</ui-prop> <!-- <ui-prop name="Y" style="width: 50%;float:left;">-->
<ui-prop name="Y" style="width: 50%;float:left;"> <!-- <span>{{ itemData.skewY }}</span>-->
<span>{{ itemData.skewY }}</span> <!-- </ui-prop>-->
</ui-prop> <!-- </div>-->
</div> <!-- </ui-prop>-->
</ui-prop> <!-- </div>-->
</div> <!-- <ui-prop name="zIndex">-->
<ui-prop name="zIndex"> <!-- <span>{{ itemData.zIndex }}</span>-->
<span>{{ itemData.zIndex }}</span> <!-- </ui-prop>-->
</ui-prop> <!-- <ui-prop name="childrenCount">-->
<ui-prop name="childrenCount"> <!-- <span>{{ itemData.childrenCount }}</span>-->
<span>{{ itemData.childrenCount }}</span> <!-- </ui-prop>-->
</ui-prop> <!-- &lt;!&ndash;节点状态&ndash;&gt;-->
<!--节点状态--> <!-- <ui-prop name="active">-->
<ui-prop name="active"> <!-- <p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">-->
<p v-if="itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;"> <!-- <input type="checkbox"-->
<input type="checkbox" <!-- style="width: 20px;height: 20px;"-->
style="width: 20px;height: 20px;" <!-- :checked.sync="itemData.active"-->
:checked="itemData.active" <!-- @click="onBtnClickNodeHide">-->
@click="onBtnClickNodeHide"> <!-- 隐藏节点-->
隐藏节点 <!-- </p>-->
</p>
<p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;"> <!-- <p v-if="!itemData.active" style="margin: 0;display: flex;align-items: center;flex-wrap: wrap;">-->
<input type="checkbox" <!-- <input type="checkbox"-->
style="width: 20px;height: 20px;" <!-- style="width: 20px;height: 20px;"-->
:checked="itemData.active" <!-- :checked="itemData.active"-->
@click="onBtnClickNodeShow" <!-- @click="onBtnClickNodeShow"-->
> <!-- >-->
显示节点 <!-- 显示节点-->
</p> <!-- </p>-->
</ui-prop> <!-- </ui-prop>-->
<!--颜色--> <!-- &lt;!&ndash;颜色&ndash;&gt;-->
<ui-prop name="color"> <!-- <ui-prop name="color">-->
<div style="display: flex;flex-direction: row;justify-content: center;"> <!-- <div style="display: flex;flex-direction: row;justify-content: center;">-->
<div style="display: flex;flex:1;"> <!-- <div style="display: flex;flex:1;">-->
<el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;" <!-- <el-color-picker v-model="itemData.color" size="mini" style="flex:1;margin: 0;"-->
@change="changeColor"></el-color-picker> <!-- @change="changeColor"></el-color-picker>-->
</div> <!-- </div>-->
<span style="width: 60px;">{{ itemData.color }}</span> <!-- <span style="width: 60px;">{{ itemData.color }}</span>-->
</div> <!-- </div>-->
</ui-prop> <!-- </ui-prop>-->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from "vue" import Vue from "vue"
import {Component, Prop} from "vue-property-decorator" import {Component, Prop, Emit} from "vue-property-decorator"
import {} from 'vue-class-component'
import UiProp from './ui-prop.vue' import UiProp from './ui-prop.vue'
import {setup} from "vue-class-component/dist/vue-class-component";
@Component({ @Component({
components: {UiProp}, components: {UiProp},
}) })
export default class NodeBaseProperty extends Vue { export default class NodeBaseProperty extends Vue {
name: string = "app" name: string = "node-base"
@Prop() // @Prop({required: false})
itemData: any = null; // label: string = ''
//
// @Prop({required: false})
// data: any = {};
setup() {
// computed({
// get: () => {
//
// }
// })
}
itemData: any = {};
changeSizeActionWidth(step: number) { changeSizeActionWidth(step: number) {
let w = parseFloat(this.itemData.width); let w = parseFloat(this.itemData.width);
this.itemData.width = w + step; // this.itemData.width = w + step;
this.changeSize(); this.changeSize();
} }
changeSizeActionHeight(step: number) { changeSizeActionHeight(step: number) {
let h = parseFloat(this.itemData.height); let h = parseFloat(this.itemData.height);
this.itemData.height = h + step; // this.itemData.height = h + step;
this.changeSize(); this.changeSize();
} }
changePositionActionX(step: number) { changePositionActionX(step: number) {
let x = parseFloat(this.itemData.x); let x = parseFloat(this.itemData.x);
this.itemData.x = x + step; // this.itemData.x = x + step;
this.changePosition(); this.changePosition();
} }
changePositionActionY(step: number) { changePositionActionY(step: number) {
let y = parseFloat(this.itemData.y); let y = parseFloat(this.itemData.y);
this.itemData.y = y + step; // this.itemData.y = y + step;
this.changePosition(); this.changePosition();
} }

15
source/src/devtools/ccType/SceneProperty.vue
View File

@ -4,13 +4,14 @@
</div> </div>
</template> </template>
<script> <script lang="ts">
export default { import Vue from 'vue'
name: "app", import {Component, Prop} from "vue-property-decorator";
data() {
return {} @Component
} export default class SceneProperty extends Vue {
} name: string = "scene"
}
</script> </script>
<style scoped> <style scoped>

697
source/src/devtools/index.vue
View File

@ -1,227 +1,229 @@
<template> <template>
<div style="display: flex;width: 100%; height: 100%;flex-direction: column"> <div id="devtools">
<div v-show="isShowDebug" style="display: flex;flex: 1; flex-direction: column;"> <div v-show="isShowDebug" class="find">
<div> <div v-if="false">
<el-button type="success" size="mini" @click="onBtnClickTest1">Test1</el-button> <el-button type="success" @click="onBtnClickTest1">Test1</el-button>
<el-button type="success" size="mini" @click="onBtnClickTest2">Test2</el-button> <el-button type="success" @click="onBtnClickTest2">Test2</el-button>
<el-button type="success" size="mini" @click="onMemoryTest">内存测试</el-button> <el-button type="success" @click="onMemoryTest">内存测试</el-button>
</div> </div>
<div> <div v-if="false">
<span>JS堆栈限制: {{memory.performance.jsHeapSizeLimit}}</span> <span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
<span>JS堆栈大小: {{memory.performance.totalJSHeapSize}}</span> <span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
<span>JS堆栈使用: {{memory.performance.usedJSHeapSize}}</span> <span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
</div>
<div class="left">
<div class="tool-btn">
<el-switch active-text="实时监控" v-model="watchEveryTime" @change="onChangeWatchState"></el-switch>
<div class="flex1"></div>
<el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
</div>
<div class="treeList">
<el-tree :data="treeData"
style="display: inline-block;"
:props="defaultProps"
:highlight-current="true"
:default-expand-all="false"
:expand-on-click-node="true"
@node-click="handleNodeClick"></el-tree>
</div>
</div>
<div class="right">
<div class=" bg-purple-light treeInfo">
<NodeBaseProperty :data="treeItemData"></NodeBaseProperty>
<SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
<ComponentsProperty :components.sync="treeItemData.components"></ComponentsProperty>
</div>
</div> </div>
<el-row style="display:flex; flex: 1;">
<el-col :span="8" style="display: flex;flex-direction: column;">
<div style="display: flex; flex-direction: row; ">
<el-switch active-text="实时监控" v-model="watchEveryTime" @change="onChangeWatchState"></el-switch>
<el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdateTree">刷新</el-button>
</div>
<div class="grid-content treeList" style="flex: 1;">
<el-tree :data="treeData"
:props="defaultProps"
:highlight-current="true"
:default-expand-all="false"
:expand-on-click-node="true"
@node-click="handleNodeClick"></el-tree>
</div>
</el-col>
<el-col :span="16">
<div class="grid-content bg-purple-light treeInfo">
<NodeBaseProperty v-bind:itemData="treeItemData"></NodeBaseProperty>
<SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
<ComponentsProperty v-bind:components="treeItemData.components"></ComponentsProperty>
</div>
</el-col>
</el-row>
</div> </div>
<div v-show="!isShowDebug" style="display: flex; flex: 1;" class="center-center horizontal"> <div v-show="!isShowDebug" class="no-find">
<span style="margin-right: 20px;">未发现cocos creator的游戏!</span> <span>未发现cocos creator的游戏!</span>
<el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button> <el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdatePage">刷新</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script lang="ts">
// import injectScript from '../injectScript.js' // import injectScript from '../injectScript.js'
// import EvalCode from "./evalCodeString.js"; // import EvalCode from "./evalCodeString.js";
import Vue from "vue";
import NodeBaseProperty from './ccType/NodeBaseProperty'
import ComponentsProperty from './ccType/ComponentsProperty'
import SceneProperty from './ccType/SceneProperty'
import {Component} from "vue-property-decorator";
const PluginMsg = require("../core/plugin-msg");
@Component({components: {NodeBaseProperty, ComponentsProperty, SceneProperty}})
export default class Index extends Vue {
isShowDebug: boolean = true;
treeItemData: Object = {};
treeData = []
treeDataMap = {};
bgConn = null// 与background.js的链接
defaultProps = {
children: "children",
label: "name"
};
watchEveryTime: boolean = false;// 实时监控节点树
memory = {
performance: {},
console: {},
}
const PluginMsg = require("../core/plugin-msg"); created() {
this.onTestData();
if (chrome && chrome.runtime) {
this._initChromeRuntimeConnect();
}
export default { window.addEventListener("message", function (event) {
data() { console.log("on vue:" + JSON.stringify(event.data));
return { console.log("on vue:" + JSON.stringify(event));
isShowDebug: false, }, false);
treeItemData: {}, }
treeData: [],
treeDataMap: {},
bgConn: null,// 与background.js的链接
defaultProps: { _initChromeRuntimeConnect() {
children: 'children', // chrome.devtools.inspectedWindow.tabId
label: 'name' // 接收来自background.js的消息数据
}, this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
watchEveryTime: false,// 实时监控节点树 this.bgConn.onMessage.addListener((data, sender) => {
memory: { if (!data) {
performance: {},
console: {},
},
}
},
created() {
// chrome.devtools.inspectedWindow.tabId
// 接收来自background.js的消息数据
this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
this.bgConn.onMessage.addListener(function (data, sender) {
if (!data) {
return;
}
let eventData = data.data;
let eventMsg = data.msg;
if (eventMsg === PluginMsg.Msg.ListInfo) {
this.isShowDebug = true;
this._updateTreeView(eventData);
} else if (eventMsg === PluginMsg.Msg.Support) {
this.isShowDebug = eventData.support;
} else if (eventMsg === PluginMsg.Msg.NodeInfo) {
this.isShowDebug = true;
this.treeItemData = eventData;
} else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
this.memory = eventData;
}
}.bind(this));
window.addEventListener('message', function (event) {
console.log("on vue:" + JSON.stringify(event.data));
console.log("on vue:" + JSON.stringify(event));
}, false);
},
methods: {
onTestData() {
let testData = {
"type": "cc_Node",
"uuid": "5cUWX4Yh1MipGk+ssnZ/fL",
"name": "Canvas",
"x": 960,
"y": 540.4931506849315,
"zIndex": 0,
"childrenCount": 6,
"children": [],
"width": 1920,
"height": 1080.986301369863,
"color": "#fff85f",
"opacity": 255,
"rotation": 0,
"rotationX": 0,
"rotationY": 0,
"anchorX": 0.5,
"anchorY": 0.5,
"scaleX": 1,
"scaleY": 1,
"skewX": 0,
"skewY": 0,
"components": [
{
"uuid": "Comp.931",
"type": "cc_Canvas",
"name": "Canvas<Canvas>"
},
{
"uuid": "Comp.932",
"type": "HotUpdateScene",
"name": "Canvas<HotUpdateScene>"
}],
"active": true
};
this.treeItemData = testData;
},
handleNodeClick(data) {
// todo 去获取节点信息
// console.log(data);
let uuid = data.uuid;
if (uuid !== undefined) {
this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
}
},
onChangeWatchState() {
if (this.watchEveryTime) {
this.timerID = setInterval(function () {
this.onBtnClickUpdateTree();
}.bind(this), 100);
} else {
clearInterval(this.timerID);
}
},
_updateTreeView(data) {
this.treeData = [data.scene];
return; return;
// 构建树形数据 }
if (this.treeData.length === 0) {// 第一次赋值 let eventData = data.data;
let eventMsg = data.msg;
if (eventMsg === PluginMsg.Msg.ListInfo) {
this.isShowDebug = true;
this._updateTreeView(eventData);
} else if (eventMsg === PluginMsg.Msg.Support) {
this.isShowDebug = eventData.support;
} else if (eventMsg === PluginMsg.Msg.NodeInfo) {
this.isShowDebug = true;
this.treeItemData = eventData;
} else if (eventMsg === PluginMsg.Msg.MemoryInfo) {
this.memory = eventData;
}
});
}
} else { onTestData() {
for (let i = 0; i < 40; i++) {
this.treeData.push({name: `node${i}`, children: [{name: `children11111111111111111111111111111111111111${i}`}]})
}
} this.treeItemData = {
"type": "cc_Node",
"height": 1080.986301369863,
"color": "#fff85f",
"opacity": 255,
"components": [
{
"uuid": "Comp.931",
"type": "cc_Canvas",
"name": "Canvas<Canvas>"
},
{
"uuid": "Comp.932",
"type": "HotUpdateScene",
"name": "Canvas<HotUpdateScene>"
}],
"active": true
};
}
handleNodeClick(data) {
// todo 去获取节点信息
// console.log(data);
let uuid = data.uuid;
if (uuid !== undefined) {
this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
}
}
onChangeWatchState() {
if (this.watchEveryTime) {
this.timerID = setInterval(function () {
this.onBtnClickUpdateTree();
}.bind(this), 100);
} else {
clearInterval(this.timerID);
}
}
_updateTreeView(data) {
this.treeData = [data.scene];
return;
// 构建树形数据
if (this.treeData.length === 0) {// 第一次赋值
let treeData = []; } else {
debugger
let sceneData = data.scene;
if (sceneData) {
// scene info
let dataRoot = {
type: sceneData.type, uuid: sceneData.uuid,
label: sceneData.name, children: []
};
treeData.push(dataRoot);
this.handleNodeClick(dataRoot);
// scene children info
for (let k in sceneData.children) {
let itemSceneData = sceneData.children[k];
// let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
let sceneItem = {};
dealChildrenNode(itemSceneData, sceneItem);
treeData[0].children.push(sceneItem);
}
}
this.treeData = treeData;
function dealChildrenNode(rootData, obj) { }
obj['data'] = rootData;
obj['uuid'] = rootData.uuid;
obj['label'] = rootData.name;
obj['type'] = rootData.type;
obj['children'] = [];
let rootChildren = rootData.children;
for (let k in rootChildren) {
let itemData = rootChildren[k];
let item = {};
dealChildrenNode(itemData, item);
obj.children.push(item);
}
}
},
_getInjectScriptString() {
let injectScript = "";
let code = injectScript.toString();
let array = code.split('\n');
array.splice(0, 1);// 删除开头
array.splice(-1, 1);// 删除结尾
let evalCode = "";
for (let i = 0; i < array.length; i++) {
evalCode += array[i] + '\n';
}
// console.log(evalCode);
return evalCode;
},
evalInspectorFunction(funcString, parm) {
if (funcString || funcString.length > 0) { let treeData = [];
let injectCode = debugger
`if(window.ccinspector){ let sceneData = data.scene;
if (sceneData) {
// scene info
let dataRoot = {
type: sceneData.type, uuid: sceneData.uuid,
label: sceneData.name, children: []
};
treeData.push(dataRoot);
this.handleNodeClick(dataRoot);
// scene children info
for (let k in sceneData.children) {
let itemSceneData = sceneData.children[k];
// let sceneItem = {uuid: itemSceneData.uuid, label: itemSceneData.name, children: []};
let sceneItem = {};
dealChildrenNode(itemSceneData, sceneItem);
treeData[0].children.push(sceneItem);
}
}
this.treeData = treeData;
function dealChildrenNode(rootData, obj) {
obj["data"] = rootData;
obj["uuid"] = rootData.uuid;
obj["label"] = rootData.name;
obj["type"] = rootData.type;
obj["children"] = [];
let rootChildren = rootData.children;
for (let k in rootChildren) {
let itemData = rootChildren[k];
let item = {};
dealChildrenNode(itemData, item);
obj.children.push(item);
}
}
}
_getInjectScriptString() {
let injectScript = "";
let code = injectScript.toString();
let array = code.split("\n");
array.splice(0, 1);// 删除开头
array.splice(-1, 1);// 删除结尾
let evalCode = "";
for (let i = 0; i < array.length; i++) {
evalCode += array[i] + "\n";
}
// console.log(evalCode);
return evalCode;
}
evalInspectorFunction(funcString, parm) {
if (funcString || funcString.length > 0) {
let injectCode =
`if(window.ccinspector){
let func = window.ccinspector.${funcString}; let func = window.ccinspector.${funcString};
if(func){ if(func){
console.log("执行${funcString}成功"); console.log("执行${funcString}成功");
@ -232,154 +234,201 @@
}else{ }else{
console.log("可能脚本没有注入"); console.log("可能脚本没有注入");
}`; }`;
console.log(injectCode); console.log(injectCode);
let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) { if (chrome && chrome.devtools) {
if (info && info.isException) { let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
console.log(info.value) if (info && info.isException) {
} console.log(info.value);
}
}); });
console.log(`ret:${ret}`); console.log(`ret:${ret}`);
} else { }
console.log("执行失败!"); } else {
} console.log("执行失败!");
}, }
onBtnClickUpdateTree() { }
this.evalInspectorFunction("updateTreeInfo");
}, onBtnClickUpdateTree() {
onBtnClickUpdatePage() { this.evalInspectorFunction("updateTreeInfo");
this.evalInspectorFunction("checkIsGamePage", "true");
// let code = this._getInjectScriptString(); }
// chrome.devtools.inspectedWindow.eval(code, function () {
// console.log("刷新成功!"); onBtnClickUpdatePage() {
// }); this.evalInspectorFunction("checkIsGamePage", "true");
}, // let code = this._getInjectScriptString();
onBtnClickTest1() { // chrome.devtools.inspectedWindow.eval(code, function () {
chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`) // console.log("刷新成功!");
}, // });
_getTime() { }
return new Date().getTime().toString();
}, onBtnClickTest1() {
onBtnClickTest2() { chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`);
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`) }
_getTime() {
return new Date().getTime().toString();
}
onBtnClickTest2() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
let newData = [ let newData = [
{
name: this._getTime(),
children: [
{ {
name: this._getTime(), name: this._getTime(),
children: [ children: [
{
name: this._getTime(),
children: [
{
name: this._getTime(),
}
]
},
{ {
name: this._getTime(), name: this._getTime(),
} }
] ]
},
{
name: this._getTime(),
} }
] ]
}
// this.treeData = newData; ];
this._update37(this.treeData[0], newData[0])
},
_update37(oldTreeNode, newTreeNode) {
debugger
if (!newTreeNode) {
return;
}
if (!oldTreeNode) {
oldTreeNode = {name: "", children: []};
}
if (oldTreeNode.name !== newTreeNode.name) {
oldTreeNode.name = newTreeNode.name;
}
let oldChildren = oldTreeNode.children; // this.treeData = newData;
let newChildren = newTreeNode.children; this._update37(this.treeData[0], newData[0]);
}
if (oldChildren.length === 0) { _update37(oldTreeNode, newTreeNode) {
oldChildren = newChildren; debugger
if (!newTreeNode) {
return;
}
if (!oldTreeNode) {
oldTreeNode = {name: "", children: []};
}
if (oldTreeNode.name !== newTreeNode.name) {
oldTreeNode.name = newTreeNode.name;
}
let oldChildren = oldTreeNode.children;
let newChildren = newTreeNode.children;
if (oldChildren.length === 0) {
oldChildren = newChildren;
} else {
// 比较2个数据: treeData, newTreeData
// 比较该层级的数据
for (let i = 0; i < newChildren.length; i++) {
let itemNew = newChildren[i];
let itemOld = oldChildren[i];
if (itemOld === undefined) {
// 老节点中没有
oldChildren.push(itemNew);
} else if (itemNew.name !== itemOld.name) {
// 替换
oldChildren.splice(i, 1, itemNew);
} else { } else {
// 比较2个数据: treeData, newTreeData this._update37(itemOld, itemNew);
// 比较该层级的数据
for (let i = 0; i < newChildren.length; i++) {
let itemNew = newChildren[i];
let itemOld = oldChildren[i];
if (itemOld === undefined) {
// 老节点中没有
oldChildren.push(itemNew);
} else if (itemNew.name !== itemOld.name) {
// 替换
oldChildren.splice(i, 1, itemNew);
} else {
this._update37(itemOld, itemNew);
}
}
// 多余的删除了
if (oldChildren.length > newChildren.length) {
oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
}
} }
}, }
onBtnClickTest3() { // 多余的删除了
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`) if (oldChildren.length > newChildren.length) {
let f = require("../core/event-mgr"); oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
console.log(f.id);
},
onMemoryTest() {
this.evalInspectorFunction("onMemoryInfo");
} }
} }
} }
onBtnClickTest3() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
let f = require("../core/event-mgr");
console.log(f.id);
}
onMemoryTest() {
this.evalInspectorFunction("onMemoryInfo");
}
}
</script> </script>
<style scoped> <style scoped lang="less">
.treeList { @import "../index.less";
height: 100%
}
.treeInfo { #devtools {
height: 100% display: flex;
} width: 100%;
height: 100%;
.bg-purple { .no-find {
background: #d3dce6; display: flex;
} flex: 1;
.grid-content {
border-radius: 4px;
min-height: 20px;
}
.bg-purple-light {
background: #e5e9f2;
}
body span h1 h2 h3 {
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
}
.layout {
display: block;
}
.horizontal {
flex-direction: row; flex-direction: row;
}
.vertical {
flex-direction: column;
}
.center-center {
align-content: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
span {
margin-right: 20px;
}
} }
.find {
display: flex;
flex: 1;
flex-direction: row;
.left {
display: flex;
flex: 1;
flex-direction: column;
.tool-btn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.treeList {
margin-top: 3px;
flex: 1;
height: 100%;
border-radius: 4px;
min-height: 20px;
overflow: scroll;
width: 300px;
&::-webkit-scrollbar {
width: 6px;
height: 6px;
background: #999;
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background-color: #333;
border-radius: 2px;
}
}
}
.right {
flex: 2;
}
}
}
.treeInfo {
height: 100%
}
.bg-purple {
background: #d3dce6;
}
.bg-purple-light {
background: #e5e9f2;
}
</style> </style>