README.md

@@ -1,85 +1,10 @@
-> 主干分支适用 Cocos Creator 3.4+ 版本，其他版本查看其他分支
-
 # ccc-devtools
+Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性。
 
-## 简介
+![](screenshots/preview.png)
 
-ccc-devtools 是一款用于 Cocos Creator 网页端预览的调试工具，可以实时显示场景的节点树，并对节点属性进行同步更改。
+# 使用
 
-![p1](https://user-images.githubusercontent.com/21299133/206861290-0bf8c74a-e8c6-435c-b17c-9949e4db6d55.gif)
+将 release 下的 preview-template.zip 解压放到项目目录下，浏览器预览项目即可使用。
 
-
-## 使用
-
-下载打包好的 [preview-template.zip](https://github.com/potato47/ccc-devtools/raw/master/release/preview-template.zip) 文件(release目录下)，解压到 Cocos Creator 项目目录下，刷新预览时的浏览器即可。
-节点属性修改不赘述，重点介绍几个独特的小功能：
-
-- 输出节点、组件引用到控制台，配合调试比较常用
-
-![image](https://user-images.githubusercontent.com/21299133/206860999-bd0a3184-a692-45fe-ac5e-4e7361fa091c.png)
-
-- 标记UI节点在场景中的位置
-
-![image](https://user-images.githubusercontent.com/21299133/206854782-f74e8b3c-d804-4919-afb7-bef559719933.png)
-
-- 调试信息独立显示，再也不怕浅背景看不清 FPS 了
-
-![image](https://user-images.githubusercontent.com/21299133/206854791-3dcb52eb-5fa3-4157-b4dd-2a2d83932f5a.png)
-
-## 开发
-
-项目依据文档中自定义预览模板一节进行开发，未接触过相关概念可以先阅读一下官方文档
->自定义预览模板
-预览支持自定义模板方便用户自定义需要的预览效果，自定义的预览模板可以放置在项目目录的 preview-template 文件夹中。或者点击编辑器主菜单中的 项目 -> 生成预览模板 就可以在项目目录下创建一个最新的预览模板。编辑器中的预览也是使用模板来注入最新的项目数据，预览时将会查找该目录下的 index 文件，如果存在就是要该文件作为预览的模板。
-preview-template 文件夹的结构类似：  
-project-folder  
- |--assets  
- |--build  
- |--preview-template  
-     // 必须的入口文件  
-     |--index.ejs  
-     // 其他文件可根据想要实现的预览效果进行添加  
-
-本项目主要修改index.ejs，注入一段 Vue 绑定的自定义html，核心修改见下图
-
-
-![image](https://user-images.githubusercontent.com/21299133/206854643-41038621-1414-4518-a799-3c54d54e3e75.png)
-
-在浏览器环境中 cc 是一个全局变量，可以通过 cc.director.getScene().children 获取场景中的节点，知道这点就可以开发了，剩下的就是节点数据如何展示出来的问题了。
-技术栈为 Vue3 + ElementPlus + TypeScript + Vite，熟悉前端的朋友欢迎来仓库贡献。
-项目结构如下：
-
-![image](https://user-images.githubusercontent.com/21299133/206854626-03d127c8-6b26-4ae6-a1fa-1793e46b66e8.png)
-
-项目开发需配合本地已有的 Cocos Creator 3.x 项目，将 ccc-devtools 克隆到本地后，打开scripts/setup.js，将 projectTemplatePath 改为你的本地测试 Creator 项目路径。
-
-![image](https://user-images.githubusercontent.com/21299133/206854670-7e95c7bc-e5b9-4ca9-8feb-4470d5a81e2e.png)
-
-开发流程：
-
-- 安装依赖
-`yarn`
- 
-- 修改代码
-- 构建项目
-`yarn build`
- 
-- 安装构建产物到项目
-`yarn setup`
- 
-- 刷新浏览器查看效果
-
-## 插件商店版
-
-[插件版](https://store.cocos.com/app/detail/3922)自带了一份工具代码，提供了自动安装功能。适合多个项目快速安装、卸载工具。
-
-![image](https://user-images.githubusercontent.com/21299133/206855136-cc8f2018-6844-4ae1-b2b4-5dbf016488dc.png)
-
-## 备注
-
-- 源码地址：https://github.com/potato47/ccc-devtools
-- 打包文件：https://github.com/potato47/ccc-devtools/raw/master/release/preview-template.zip
-- UI 组件库：https://element-plus.org
-- 自定义网页预览文档：https://docs.cocos.com/creator/manual/zh/editor/preview/browser.html
-- 插件地址：https://store.cocos.com/app/detail/3922
- 
+适用于 Cocos Creator 3.x 版本。

components.d.ts

@@ -10,15 +10,12 @@ declare module '@vue/runtime-core' {
     CCComponent: typeof import('./src/components/CCComponent.vue')['default']
     CCNode: typeof import('./src/components/CCNode.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElLink: typeof import('element-plus/es')['ElLink']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElTreeV2: typeof import('element-plus/es')['ElTreeV2']
-    ProfilerPanel: typeof import('./src/components/ProfilerPanel.vue')['default']
     PropItem: typeof import('./src/components/PropItem.vue')['default']
     TreePanel: typeof import('./src/components/TreePanel.vue')['default']
     UserComponent: typeof import('./src/components/UserComponent.vue')['default']

index.html

@@ -1,2 +1,2 @@
-<div id="dev-app" style="width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: center;"></div>
-<script type="module" src="/src/main.ts"></script>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>

package.json

@@ -7,8 +7,7 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "package": "node scripts/package.js",
-    "setup": "node scripts/setup.js"
+    "package": "node scripts/package.js"
   },
   "dependencies": {
     "element-plus": "^2.2.6",
@@ -18,7 +17,6 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^2.3.3",
     "adm-zip": "^0.5.9",
-    "fs-extra": "^10.1.0",
     "typescript": "^4.5.4",
     "unplugin-auto-import": "^0.9.3",
     "unplugin-vue-components": "^0.21.1",

release/preview-template/dist/index.html

@@ -1,4 +1,3 @@
-<script type="module" crossorigin src="/dist/assets/index.95bf25f5.js"></script>
-<link rel="stylesheet" href="/dist/assets/index.741f95c0.css">
-<div id="dev-app" style="width: 400px;height: 100%;display: flex;flex-direction: column;justify-content: center;"></div>
-
+<script type="module" crossorigin src="/dist/assets/index.bec476d0.js"></script>
+<link rel="stylesheet" href="/dist/assets/index.1d01bced.css">
+<div id="app"></div>

release/preview-template/index.ejs

@@ -19,57 +19,29 @@
     </head>
     <body>
         <%- include(cocosToolBar, {config: config}) %>
-        <div style="display: flex;flex: auto;align-items: center;">
-            <%- include ./dist/index.html %>
-            <div id="content" class="content">
-                <div class="contentWrap">
-                    <div id="GameDiv" class="wrapper">
-                        <div id="Cocos3dGameContainer">
-                            <canvas id="GameCanvas" tabindex="-1" style="background-color: '';"></canvas>
-                        </div>
-                        <div id="splash">
-                            <div class="progress-bar stripes"><span></span></div>
-                        </div>
-                        <div id="bulletin">
-                            <div id="sceneIsEmpty" class="inner"><%=tip_sceneIsEmpty%></div>
-                        </div>
-                        <div class="error" id="error">
-                            <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
-                            <div class="error-main"></div>
-                            <div class="error-stack"></div>
-                        </div>
+        <div id="content" class="content">
+            <div class="contentWrap">
+                <div id="GameDiv" class="wrapper">
+                    <div id="Cocos3dGameContainer">
+                        <canvas id="GameCanvas"></canvas>
+                    </div>
+                    <div id="splash">
+                        <div class="progress-bar stripes"><span></span></div>
+                    </div>
+                    <div id="bulletin">
+                        <div id="sceneIsEmpty" class="inner"><%=tip_sceneIsEmpty%></div>
+                    </div>
+                    <div class="error" id="error">
+                        <div class="title">Error <i>(Please open the console to see detailed errors)</i></div>
+                        <div class="error-main"></div>
                     </div>
                 </div>
-                <p class="footer">
-                    Created with <a href="https://www.cocos.com/products" target="_blank" title="Cocos Creator">Cocos Creator</a>
-                </p>
             </div>
+            <p class="footer">
+                <% include ./dist/index.html %>
+            </p>
         </div>
         <%- include(cocosTemplate, {}) %>
     </body>
 </html>
 
-<script>
-    document.getElementsByClassName('toolbar')[0].insertAdjacentHTML('afterbegin', '<div><button id="btn-show-tree">Tree</button></div>');
-    const devtoolsBtn = document.getElementById('btn-show-tree');
-    let isOpen = !!localStorage.getItem('ccc_devtools_show');
-    toggle(isOpen);
-    devtoolsBtn.addEventListener('click', () => {
-        isOpen = !isOpen;
-        toggle(isOpen);
-    }, false);
-
-    function toggle(isOpen) {
-        const devApp = document.getElementById('dev-app');
-        window.ccdevShow = isOpen;
-        if (isOpen) {
-            devApp.style.display = 'flex';
-            devtoolsBtn.classList.add('checked');
-            localStorage.setItem('ccc_devtools_show', 1);
-        } else {
-            devApp.style.display = 'none';
-            devtoolsBtn.classList.remove('checked');
-            localStorage.removeItem('ccc_devtools_show');
-        }
-    }
-</script>

release/preview-template/version.json

@@ -1 +1 @@
-{"name":"ccc-devtools","version":"2022/12/11","author":"Next","repo":"https://github.com/potato47/ccc-devtools.git"}
+{"name":"ccc-devtools","version":"2022/7/17","author":"Next","repo":"https://github.com/potato47/ccc-devtools.git"}

scripts/setup.js

@@ -1,15 +0,0 @@
-const fse = require('fs-extra');
-const path = require('path');
-
-const localTemplatePath = path.join(__dirname, '../release/');
-const projectTemplatePath = '/Users/next/projects/cocos/example352/';
-
-if (!fse.existsSync(projectTemplatePath)) {
-    console.error('project path not exist');
-    return;
-}
-fse.copy(localTemplatePath, projectTemplatePath).then(() => {
-    console.log('更新预览模板成功');
-}).catch(err => {
-    console.error('更新预览模板失败', err);
-});

src/App.vue

@@ -1,31 +1,24 @@
 <script setup lang="ts">
 import TreePanel from './components/TreePanel.vue';
 import { ref } from 'vue';
-import ProfilerPanel from './components/ProfilerPanel.vue';
-let showProfiler = ref(false);
-window.addEventListener('showProfiler', (e: any) => {
-  showProfiler.value = !showProfiler.value;
-});
+let showTree = ref(false);
 </script>
 
 <template>
   <div>
-    <vue-final-modal v-model="showProfiler" classes="modal-container" content-class="modal-content" :hide-overlay="true"
+    <vue-final-modal v-model="showTree" classes="modal-container" content-class="modal-content" :hide-overlay="true"
       :click-to-close="false" :prevent-click="true" :drag="true" :fit-parent="true" drag-selector=".modal-drag">
-      <ProfilerPanel :show="showProfiler"></ProfilerPanel>
+      <TreePanel :show="showTree"></TreePanel>
     </vue-final-modal>
+    <el-button size="small" @click="showTree = !showTree">节点树</el-button>
   </div>
-  <el-card :body-style="{ padding: 0 }" style="margin: 10px;">
-    <TreePanel :show="true"></TreePanel>
-  </el-card>
-  <el-link type="primary" href="https://github.com/potato47/ccc-devtools" target="_blank" style="position:absolute;left: 5px;bottom: 5px;">ccc-devtools</el-link>
 </template>
 
 <style scoped>
 :deep(.modal-container) {
   display: flex;
-  justify-content: end;
-  align-items: start;
+  justify-content: start;
+  align-items: center;
 }
 
 :deep(.modal-content) {
@@ -36,6 +29,8 @@ window.addEventListener('showProfiler', (e: any) => {
   padding: 0;
   border: 1px solid cadetblue;
   background: #171920;
+  min-width: 400px;
+  height: 80%;
 }
 </style>
 

src/components/CCNode.vue

@@ -5,11 +5,8 @@
         <el-button size="small" @click="Utils.drawNodeRect(ccNode)">+</el-button>
         <el-button size="small" @click="Utils.outputToConsole(ccNode)">></el-button>
     </div>
-    <template v-if="ccNode!.name != 'PROFILER_NODE'">
-        <PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
-            :prop-key="prop.key" :update-key="updateKey!"></PropItem>
-    </template>
-    <ProfilerPanel v-if="ccNode!.name == 'PROFILER_NODE'" :show="true"></ProfilerPanel>
+    <PropItem v-for="prop in NodeModel.props" :key="prop.key" :model="NodeModel" :prop-name="prop.name"
+        :prop-key="prop.key" :update-key="updateKey!"></PropItem>
 </template>
 
 <script setup lang="ts">

src/components/ProfilerPanel.vue

@@ -1,78 +0,0 @@
-<template>
-    <div style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
-        class="modal-drag">
-        Profiler
-    </div>
-    <div style="width: 100%;">
-        <div class="row" v-for="item in items" :key="item.key">
-            <span>{{ item.desc }}</span>
-            <span style="flex: 1;text-align: right;">{{ item.value }}</span>
-        </div>
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from 'vue-demi';
-
-const props = defineProps({
-    show: Boolean,
-});
-
-let items = ref<any[]>([]);
-let timeoutId: number;
-
-function refresh() {
-    // @ts-ignore
-    const cc = window['cc'];
-    if (!cc || !cc.profiler || !cc.profiler.stats) {
-        return;
-    }
-    // @ts-ignore
-    const stats = cc.profiler.stats;
-    items.value.forEach(item => {
-        const data = stats[item.key];
-        item.desc = data.desc;
-        if (data.isInteger) {
-            item.value = data.counter._value | 0;
-        } else {
-            item.value = data.counter._value.toFixed(2);
-        }
-    });
-    timeoutId = setTimeout(refresh, 1000);
-}
-
-function init() {
-    items.value = [
-        { key: 'fps', desc: '', value: 0 },
-        { key: 'draws', desc: '', value: 0 },
-        { key: 'frame', desc: '', value: 0 },
-        { key: 'instances', desc: '', value: 0 },
-        { key: 'tricount', desc: '', value: 0 },
-        { key: 'logic', desc: '', value: 0 },
-        { key: 'physics', desc: '', value: 0 },
-        { key: 'render', desc: '', value: 0 },
-        { key: 'textureMemory', desc: '', value: 0 },
-        { key: 'bufferMemory', desc: '', value: 0 },
-    ];
-    refresh();
-}
-
-onMounted(() => {
-  init();
-});
-
-onUnmounted(() => {
-    if (!isNaN(timeoutId)) {
-        clearTimeout(timeoutId);
-    }
-});
-
-</script>
-
-<style>
-.row {
-    display: flex;
-    justify-content: center;
-    margin: 10px;
-}
-</style>

src/components/TreePanel.vue

@@ -1,14 +1,17 @@
 <template>
-  <div style="width: 100%;" :style="{ height: treeViewHeight }">
-    <el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
-      :expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
-      @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :height="treeViewHeight">
-      <template #default="{ node }">
-        <span :class="{ 'node-hide': !node.data.active }">{{ node.label }}</span>
-      </template>
-    </el-tree-v2>
+  <div
+    style="width: 100%;height: 30px;background-color: #26282f;display: flex;align-items: center;justify-content: center;color: white;"
+    class="modal-drag">
+    节点树
   </div>
-  <div style="width: 100%;border-top: 2px solid #414243;" :style="{ height: treeViewHeight }">
+  <el-tree-v2 ref="treeView" :props="defaultProps" empty-text="正在加载场景" :highlight-current="true"
+    :expand-on-click-node="false" :default-expanded-keys="expandedKeys" @current-change="handleCurrentNodeChange"
+    @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :height="treeViewHeight">
+    <template #default="{ node }">
+      <span :class="{ 'node-hide': !node.data.active }">{{ node.label }}</span>
+    </template>
+  </el-tree-v2>
+  <div style="width: 100%;border-top: 2px solid #1d1e21;overflow: auto;flex: 1;">
     <template v-if="updateKey !== 0 && Utils.checkNodeValid(currentNode)">
       <el-scrollbar>
         <CCNode :cc-node="currentNode" :update-key="updateKey"></CCNode>
@@ -55,7 +58,7 @@ const defaultProps = {
   children: 'children',
 };
 
-const treeViewHeight = (window.innerHeight - 120) / 2;
+const treeViewHeight = window.innerHeight * 0.4;
 const treeView = ref(null);
 
 onMounted(() => {
@@ -108,8 +111,7 @@ function setChildren(container: TreeNode[], children: any[], path: string[]) {
 }
 
 function refreshTree() {
-  // @ts-ignore
-  if (props.show && window.ccdevShow) {
+  if (props.show) {
     let value: TreeNode[] = [];
     //@ts-ignore
     setChildren(value, cc.director.getScene().children, []);

src/main.ts

@@ -3,4 +3,4 @@ import App from './App.vue';
 import 'element-plus/theme-chalk/dark/css-vars.css';
 import vfmPlugin from 'vue-final-modal'
 
-createApp(App).use(vfmPlugin).mount('#dev-app');
+createApp(App).use(vfmPlugin).mount('#app');

yarn.lock

@@ -502,15 +502,6 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-fs-extra@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
-  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^6.0.1"
-    universalify "^2.0.0"
-
 fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
@@ -528,11 +519,6 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-graceful-fs@^4.1.6, graceful-fs@^4.2.0:
-  version "4.2.10"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
-  integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
-
 has@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmmirror.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
@@ -576,15 +562,6 @@ jsonc-parser@^3.0.0:
   resolved "https://registry.npmmirror.com/jsonc-parser/-/jsonc-parser-3.1.0.tgz#73b8f0e5c940b83d03476bc2e51a20ef0932615d"
   integrity sha512-DRf0QjnNeCUds3xTjKlQQ3DpJD51GvDjJfnxUVWg6PZTo2otSm+slzNAxU/35hF8/oJIKoG9slq30JYOsF2azg==
 
-jsonfile@^6.0.1:
-  version "6.1.0"
-  resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
-  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
-  dependencies:
-    universalify "^2.0.0"
-  optionalDependencies:
-    graceful-fs "^4.1.6"
-
 local-pkg@^0.4.1, local-pkg@^0.4.2:
   version "0.4.2"
   resolved "https://registry.npmmirror.com/local-pkg/-/local-pkg-0.4.2.tgz#13107310b77e74a0e513147a131a2ba288176c2f"
@@ -810,11 +787,6 @@ unimport@^0.4.5:
     strip-literal "^0.4.0"
     unplugin "^0.7.2"
 
-universalify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/universalify/-/universalify-2.0.0.tgz#75a4984efedc4b08975c5aeb73f530d02df25717"
-  integrity sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==
-
 unplugin-auto-import@^0.9.3:
   version "0.9.3"
   resolved "https://registry.npmmirror.com/unplugin-auto-import/-/unplugin-auto-import-0.9.3.tgz#bdcfe8f40cf74eece7bad2b37ad319ae4e019b97"