CocosCreator + Chrome 实用插件介绍

最新推荐文章于 2024-08-10 07:45:55 发布
最新推荐文章于 2024-08-10 07:45:55 发布
阅读量5.4k 收藏 11
点赞数 1
分类专栏： CocosCreator 文章标签： Cocos CocosCreator 调试 插件 Spector
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzx023/article/details/100014414
版权
本文介绍了CocosCreator结合Chrome的两款实用插件——Spector.js和Cocos Creator Devtool，用于提升WebGL项目的调试效率。Spector.js能详细展示WebGL每帧信息，帮助优化DrawCall；Cocos Creator Devtool则允许在运行时查看和修改节点属性，助力UI调试。
摘要由CSDN通过智能技术生成

Spector.js

在这里插入图片描述

下载地址(需要梯子)

Spector.js 是针对WebGL的一个调试工具，它可以帮助我们了解context当中到底发生了什么事情，每一帧的信息都会显示出来，包括每一个drawcall绘制的纹理到底是哪些，我们都可以很直观的了解到

例如我们新建一个Cocos Creator 2.1.2的HelloWorld工程

在Chrome当中预览，我们可以看到：
在这里插入图片描述

这时我们可以点击Chrome右上方Spector的小图标，开启Spector
在这里插入图片描述

开启后图标会变为绿色：
在这里插入图片描述

这是点击这个图标，弹出这个界面：

最低0.47元/天 解锁文章
BigBear023
关注
专栏目录
Cocos Creator Inspector 插件（chrome插件）
MyCodecOdecoDecodE的博客
08-28 5380
Cocos Creator Inspector 插件（chrome插件） PS：本项目基于此项目的基础上进行开发，更新。 Github 地址: https://github.com/bilibiliChangKai/CocosCreatorInspector 插件说明 该插件可以帮助cocos游戏开发者动态的查看节点属性和脚本属性，并且进行修改。帮助程序员加快开发速度和de...
CocosCreator Chrome插件
08-22
Chrome扩展工具：Spector.js，Cocos Creator Debugger，Cocos Creator Devtool，WebGL Insight
Spector.js 使用教程
最新发布
gitblog_00651的博客
08-10 461
Spector.js 使用教程 Spector.jsExplore and Troubleshoot your WebGL scenes with ease.项目地址:https://gitcode.com/gh_mirrors/sp/Spector.js 项目介绍 Spector.js 是一个面向 WebGL 开发者的调试工具，旨在帮助开发者探索和排查 WebGL 场景中的问题。它能够捕获帧中...
一个节点树预览调试 chrome 插件，完美支持 Cocos Creator 所有版本！
Cocos的博客
11-16 727
神器进化归来！「插件小王子」xu_yanfeng发布了节点树预览调试 chrome 插件CC_Inspectorv2.0.0，完美支持所有版本的 Cocos Creator，方便开发者在 chrome 浏览器中调试运行的 Creator 游戏。CC_Inspector资源链接点击文末【阅读原文】跳转插件地址https://store.cocos.com/app/detail/2002使用说明...
cocos creator 调试插件
Bruce
06-24 303
适用 Cocos Creator 3.4+ 版本，cocos creator 使用google浏览器调试时，我们可以把事实运行的节点以节点树的形式显示在浏览器上，支持运行时动态调整位置等、、、将下载的preview-template插件解压后放在工程根目录下，然后重新运行就可以了。
Chrome 扩展 H5 游戏结构检查器 GameInspect 支持 Laya, egret, cocosCreate, cocos2d-js
cyj
11-26 1446
GameInspect H5 游戏列表查看 Chrome扩展， Chrome插件,egret Inspect，Laya Inspect, Cocos Create Inspect, Laya Tree, 查看游戏，游戏树结构，H5游戏，类似egret Inspect,最新Inspect,
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 节点树 检查节点的基本属性
Cocos Creator Debugger-crx插件
04-02
由于标签中提到“扩展程序”，这表明Cocos Creator Debugger可能适用于Chrome浏览器或者基于Chromium内核的其他浏览器。使用时，确保浏览器版本与插件兼容，并遵循相关的安全和隐私设置。 总的来说，Cocos Creator ...
Cocos Creator Devtool-crx插件
03-09
Chrome和DevTools扩展程序，用于调试Cocos Creator游戏 您可以检查游戏内部节点的结构，并使用此扩展名修改节点的某些属性。 支持语言:English
运行时查看节点树，一款专为 Creator 定制的 Chrome 插件
Cocos的博客
01-24 475
为 Cocos Store 操碎了心的插件小王子许彦峰同学又出新插件啦！截止当前，他共向扩展商店提交了腾讯 Bugly 插件小助手、位图字体生成工具、热更新 manifest 插件、front 瘦身字体、4399 原创平台 SDK 等近十款插件。C姐谨代表 Cocos 官方授予他 「Cocos 年度插件之王」的称号！（此处应有掌声和鲜花）最近他又向 Cocos Store 提交了一款 CC_Ins...
Spector.js-crx插件
03-09
轻松地探索和解决您的WebGL场景。 Spector是一种工具，旨在使WebGl开发人员愿意了解其上下文会发生什么。 它使您能够捕获帧中的所有可用信息。 您将有权查看整个命令列表及其相关的视觉状态和上下文信息。 您将能够轻松地浏览WebGL和WebGL2场景并对其进行故障排除。 这与任何支持WebGL的浏览器以及所有基于Web的3d引擎以及原始脚本兼容。 支持语言:English
chrome插件 Spector.js
03-25
用来调试webgl
Spector.js：轻松浏览WebGL场景并对其进行故障排除
01-28
概要 轻松浏览WebGL场景并对其进行故障排除（所有引擎和Vanilla脚本支持）。 Spector是针对希望了解其上下文的WebGl开发人员的工具。 它可以捕获帧中所有可用的信息。 您将能够查看整个命令列表及其相关的可视状态和上下文信息。 它既可以用作浏览器扩展程序，也可以直接在带有独立版本的页面中使用。 表中的内容 为什么 作为BabylonJS团队的核心成员，我经常发现需要调试webgl上下文所发生的事情。 在我们在巴比伦推出WebGl2之前，我一直是Webgl检查器的忠实拥护者。 由于整个WebGL社区是我们关注的重点，所以我认为最好与所有可用的Webgl / Webgl2引擎共享兼容的扩展。 您可以轻松地在自己的应用程序内部使用该库，因为该库已被转换为UMD模块。 它既可以用作脚本参考，也可以与您喜欢的捆绑工具（如webpack）一起使用。 浏览器扩展 如果您愿意使用浏览器扩展，则可以从商店直接安装它： 您可以在“找到有关的完整教程。 另外，您可以参考以了解如何使用它。 或者，您可以查看以下文档以从源代码加载它： 。 用作模块 为了将库安装在您的应用程序目录中，请在
Cocos Creator 的 Chrome 控制台调试高阶指南！功能与使用方法详解
Cocos的博客
02-22 689
Chrome 控制台是很多开发者的必备工具之一，但你真的掌握了它的精髓吗？是否还是全靠 console.log() 排查问题？其实，控制台的功能远比这更强大，用好控制台，能帮助我们更加准确高效地发现问题、定位问题，让 bug 无所遁形。今天就同大家分享一下我自己常用的Chrome 控制台调试功能及使用方法，希望能帮助大家的 Cocos Creator 项目在 Chrome 控制台更好地进行调试。...
cocos creator 使用chrome调试与调优
时丶光
03-27 4362
chrome调试 web : f12 -> source->左侧三个点->open file-> 搜索你要调试的文件下断点即可 android/win : 搜索日志 chrome-devtools 内容如下: [ chrome-devtools://devtools/bundled/inspector.html?v8only=true&ws=0....
一款免费开源又好用的 Cocos Creator 网页调试工具，效率起飞！
Cocos的博客
09-27 1263
引言：开源网页调试工具ccc-devtools 自发布后颇受开发者好评，本次，这款插件的作者Next将和大家分享该工具的功能、使用方法以及开发历程。下载地址见文末。ccc-devtools 是一款开箱即用的 Cocos Creator 3.x 网页端预览的调试工具，支持实时显示场景的节点树，并对节点属性进行同步更改。启用与功能工具代码开源，你可以在文末的地址下载打包好的 preview-te...
使用chrome测试cocos creator内存泄漏问题
GJQI12的专栏
12-10 2240
优化cocos creator的步骤: 1.首先使用webgl inspector插件查看游戏中是否存在不用的没有释放的资源 ２.使用chrome的performance录制游戏过程，分析cpu的消耗及js的堆中内存情况，是不是js堆一直在变大，是否有内存泄漏 ３.根据第二步，找到内存变大的部位，使用chrome的Ｍemory进行内存快照，对比两次快照中对象的差异. js具有自动垃圾回收功...
如何基于SSH隧道+chrome插件SwitchyOmega访问内网机器
07-12
要基于SSH隧道和Chrome插件SwitchyOmega访问内网机器，你可以按照以下步骤进行设置： 1. 在你的内网机器上启动SSH服务器，并确保已经正确配置了SSH登录和端口转发。 2. 在本地计算机上安装SSH客户端，比如OpenSSH（Windows上可以使用PuTTY）。 3. 使用SSH客户端创建一个SSH隧道，将本地计算机的某个端口与内网机器的某个端口进行绑定。例如，如果你希望访问内网机器的SSH服务（默认端口22），可以执行以下命令： ``` ssh -L 8888:localhost:22 username@内网机器IP ``` 这将在本地计算机的8888端口上创建一个SSH隧道，将流量转发到内网机器的SSH服务。 4. 安装Chrome浏览器插件SwitchyOmega，它可以帮助你设置指定规则的代理服务器。 5. 打开SwitchyOmega插件的选项页面，并创建一个新的情景模式（Profile），将代理服务器设置为本地计算机上创建的SSH隧道，即将代理服务器配置为`127.0.0.1:8888`。 6. 在SwitchyOmega中设置规则，将需要通过SSH隧道访问的内网网址或域名配置为使用刚刚创建的情景模式。 7. 确保SwitchyOmega插件已经启用，并且选择了刚刚创建的情景模式。 现在，当你访问被配置为使用SSH隧道的内网网址或域名时，Chrome浏览器将通过SSH隧道连接到内网机器，实现访问内网机器的功能。 请注意，这只是一种基于SSH隧道和SwitchyOmega插件的方法，你也可以尝试其他工具和方法来实现类似的目的。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值