mirror of
https://github.com/tidys/cc-inspector-chrome
synced 2025-11-05 05:46:41 +00:00
调整
This commit is contained in:
xyf-mac
28
source/src/devtools/index.js
Normal file
28
source/src/devtools/index.js
Normal file
@@ -0,0 +1,28 @@
|
||||
const PluginMsg = require("../core/plugin-msg");
|
||||
// 对应的是Elements面板的边栏
|
||||
chrome.devtools.panels.elements.createSidebarPane('Cocos', function (sidebar) {
|
||||
sidebar.setObject({some_data: "some data to show!"});
|
||||
});
|
||||
// 创建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");
|
||||
});
|
||||
panel.onSearch.addListener(function (action, query) {
|
||||
console.log("panel search!");
|
||||
return false;
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
41
source/src/devtools/panel/ccType/ComponentsProperty.vue
Normal file
41
source/src/devtools/panel/ccType/ComponentsProperty.vue
Normal file
@@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<div>
|
||||
<h4 @click="onClickComp" style="margin-top: 5px;margin-bottom: 1px;font-weight: bold;cursor: pointer">挂载组件:</h4>
|
||||
<hr style="margin-bottom: 2px;margin-top: 2px;"/>
|
||||
</div>
|
||||
<div v-show="isShowComp">
|
||||
<ui-prop :name="index" track-by="$index" v-for="(comp,index) in components" :key="index">
|
||||
<span>{{comp.type}}</span>
|
||||
</ui-prop>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
isShowComp: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClickComp() {
|
||||
this.isShowComp = !this.isShowComp;
|
||||
}
|
||||
},
|
||||
props: [
|
||||
'components'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
279
source/src/devtools/panel/ccType/NodeBaseProperty.vue
Normal file
279
source/src/devtools/panel/ccType/NodeBaseProperty.vue
Normal file
@@ -0,0 +1,279 @@
|
||||
<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>
|
||||
<!--<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>
|
||||
|
||||
<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;">
|
||||
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
changeSizeActionWidth(step) {
|
||||
let w = parseFloat(this.itemData.width);
|
||||
this.itemData.width = w + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changeSizeActionHeight(step) {
|
||||
let h = parseFloat(this.itemData.height);
|
||||
this.itemData.height = h + step;
|
||||
this.changeSize();
|
||||
},
|
||||
changePositionActionX(step) {
|
||||
let x = parseFloat(this.itemData.x);
|
||||
this.itemData.x = x + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePositionActionY(step) {
|
||||
let y = parseFloat(this.itemData.y);
|
||||
this.itemData.y = y + step;
|
||||
this.changePosition();
|
||||
},
|
||||
changePosition() {
|
||||
// console.log("change changePositionX:" + this.itemData.x);
|
||||
// console.log("change changePositionY:" + this.itemData.y);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodePosition(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.x + "'," +
|
||||
"'" + this.itemData.y + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeSize() {
|
||||
// console.log("change width:" + this.itemData.width);
|
||||
// console.log("change height:" + this.itemData.height);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeSize(" +
|
||||
"'" + this.itemData.uuid + "'," +
|
||||
"'" + this.itemData.width + "'," +
|
||||
"'" + this.itemData.height + "'" +
|
||||
")");
|
||||
this._freshNode();
|
||||
},
|
||||
changeRotation() {
|
||||
console.log("change rotation:" + this.itemData.rotation);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeRotation('" +
|
||||
this.itemData.uuid + "','" +
|
||||
this.itemData.rotation + "')");
|
||||
this._freshNode();
|
||||
},
|
||||
changeColor() {
|
||||
let color = this.itemData.color;
|
||||
console.log("color:" + color);
|
||||
this._evalCode(
|
||||
"window.ccinspector.pluginSetNodeColor('" +
|
||||
this.itemData.uuid + "','" +
|
||||
color + "');");
|
||||
this._freshNode();
|
||||
},
|
||||
onBtnClickNodeHide() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 0);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
onBtnClickNodeShow() {
|
||||
let uuid = this.itemData.uuid;
|
||||
if (uuid !== undefined) {
|
||||
let code = "window.ccinspector.pluginSetNodeActive('" + uuid + "', 1);";
|
||||
this._evalCode(code);
|
||||
this._freshNode();
|
||||
}
|
||||
},
|
||||
_freshNode() {
|
||||
let uuid = this.itemData.uuid;
|
||||
let code2 = "window.ccinspector.getNodeInfo('" + uuid + "')";
|
||||
this._evalCode(code2);
|
||||
},
|
||||
_evalCode(code) {
|
||||
if (chrome && chrome.devtools) {
|
||||
chrome.devtools.inspectedWindow.eval(code);
|
||||
} else {
|
||||
console.log(code);
|
||||
}
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'itemData'
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
span {
|
||||
color: #fd942b;
|
||||
}
|
||||
|
||||
.btnSize {
|
||||
padding: 5px 10px;
|
||||
}
|
||||
|
||||
.comp {
|
||||
border: 2px solid #a1a1a1;
|
||||
padding: 5px 5px;
|
||||
background: #dddddd;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px; /* 老的 Firefox */
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.compBorder {
|
||||
border: 1px solid #b3b3b3;
|
||||
background: #ffffff
|
||||
}
|
||||
|
||||
.myInput {
|
||||
width: 90%;
|
||||
border-radius: 5px;
|
||||
color: #fd942b;
|
||||
}
|
||||
</style>
|
||||
18
source/src/devtools/panel/ccType/SceneProperty.vue
Normal file
18
source/src/devtools/panel/ccType/SceneProperty.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<!--<h1> cc_Scene</h1>-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "app",
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
3
source/src/devtools/panel/evalCodeString.js
Normal file
3
source/src/devtools/panel/evalCodeString.js
Normal file
@@ -0,0 +1,3 @@
|
||||
export default function () {
|
||||
console.log("11")
|
||||
}
|
||||
22
source/src/devtools/panel/index.ts
Normal file
22
source/src/devtools/panel/index.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import Vue from 'vue';
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import index from './index.vue';
|
||||
|
||||
import ui_prop from './ui/ui-prop.vue'
|
||||
import NodeBaseProperty from './ccType/NodeBaseProperty.vue'
|
||||
import SceneProperty from './ccType/SceneProperty.vue'
|
||||
import ComponentsProperty from './ccType/ComponentsProperty'
|
||||
|
||||
|
||||
Vue.component('ui-prop', ui_prop);
|
||||
Vue.component('NodeBaseProperty', NodeBaseProperty);
|
||||
Vue.component('SceneProperty', SceneProperty);
|
||||
Vue.component('ComponentsProperty', ComponentsProperty);
|
||||
Vue.component('ColorPicker', ColorPicker);
|
||||
|
||||
Vue.use(ElementUI);
|
||||
new Vue({
|
||||
el: '#app',
|
||||
render: h => h(index)
|
||||
});
|
||||
385
source/src/devtools/panel/index.vue
Normal file
385
source/src/devtools/panel/index.vue
Normal file
@@ -0,0 +1,385 @@
|
||||
<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>
|
||||
<div>
|
||||
<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; ">
|
||||
<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 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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import injectScript from '../injectScript.js'
|
||||
// import EvalCode from "./evalCodeString.js";
|
||||
|
||||
|
||||
const PluginMsg = require("../../core/plugin-msg");
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
isShowDebug: false,
|
||||
treeItemData: {},
|
||||
treeData: [],
|
||||
treeDataMap: {},
|
||||
bgConn: null,// 与background.js的链接
|
||||
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
watchEveryTime: false,// 实时监控节点树
|
||||
memory: {
|
||||
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;
|
||||
// 构建树形数据
|
||||
if (this.treeData.length === 0) {// 第一次赋值
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
}
|
||||
|
||||
|
||||
let treeData = [];
|
||||
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 injectCode =
|
||||
`if(window.ccinspector){
|
||||
let func = window.ccinspector.${funcString};
|
||||
if(func){
|
||||
console.log("执行${funcString}成功");
|
||||
func.apply(window.ccinspector,[${parm}]);
|
||||
}else{
|
||||
console.log("未发现${funcString}函数");
|
||||
}
|
||||
}else{
|
||||
console.log("可能脚本没有注入");
|
||||
}`;
|
||||
console.log(injectCode);
|
||||
let ret = chrome.devtools.inspectedWindow.eval(injectCode, function (result, info) {
|
||||
if (info && info.isException) {
|
||||
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()`)
|
||||
},
|
||||
_getTime() {
|
||||
return new Date().getTime().toString();
|
||||
},
|
||||
onBtnClickTest2() {
|
||||
// chrome.devtools.inspectedWindow.eval(`window.ccinspector.testMsg2()`)
|
||||
|
||||
|
||||
let newData = [
|
||||
{
|
||||
name: this._getTime(),
|
||||
children: [
|
||||
{
|
||||
name: this._getTime(),
|
||||
children: [
|
||||
{
|
||||
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;
|
||||
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 {
|
||||
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()`)
|
||||
let f = require("../../core/event-mgr");
|
||||
console.log(f.id);
|
||||
},
|
||||
onMemoryTest() {
|
||||
this.evalInspectorFunction("onMemoryInfo");
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.treeList {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.treeInfo {
|
||||
height: 100%
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
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>
|
||||
76
source/src/devtools/panel/ui/ui-prop.vue
Normal file
76
source/src/devtools/panel/ui/ui-prop.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div id="app" style="height: 30px;overflow: hidden;width: 100%;">
|
||||
<div style="width: 20%;float: left;background-color: #4a4a4a;text-align: left;"
|
||||
@mousedown="changePositionMouseAction"
|
||||
onselectstart="return false;"
|
||||
class="noselect">
|
||||
<span onselectstart="return false;" class="noselect font"
|
||||
style="line-height: 30px;color: #bdbdbd;font-size: 12px;margin: 3px;">
|
||||
{{ name }}
|
||||
</span>
|
||||
</div>
|
||||
<div style=" float:left;background-color: #4a4a4a;width: 80%;height:100%;text-align: left;">
|
||||
<div style="line-height: 30px;height: 100%;">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'app',
|
||||
data () {
|
||||
return {
|
||||
clientX: 0,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changePositionMouseAction (event) {
|
||||
document.addEventListener('mousemove', this._onMouseMove);
|
||||
document.addEventListener('mouseup', this._onMouseUp);
|
||||
document.addEventListener('onselectstart', this._onSelect);
|
||||
},
|
||||
_onSelect () {
|
||||
return false;
|
||||
},
|
||||
_onMouseMove (event) {
|
||||
let x = event.clientX;
|
||||
let calcStep = parseFloat(this.step) || 1;// 默认值为1
|
||||
if (x > this.clientX) {
|
||||
calcStep = Math.abs(calcStep);
|
||||
} else {
|
||||
calcStep = -Math.abs(calcStep);
|
||||
}
|
||||
this.$emit('movestep', calcStep);
|
||||
this.clientX = x;
|
||||
},
|
||||
_onMouseUp (event) {
|
||||
document.removeEventListener('mousemove', this._onMouseMove);
|
||||
document.removeEventListener('mouseup', this._onMouseUp);
|
||||
document.removeEventListener('onselectstart', this._onSelect);
|
||||
},
|
||||
},
|
||||
props: [
|
||||
'name',
|
||||
'step',
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.font {
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, 'SourceHanSansCN-Normal', Arial, sans-serif
|
||||
}
|
||||
|
||||
.noselect {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Chrome/Safari/Opera */
|
||||
-khtml-user-select: none; /* Konqueror */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none;
|
||||
/* Non-prefixed version, currently
|
||||
not supported by any browser */
|
||||
}
|
||||
</style>
|
||||
12
source/src/devtools/util.js
Normal file
12
source/src/devtools/util.js
Normal file
@@ -0,0 +1,12 @@
|
||||
let index = 0;
|
||||
setInterval(function () {
|
||||
let msg = "util: " + index++;
|
||||
// chrome.extension.sendMessage(msg;
|
||||
if (typeof aa !== undefined) {
|
||||
msg = aa;
|
||||
}
|
||||
window.postMessage({type: 1, msg: msg}, '*');
|
||||
}.bind(this), 2000);
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user