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

README.md

@@ -1,5 +1,5 @@
-# ccc-devtools v2.2.0
+# ccc-devtools v2.3.0
-Cocos Creator 网页调试器，运行时查看、修改节点树，实时更新节点属性。
+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`目录

css/themes/dark.css

@@ -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;
+}

index.html

@@ -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'">
+				<img :src="window.location.href + row.preview" style="max-height: 40px;max-width: 120px;" v-if="row.preview">
-				<div v-if="row.type !== 'png' && row.type !== 'jpg'" style="max-height: 40px;">_</div>
+				<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>
 

js/app.js

@@ -4,9 +4,7 @@ let app = new Vue({
         needUpdate: false,
         is3DNode: false,
         isDevMode: false,
-        isShowFPS: false,
+        isShowProfile: true,
-        isShowMS: false,
-        isShowMB: false,
         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 preview = '';
-                            let texture = rawCacheData[k.replace('.png', '.json')];
+                        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,
+                            content: content,
-                            size: Math.random() * 10000 | 0
+                            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');
+            if (this.$data.isShowProfile) {
-            while (panels.length > 0) {
+                let addStats = function(stats) {
-                panels[0].parentElement.removeChild(panels[0]);
+                    stats.dom.style.position = 'relative';
-            }
+                    stats.dom.style.float = 'right';
-            let newPanels = [];
+                    stats.dom.style.marginLeft = '10px';
-            let array = [];
+                    stats.dom.style.marginBottom = '10px';
-            this.$data.isShowFPS ? (array.push(0) && localStorage.setItem('isShowFPS', '1')) : localStorage
+                    // stats.dom.style.pointerEvents = 'none';
-                .setItem(
+                    stats.dom.className = 'statsPanel';
-                    'isShowFPS', '0');
+                    document.getElementById('panelCtl').appendChild(stats.dom);
-            this.$data.isShowMS ? (array.push(1) && localStorage.setItem('isShowMS', '1')) : localStorage
+                    localStorage.setItem('isShowProfile', '1')
-                .setItem('isShowMS',
+                }
-                    '0');
+                let animate = () => {
-            this.$data.isShowMB ? (array.push(2) && localStorage.setItem('isShowMB', '1')) : localStorage
+                    if (this.$data.isShowProfile) {
-                .setItem('isShowMB',
+                        stats.update();
-                    '0');
+                        requestAnimationFrame(animate);
-            for (let i of array) {
+                    }
+                }
                 let stats = new Stats();
-                stats.showPanel(i); // 0: fps, 1: ms, 2: mb, 3+: custom
+                addStats(stats);
-                stats.dom.style.position = 'relative';
+                animate();
-                stats.dom.style.float = 'right';
+            } else {
-                stats.dom.style.marginLeft = '10px';
+                let panels = document.getElementsByClassName('statsPanel');
-                stats.dom.style.marginBottom = '10px';
+                while (panels.length > 0) {
-                stats.dom.style.pointerEvents = 'none';
+                    panels[0].parentElement.removeChild(panels[0]);
-                stats.dom.className = 'statsPanel';
+                }
-                document.getElementById('panelCtl').appendChild(stats.dom);
+                localStorage.setItem('isShowProfile', '0');
-                newPanels.push(stats);
             }
 
-            function animate() {
-                for (let i = 0; i < newPanels.length; i++) {
-                    let stats = newPanels[i];
-                    stats.update();
-                }
-                requestAnimationFrame(animate);
-            }
-            animate();
         },
         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.isShorProfile = localStorage.getItem('isShorProfile') === '1';
-            this.$data.isShowMS = localStorage.getItem('isShowMS') === '1';
-            this.$data.isShowMB = localStorage.getItem('isShowMB') === '1';
             setTimeout(() => {
                 this.handleChangeStats();
             }, 0);

libs/stats/Stats.js

@@ -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 };

libs/stats/stats.min.js

@@ -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});

version.json

@@ -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"
 }