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

7
source/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="">
<html lang="" style="width: 100%;height: 100%;margin: 0;padding: 0;">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@ -7,9 +7,10 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
<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.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->

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

@ -17,18 +17,24 @@
<script lang="ts">
import Vue from "vue"
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 {
name: string = "";
name: string = "components";
isShowComp: boolean = true;
// @Prop()
components = ""
onClickComp() {
this.isShowComp = !this.isShowComp;
}
@Prop()
components = ""
}
</script>

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

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

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

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

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

@ -1,80 +1,95 @@
<template>
<div style="display: flex;width: 100%; height: 100%;flex-direction: column">
<div v-show="isShowDebug" style="display: flex;flex: 1; flex-direction: column;">
<div>
<el-button type="success" size="mini" @click="onBtnClickTest1">Test1</el-button>
<el-button type="success" size="mini" @click="onBtnClickTest2">Test2</el-button>
<el-button type="success" size="mini" @click="onMemoryTest">内存测试</el-button>
<div id="devtools">
<div v-show="isShowDebug" class="find">
<div v-if="false">
<el-button type="success" @click="onBtnClickTest1">Test1</el-button>
<el-button type="success" @click="onBtnClickTest2">Test2</el-button>
<el-button type="success" @click="onMemoryTest">内存测试</el-button>
</div>
<div>
<div v-if="false">
<span>JS堆栈限制: {{ memory.performance.jsHeapSizeLimit }}</span>
<span>JS堆栈大小: {{ memory.performance.totalJSHeapSize }}</span>
<span>JS堆栈使用: {{ memory.performance.usedJSHeapSize }}</span>
</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; ">
<div class="left">
<div class="tool-btn">
<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 class="flex1"></div>
<el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdateTree"></el-button>
</div>
<div class="grid-content treeList" style="flex: 1;">
<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>
</el-col>
<el-col :span="16">
<div class="grid-content bg-purple-light treeInfo">
<NodeBaseProperty v-bind:itemData="treeItemData"></NodeBaseProperty>
</div>
<div class="right">
<div class=" bg-purple-light treeInfo">
<NodeBaseProperty :data="treeItemData"></NodeBaseProperty>
<SceneProperty v-show=" treeItemData.type === 'cc_Scene'"></SceneProperty>
<ComponentsProperty v-bind:components="treeItemData.components"></ComponentsProperty>
<ComponentsProperty :components.sync="treeItemData.components"></ComponentsProperty>
</div>
</el-col>
</el-row>
</div>
<div v-show="!isShowDebug" style="display: flex; flex: 1;" class="center-center horizontal">
<span style="margin-right: 20px;">未发现cocos creator的游戏!</span>
<el-button type="success" class="el-icon-refresh" size="mini" @click="onBtnClickUpdatePage">刷新</el-button>
</div>
<div v-show="!isShowDebug" class="no-find">
<span>未发现cocos creator的游戏!</span>
<el-button type="success" class="el-icon-refresh" @click="onBtnClickUpdatePage">刷新</el-button>
</div>
</div>
</template>
<script>
<script lang="ts">
// import injectScript from '../injectScript.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的链接
export default {
data() {
return {
isShowDebug: false,
treeItemData: {},
treeData: [],
treeDataMap: {},
bgConn: null,// 与background.js的链接
defaultProps: {
children: 'children',
label: 'name'
},
watchEveryTime: false,// 实时监控节点树
memory: {
defaultProps = {
children: "children",
label: "name"
};
watchEveryTime: boolean = false;// 实时监控节点树
memory = {
performance: {},
console: {},
},
}
},
created() {
this.onTestData();
if (chrome && chrome.runtime) {
this._initChromeRuntimeConnect();
}
window.addEventListener("message", function (event) {
console.log("on vue:" + JSON.stringify(event.data));
console.log("on vue:" + JSON.stringify(event));
}, false);
}
_initChromeRuntimeConnect() {
// chrome.devtools.inspectedWindow.tabId
// 接收来自background.js的消息数据
this.bgConn = chrome.runtime.connect({name: PluginMsg.Page.Devtools});
this.bgConn.onMessage.addListener(function (data, sender) {
this.bgConn.onMessage.addListener((data, sender) => {
if (!data) {
return;
}
@ -91,37 +106,20 @@
} 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 = {
for (let i = 0; i < 40; i++) {
this.treeData.push({name: `node${i}`, children: [{name: `children11111111111111111111111111111111111111${i}`}]})
}
this.treeItemData = {
"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",
@ -135,8 +133,8 @@
}],
"active": true
};
this.treeItemData = testData;
},
}
handleNodeClick(data) {
// todo 去获取节点信息
// console.log(data);
@ -144,7 +142,8 @@
if (uuid !== undefined) {
this.evalInspectorFunction("getNodeInfo", `"${uuid}"`);
}
},
}
onChangeWatchState() {
if (this.watchEveryTime) {
this.timerID = setInterval(function () {
@ -154,7 +153,8 @@
clearInterval(this.timerID);
}
},
}
_updateTreeView(data) {
this.treeData = [data.scene];
return;
@ -190,11 +190,11 @@
this.treeData = treeData;
function dealChildrenNode(rootData, obj) {
obj['data'] = rootData;
obj['uuid'] = rootData.uuid;
obj['label'] = rootData.name;
obj['type'] = rootData.type;
obj['children'] = [];
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];
@ -203,20 +203,22 @@
obj.children.push(item);
}
}
},
}
_getInjectScriptString() {
let injectScript = "";
let code = injectScript.toString();
let array = code.split('\n');
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';
evalCode += array[i] + "\n";
}
// console.log(evalCode);
return evalCode;
},
}
evalInspectorFunction(funcString, parm) {
if (funcString || funcString.length > 0) {
@ -233,34 +235,41 @@
console.log("可能脚本没有注入");
}`;
console.log(injectCode);
if (chrome && chrome.devtools) {
let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
if (info && info.isException) {
console.log(info.value)
console.log(info.value);
}
});
console.log(`ret:${ret}`);
}
} else {
console.log("执行失败!");
}
},
}
onBtnClickUpdateTree() {
this.evalInspectorFunction("updateTreeInfo");
},
}
onBtnClickUpdatePage() {
this.evalInspectorFunction("checkIsGamePage", "true");
// let code = this._getInjectScriptString();
// chrome.devtools.inspectedWindow.eval(code, function () {
// console.log("刷新成功!");
// });
},
}
onBtnClickTest1() {
chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`)
},
chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg1()`);
}
_getTime() {
return new Date().getTime().toString();
},
}
onBtnClickTest2() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
@ -283,11 +292,12 @@
]
}
]
];
// this.treeData = newData;
this._update37(this.treeData[0], newData[0])
},
this._update37(this.treeData[0], newData[0]);
}
_update37(oldTreeNode, newTreeNode) {
debugger
if (!newTreeNode) {
@ -326,23 +336,88 @@
oldChildren.splice(newChildren.length, oldChildren.length - newChildren.length);
}
}
},
}
onBtnClickTest3() {
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg3()`)
let f = require("../core/event-mgr");
console.log(f.id);
},
}
onMemoryTest() {
this.evalInspectorFunction("onMemoryInfo");
}
}
}
</script>
<style scoped>
.treeList {
height: 100%
<style scoped lang="less">
@import "../index.less";
#devtools {
display: flex;
width: 100%;
height: 100%;
.no-find {
display: flex;
flex: 1;
flex-direction: row;
align-items: 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%
@ -352,34 +427,8 @@
background: #d3dce6;
}
.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;
}
.vertical {
flex-direction: column;
}
.center-center {
align-content: center;
align-items: center;
justify-content: center;
}
</style>