CocosPlugin/ccc-devtools
1
0
Fork 0
mirror of https://github.com/potato47/ccc-devtools.git synced 2024-12-25 19:29:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

添加缓存资源查看面板，纹理内存挂件

Browse Source
This commit is contained in:
Next 2019-04-16 13:49:31 +08:00
parent dd6fdbea56
commit 9c604e39e5
8 changed files with 279 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -1,5 +1,5 @@
# ccc-devtools v2.2.0
Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
# ccc-devtools v2.3.0
Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化显示缓存资源。
## 预览
@ -25,6 +25,9 @@ v2.1.0: 区分手动刷新和自动刷新两种模式，手动刷新时支持搜
v2.2.0: 新增黑色主题(感谢[@wheatup](https://github.com/wheatup) )
![dark-theme](./screenshots/dark-theme.png)
v2.3.0: 添加缓存资源查看面板；简化调试信息显示，新增纹理内存挂件。
![cache](./screenshots/preview_cache.png)
## 使用
1. 点击 Creator 右上角进入编辑器 resources 目录，再依次进入`static/preview-templates`目录

7
css/themes/dark.css
View File

@ -66,3 +66,10 @@
color: #59a !important;
background-color: #222 !important;
}
.ivu-modal-content,
.ivu-table-column-center,
.ivu-modal-header-inner {
background-color: #222 !important;
color: #bbb !important;
}

36
index.html
View File

@ -147,36 +147,15 @@
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
FPS
调试信息
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowFPS" @change="handleChangeStats"
<el-switch style="margin: 5px;" v-model="isShowProfile" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
帧时间
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowMS" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
内存
</el-col>
<el-col :span="12">
<el-switch style="margin: 5px;" v-model="isShowMB" @change="handleChangeStats"
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row>
<!-- TODO: -->
<!-- <el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
缓存
</el-col>
@ -185,7 +164,7 @@
active-color="#0099ff" inactive-color="gray">
</el-switch>
</el-col>
</el-row> -->
</el-row>
<el-row style="margin:5px 0;">
<el-col :span="12" style="text-align:left;padding-top:7px;padding-left:5px;">
暗黑主题
@ -214,13 +193,16 @@
<Modal v-model="isShowCache" width="800" :mask-closable="false" :mask="false" scrollable @on-cancel="closeCachePanel()" :title="cacheTitle" footer-hide="true">
<i-table border :columns="cacheColumns" height="600" size="small" :data="cacheData" :loading="cacheDataLoading">
<template slot-scope="{ row, index }" slot="cache_preview">
<img :src="window.location.href + row.id" style="max-height: 40px;max-width: 120px;" v-if="row.type === 'png' || row.type === 'jpg'">
<div v-if="row.type !== 'png' && row.type !== 'jpg'" style="max-height: 40px;">_</div>
<img :src="window.location.href + row.preview" style="max-height: 40px;max-width: 120px;" v-if="row.preview">
<div v-if="!row.preview" style="max-height: 40px;">_</div>
</template>
<template slot-scope="{ row, index }" slot="cache_action">
<i-button type="primary" size="small" @click="showCacheItem(row.id)">Detail</i-button>
<i-button type="error" size="small" @click="releaseCacheItem(row.id)">Release</i-button>
</template>
<template slot-scope="{ row, index }" slot="cache_size">
{{row.size !== -1 ? row.size + 'MB' : '_'}}
</template>
</i-table>
</Modal>
</div>
@ -229,7 +211,7 @@
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/vue-beauty/js/vue-beauty.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/element/js/element-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/iview/js/iview.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/stats.min.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/libs/stats/Stats.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/config.js"></script>
<script type="text/javascript" charset="utf-8" src="app/editor/static/preview-templates/ccc-devtools/js/app.js"></script>

94
js/app.js
View File

@ -4,9 +4,7 @@ let app = new Vue({
needUpdate: false,
is3DNode: false,
isDevMode: false,
isShowFPS: false,
isShowMS: false,
isShowMB: false,
isShowProfile: true,
isShowCache: false,
isAutoRefreshTree: true,
isDarkTheme: false,
@ -64,22 +62,23 @@ let app = new Vue({
sortable: true
}, {
title: 'Size',
slot: 'cache_size',
key: 'size',
align: 'center',
width: 120,
sortable: true
}, {
title: 'Queue',
key: 'queueId',
sortable: true,
width: 120,
align: 'center'
}, {
title: 'Preview',
slot: 'cache_preview',
align: 'center',
width: 150
}, {
title: 'Queue',
key: 'queueId',
sortable: true,
width: 120,
align: 'center'
},{
title: 'Action',
slot: 'cache_action',
width: 150,
@ -243,47 +242,60 @@ let app = new Vue({
return node.name.toLowerCase().indexOf(value.toLowerCase()) !== -1;
},
openCachePanel() {
console.log('open cache panel');
this.$data.cacheDataLoading = true;
setTimeout(() => {
let rawCacheData = cc.loader._cache;
let cacheData = [];
let totalTextureSize = 0;
for (let k in rawCacheData) {
let item = rawCacheData[k];
// console.log(item)
if (item.type !== 'js' && item.type !== 'json') {
let itemName = '_';
if (item.type === 'png' && item.type !== 'jpg') {
let texture = rawCacheData[k.replace('.png', '.json')];
let preview = '';
let content = item.content.__classname__ ? item.content.__classname__ : item.type;
let formatSize = -1;
if (item.type === 'png' || item.type === 'jpg') {
let texture = rawCacheData[k.replace('.' + item.type, '.json')];
if (texture && texture._owner && texture._owner._name) {
itemName = texture._owner._name;
preview = texture.content.url;
}
}
else {
} else {
if (item.content.name && item.content.name.length > 0) {
itemName = item.content.name;
} else if (item._owner) {
itemName = item._owner.name || '_';
}
if (content === 'cc.Texture2D') {
let texture = item.content;
preview = texture.url;
let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
totalTextureSize += textureSize;
// sizeStr = textureSize.toFixed(3) + 'M';
formatSize = Math.round(textureSize * 1000) / 1000;
} else if (content === 'cc.SpriteFrame') {
preview = item.content._texture.url;
}
}
cacheData.push({
queueId: item.queueId,
type: item.type,
name: itemName,
preview: preview,
id: item.id,
content: item.content.__classname__ ? item.content.__classname__ : item.type,
size: Math.random() * 10000 | 0
content: content,
size: formatSize
});
}
}
this.$data.cacheData = cacheData;
this.$data.cacheTitle = `缓存 [文件总数:${cacheData.length}]`;
this.$data.cacheTitle = `缓存 [文件总数:${cacheData.length}][纹理缓存:${totalTextureSize.toFixed(2) + 'M'}]`;
this.$data.cacheDataLoading = false;
}, 0);
},
closeCachePanel() {
console.log('close cache panel');
this.$data.cacheData = [];
this.$data.cacheTitle = `缓存`;
},
@ -337,42 +349,34 @@ let app = new Vue({
data ? this.openCachePanel() : this.closeCachePanel();
},
handleChangeStats() {
let panels = document.getElementsByClassName('statsPanel');
while (panels.length > 0) {
panels[0].parentElement.removeChild(panels[0]);
}
let newPanels = [];
let array = [];
this.$data.isShowFPS ? (array.push(0) && localStorage.setItem('isShowFPS', '1')) : localStorage
.setItem(
'isShowFPS', '0');
this.$data.isShowMS ? (array.push(1) && localStorage.setItem('isShowMS', '1')) : localStorage
.setItem('isShowMS',
'0');
this.$data.isShowMB ? (array.push(2) && localStorage.setItem('isShowMB', '1')) : localStorage
.setItem('isShowMB',
'0');
for (let i of array) {
let stats = new Stats();
stats.showPanel(i); // 0: fps, 1: ms, 2: mb, 3+: custom
if (this.$data.isShowProfile) {
let addStats = function(stats) {
stats.dom.style.position = 'relative';
stats.dom.style.float = 'right';
stats.dom.style.marginLeft = '10px';
stats.dom.style.marginBottom = '10px';
stats.dom.style.pointerEvents = 'none';
// stats.dom.style.pointerEvents = 'none';
stats.dom.className = 'statsPanel';
document.getElementById('panelCtl').appendChild(stats.dom);
newPanels.push(stats);
localStorage.setItem('isShowProfile', '1')
}
function animate() {
for (let i = 0; i < newPanels.length; i++) {
let stats = newPanels[i];
let animate = () => {
if (this.$data.isShowProfile) {
stats.update();
}
requestAnimationFrame(animate);
}
}
let stats = new Stats();
addStats(stats);
animate();
} else {
let panels = document.getElementsByClassName('statsPanel');
while (panels.length > 0) {
panels[0].parentElement.removeChild(panels[0]);
}
localStorage.setItem('isShowProfile', '0');
}
},
handleChangeTheme(isDark) {
isDark ? this.addDarkTheme() : this.removeDarkTheme();
@ -558,9 +562,7 @@ let app = new Vue({
} else {
this.$data.isDarkTheme = false;
}
this.$data.isShowFPS = localStorage.getItem('isShowFPS') === '1';
this.$data.isShowMS = localStorage.getItem('isShowMS') === '1';
this.$data.isShowMB = localStorage.getItem('isShowMB') === '1';
this.$data.isShorProfile = localStorage.getItem('isShorProfile') === '1';
setTimeout(() => {
this.handleChangeStats();
}, 0);

200
libs/stats/Stats.js Normal file
View File

@ -0,0 +1,200 @@
var Stats = function () {
var mode = 0;
var container = document.createElement('div');
container.style.cssText = 'position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000';
container.addEventListener('click', function (event) {
event.preventDefault();
showPanel(++mode % container.children.length);
}, false);
//
function addPanel(panel) {
container.appendChild(panel.dom);
return panel;
}
function showPanel(id) {
for (var i = 0; i < container.children.length; i++) {
container.children[i].style.display = i === id ? 'block' : 'none';
}
mode = id;
}
function getDrawcalls() {
if (window.cc) {
return cc.renderer.drawCalls;
} else {
return Infinity;
}
}
function getTexMemory() {
if (window.cc) {
let totalTextureSize = 0;
let cacheData = cc.loader._cache;
for (let k in cacheData) {
let item = cacheData[k];
if (item.content && item.content.__classname__ && item.content.__classname__ === 'cc.Texture2D') {
let texture = item.content;
let textureSize = texture.width * texture.height * ((texture._native === '.jpg' ? 3 : 4) / 1024 / 1024);
totalTextureSize += textureSize;
}
}
return totalTextureSize;
} else {
return Infinity;
}
}
//
var beginTime = (performance || Date).now(), prevTime = beginTime, frames = 0;
var texPanel = addPanel(new Stats.Panel('纹理内存', 'MB', '#0ff', '#002'));
var dcPanel = addPanel(new Stats.Panel('DrawCall', '', '#ff8', '#221'));
var fpsPanel = addPanel(new Stats.Panel('FPS', '', '#0f0', '#020'));
var msPanel = addPanel(new Stats.Panel('渲染时间', 'MS', '#f08', '#201'));
// if (self.performance && self.performance.memory) {
// var memPanel = addPanel(new Stats.Panel('MB', '#f08', '#201'));
// }
showPanel(0);
return {
REVISION: 16,
dom: container,
addPanel: addPanel,
showPanel: showPanel,
begin: function () {
beginTime = (performance || Date).now();
},
end: function () {
frames++;
var time = (performance || Date).now();
msPanel.update(time - beginTime, 200);
if (time >= prevTime + 1000) {
fpsPanel.update((frames * 1000) / (time - prevTime), 100);
prevTime = time;
frames = 0;
// if (memPanel) {
// var memory = performance.memory;
// memPanel.update(memory.usedJSHeapSize / 1048576, memory.jsHeapSizeLimit / 1048576);
// }
texPanel.update(getTexMemory(), 1000);
dcPanel.update(getDrawcalls(), 500);
}
return time;
},
update: function () {
beginTime = this.end();
},
// Backwards Compatibility
domElement: container,
setMode: showPanel
};
};
Stats.Panel = function (name, unit, fg, bg) {
var min = Infinity, max = 0, round = Math.round;
var PR = round(window.devicePixelRatio || 1);
var WIDTH = 80 * PR, HEIGHT = 48 * PR,
TEXT_X = 3 * PR, TEXT_Y = 2 * PR,
GRAPH_X = 3 * PR, GRAPH_Y = 15 * PR,
GRAPH_WIDTH = 74 * PR, GRAPH_HEIGHT = 30 * PR;
var canvas = document.createElement('canvas');
canvas.width = WIDTH;
canvas.height = HEIGHT;
canvas.style.cssText = 'width:80px;height:48px';
var context = canvas.getContext('2d');
context.font = 'bold ' + (9 * PR) + 'px Helvetica,Arial,sans-serif';
context.textBaseline = 'top';
context.fillStyle = bg;
context.fillRect(0, 0, WIDTH, HEIGHT);
context.fillStyle = fg;
context.fillText(name, TEXT_X, TEXT_Y);
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X, GRAPH_Y, GRAPH_WIDTH, GRAPH_HEIGHT);
return {
dom: canvas,
update: function (value, maxValue) {
min = Math.min(min, value);
max = Math.max(max, value);
context.fillStyle = bg;
context.globalAlpha = 1;
context.fillRect(0, 0, WIDTH, GRAPH_Y);
context.fillStyle = fg;
// context.fillText(round(value) + ' ' + name + ' (' + round(min) + '-' + round(max) + ')', TEXT_X, TEXT_Y);
context.fillText(name + ' ' + round(value) + unit, TEXT_X, TEXT_Y);
context.drawImage(canvas, GRAPH_X + PR, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT, GRAPH_X, GRAPH_Y, GRAPH_WIDTH - PR, GRAPH_HEIGHT);
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, GRAPH_HEIGHT);
context.fillStyle = bg;
context.globalAlpha = 0.9;
context.fillRect(GRAPH_X + GRAPH_WIDTH - PR, GRAPH_Y, PR, round((1 - (value / maxValue)) * GRAPH_HEIGHT));
}
};
};
// export { Stats as default };

5
libs/stats/stats.min.js vendored
View File

@ -1,5 +0,0 @@
// stats.js - http://github.com/mrdoob/stats.js
(function(f,e){"object"===typeof exports&&"undefined"!==typeof module?module.exports=e():"function"===typeof define&&define.amd?define(e):f.Stats=e()})(this,function(){var f=function(){function e(a){c.appendChild(a.dom);return a}function u(a){for(var d=0;d<c.children.length;d++)c.children[d].style.display=d===a?"block":"none";l=a}var l=0,c=document.createElement("div");c.style.cssText="position:fixed;top:0;left:0;cursor:pointer;opacity:0.9;z-index:10000";c.addEventListener("click",function(a){a.preventDefault();
u(++l%c.children.length)},!1);var k=(performance||Date).now(),g=k,a=0,r=e(new f.Panel("FPS","#0ff","#002")),h=e(new f.Panel("MS","#0f0","#020"));if(self.performance&&self.performance.memory)var t=e(new f.Panel("MB","#f08","#201"));u(0);return{REVISION:16,dom:c,addPanel:e,showPanel:u,begin:function(){k=(performance||Date).now()},end:function(){a++;var c=(performance||Date).now();h.update(c-k,200);if(c>g+1E3&&(r.update(1E3*a/(c-g),100),g=c,a=0,t)){var d=performance.memory;t.update(d.usedJSHeapSize/
1048576,d.jsHeapSizeLimit/1048576)}return c},update:function(){k=this.end()},domElement:c,setMode:u}};f.Panel=function(e,f,l){var c=Infinity,k=0,g=Math.round,a=g(window.devicePixelRatio||1),r=80*a,h=48*a,t=3*a,v=2*a,d=3*a,m=15*a,n=74*a,p=30*a,q=document.createElement("canvas");q.width=r;q.height=h;q.style.cssText="width:80px;height:48px";var b=q.getContext("2d");b.font="bold "+9*a+"px Helvetica,Arial,sans-serif";b.textBaseline="top";b.fillStyle=l;b.fillRect(0,0,r,h);b.fillStyle=f;b.fillText(e,t,v);
b.fillRect(d,m,n,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d,m,n,p);return{dom:q,update:function(h,w){c=Math.min(c,h);k=Math.max(k,h);b.fillStyle=l;b.globalAlpha=1;b.fillRect(0,0,r,m);b.fillStyle=f;b.fillText(g(h)+" "+e+" ("+g(c)+"-"+g(k)+")",t,v);b.drawImage(q,d+a,m,n-a,p,d,m,n-a,p);b.fillRect(d+n-a,m,a,p);b.fillStyle=l;b.globalAlpha=.9;b.fillRect(d+n-a,m,a,g((1-h/w)*p))}}};return f});

BIN
screenshots/preview_cache.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 334 KiB

2
version.json
View File

@ -1,6 +1,6 @@
{
"name": "ccc-devtools",
"version": "2.2.0",
"version": "2.3.0",
"author": "Next",
"repo": "https://github.com/potato47/ccc-devtools.git"
}