cocoscreator 网页调试工具（类似白鹭Inspector）

最新推荐文章于 2025-02-01 21:33:09 发布
原创 最新推荐文章于 2025-02-01 21:33:09 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#cocos-creator

本文介绍了如何配置和使用Cocos Creator的网页调试工具ccc-devtools，包括复制文件到指定目录，修改配置文件，替换资源路径，以及在Cocos Creator v2.2及以后版本中启用自定义预览功能的步骤。
部署运行你感兴趣的模型镜像

1，进入编辑器目录，然后进入进入static\preview-templates

 2，将ccc-devtools文件夹复制到上面的目录下

 

3，打开 index.jade，找到 body 将中间部分替换为 include ./ccc-devtools/index.html，注意用tab键对齐

Cocos Creator 从 v2.2 开始新增了自定义网页预览功能。

  1. 重复上面的操作步骤，将修改后的 preview-templates 目录拷贝到项目根目录

  2. 将 ccc-devtools/index.html 里所有引用的资源路径 app/editor/static/preview-templates/ccc-devtools/... 替换为 ccc-devtools/...

  3. 重启 Cocos Creator

转自：【运行时显示节点树插件】ccc-devtools悄悄更新 - Creator - Cocos中文社区

 

您可能感兴趣的与本文相关的镜像

ComfyUI

ComfyUI

AI应用
ComfyUI

ComfyUI是一款易于上手的工作流设计工具，具有以下特点：基于工作流节点设计，可视化工作流搭建，快速切换工作流，对显存占用小，速度快，支持多种插件，如ADetailer、Controlnet和AnimateDIFF等

Cocos Creator引擎开发：动作效果与角色动画_CocosCreator基础概览
chenlz2007的博客
11-06 1023
自定义组件可以通过编写 JavaScript 或 TypeScript 脚本来实现。start() {// 在组件启动时执行的代码// 每帧执行的代码@ccclass：定义一个组件类。@property：定义组件的属性，可以在编辑器中进行可视化配置。start：组件启动时执行的方法。update：每帧执行的方法。Cocos Creator 是一款功能强大且易于使用的游戏引擎，适用于 2D 和 3D 游戏开发。
Cocos Creator Devtool-crx插件
04-02
语言:English Chrome和DevTools扩展程序，用于调试Cocos Creator游戏 您可以检查游戏内部节点的结构，并使用此扩展名修改节点的某些属性。
CocosCreatorInspector：提升Cocos Creator开发效率的神器
gitblog_00011的博客
04-23 876
CocosCreatorInspector：提升Cocos Creator开发效率的神器 是一个针对Cocos Creator游戏开发框架的扩展工具，它旨在提供更直观、便捷的调试和编辑功能，帮助开发者在项目开发过程中提高生产力。 项目简介 CocosCreatorInspector 是一个开源项目，由B站的 ChangKai 开发并维护。它通过增强Cocos Creator的内置Inspector...
cocos creator 在网页中调试的时候直接代码调试方法
qq_38147639的博客
10-20 385
cocos creator 在网页中调试的时候直接代码调试方法。
Cocos Creator Inspector 插件（chrome插件）
MyCodecOdecoDecodE的博客
08-28 5825
Cocos Creator Inspector 插件（chrome插件） PS：本项目基于此项目的基础上进行开发，更新。 Github 地址: https://github.com/bilibiliChangKai/CocosCreatorInspector 插件说明 该插件可以帮助cocos游戏开发者动态的查看节点属性和脚本属性，并且进行修改。帮助程序员加快开发速度和de...
ccc-devtools
08-22
看cocos节点树的
CocosCreator | 自定义启动页之H5
Valiancer
06-21 5631
01 效果对比 默认启动页： 自定义启动页： 02 启动页存在的意义 我们在 creator 中的开发的游戏都是基于 cocos engine，所以在展示我们的游戏之前，是必须要先加载 cocos engine，然后才是我们自己的业务代码 流程图如下： 而构建完成后未精简的 cocos engine 代码为 1.9M 如果再加上物理相关代码的话，一共是2M 别忘了，我们自己的首场景也要加载过程哦 所以，从游戏启动，到真...
Cocos Creator 网页调试--＞工具
星期一的博客
10-28 1339
一、Cocos Creator 网页调试工具，运行时查看、修改节点树，实时更新节点属性，可视化缓存资源。 https://github.com/potato47/ccc-devtools
一款免费开源又好用的 Cocos Creator 网页调试工具，效率起飞！
Cocos的博客
09-27 1783
引言：开源网页调试工具ccc-devtools 自发布后颇受开发者好评，本次，这款插件的作者Next将和大家分享该工具的功能、使用方法以及开发历程。下载地址见文末。ccc-devtools 是一款开箱即用的 Cocos Creator 3.x 网页端预览的调试工具，支持实时显示场景的节点树，并对节点属性进行同步更改。启用与功能工具代码开源，你可以在文末的地址下载打包好的 preview-te...
cocos Creator 模拟器调试
对酒当歌﹏✍
05-05 2469
目录1、引言2、环境3、发现问题4、解决5、结束语 1、引言   由于是老项目，开发过程中一直未进行项目升级，拿到手一看已经至少是两年前的代码了！还使用的js开发，没有代码提示，没有断点，尝试了一下，非常痛苦！这里我们先来处理模拟器断点的问题。 2、环境 cocos creator v1.8.2 chrome 100.0.4896.60（正式版本） （64 位） vscode 3、发现问题   要模拟器打断点不妨我们先来看看官网API这里有winows调试。 只需要这样操作就好了：   运行模拟器
Cocos Creator 原生调试—Android篇
奎特尔星球
09-06 5950
《CocosCreator原生调试—iOS篇》姊妹篇来了，今天分享的是在 Android 手机上调试Cocos Creator应用 JS 代码，请看视频：在些整理一些关...
cocos-creator-devtool：:gear_selector:Chrome扩展程序，用于调试Cocos Creator游戏
01-30
Cocos Creator开发工具 Cocos Creator Devtool是Google Chrome Devtools的扩展。 它允许您检查网页中的Cocos Creator游戏场景。 您可以从Chrome Webstore安装 。 变更日志 1.0.6 自动更新节点属性 添加/删除节点时自动更新节点树 在属性部分之后移动组件 显示组件属性详细信息（只读） 1.0.5 游戏显示后尝试加载节点树60次 添加重新加载扩展按钮以强制重新加载 1.0.4 修复eulerAngles显示/更新错误 添加Compile按钮以使用window.fetch触发'/ update-db' 1.0.3 切换FPS节点 检查组件和节点时设置全局变量$c/$n 自动扩展节点树 1.0.2 用于检查节点上的组件的按钮 使用“ +/-”按钮更改节点属性 自动刷新页面刷新和场景加载中的树 现在，您可以在控制台中使用$n0 ， $n1来选择节点，就像在普通网页上的Chrome devtool中使用$0和$1一样 1.0.1 节点树 检查节点的基本属性
CocosCreatorPlugins:cocos creator 热更新插件,bugly插件,cc-Inspector插件,excel转换插件,贝塞尔曲线插件
05-04
项目简介 目前包含的免费插件有: 克隆慢？ 2款收费插件,有需求的支持下呗 字体App.svelte 购买链接: 帮助文档: BMFont位图字体生成工具 购买链接: 帮助文档: 插件常见问题 如何安装从其他地方获取的插件 首先你需要确认插件源码是否包含以下最基本的2个文件 package.json main.js 将下载的插件文件存放在这样的一个目录: 项目目录/packages/插件名字/ 如果插件代码没有问题的话,重启creator即可正确加载该插件 如何修改插件快捷键 每个插件的源代码都放在项目的packages目录下 "accelerator": "CmdOrCtrl+Shift+m" 如果在插件源码的package.json中定义了accelerator字段,那么插件的快捷键就会生效,如果设置的快捷键和系统快捷键有冲突,那么可以自行修改 如何手动安装插件 点击查看
精选资源
cc-inspector-template::gear:CocosCreator的Property Inspector扩展模板
05-18
Cocos Creator的Property ...cd ~ /.CocosCreator/packages # or project packages directory cd < project> /packages # init project vue init lingobus/cc-inspector-template < inspector> 正式扩展检查员文档
【免费下载】 Cocos Creator 网页调试工具ccc-devtools
gitblog_00860的博客
12-27 673
ccc-devtools是一款为Cocos Creator网页端预览设计的调试工具，主要使用Vue3、ElementPlus、TypeScript和Vite等前端技术栈进行开发。 ## 核心功能 该工具的核心功能包括： - 实时显示并修改场景的节点树。 - 实时更新节点属性。 - 可视化显示缓存资源。 ccc-devtools还提供了几个独特的小功能，如输出节点、组件引用到控制台，标记UI节...
一位工具开发者的独立之路！CocosInspector
奎特尔星球
05-28 1009
前言Creator星球建群以来，接触了不少开发者，有的是上班族，利用业余间隙做个人开发，发展副业，徐图进取。也有人选择告别内卷，独立开发，另寻生机！今天我们要介绍一个开发者「川」就属于这个...
cocos creator 调试插件
Bruce
06-24 658
适用 Cocos Creator 3.4+ 版本，cocos creator 使用google浏览器调试时，我们可以把事实运行的节点以节点树的形式显示在浏览器上，支持运行时动态调整位置等、、、将下载的preview-template插件解压后放在工程根目录下，然后重新运行就可以了。
cocos creator inspector：chrome插件功能介绍，调试Cocos免费又好用的利器
最新发布
插件小王子(xu_yanfeng)的博客
02-01 1614
显示cocos游戏节点树、及其节点属性
【亲测免费】 Cocos Creator网页调试工具常见问题解决方案
gitblog_00958的博客
12-20 427
**项目简介：** `ccc-devtools` 是一款专门为 Cocos Creator 开发的网页调试工具。它能够帮助开发者实时查看和修改节点树，实时更新节点属性，以及可视化显示缓存资源。这个工具对于网页游戏的开发与调试非常有用。 **主要编程语言：** 该项目主要使用以下编程语言和框架开发： - Vue - TypeScript - EJS - JavaScript - HTML ## ...
Cocos Creator扩展模板：Property Inspector开发指南
资源摘要信息:"Cocos Creator的Property Inspector扩展模板提供了一个基础的框架，允许开发者对Cocos Creator的属性检查器(Property Inspector)进行自定义扩展。属性检查器是Cocos Creator编辑器中用来编辑场景中...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值