Anyway to enable the debug button that shows up in preview?

Cocos Creator
#1

You know the Gears icon that shows up in web preview where it allows you to look at the console logs, etc. Is there anyway to enable that button in a build? Developing a game for Facebook Instant Games and there is no way to look at the console log there :frowning:

#2

The gear icon shows up by detecting your user-agent, it’s intended to shows a dev-tools like emulation when you cannot access it on mobile devices.

You should be able to develop the game, on a desktop, using regular chrome dev tools and enabling emulation if you need a specific design resolution. Opening dev tools gives you access to the JS engine, console output, and debugging (pausing, code breaks) sources.

Is there something that stops you from developing using dev tools?

#3

Like you said, the dev-tools are useful when you’re debugging on a device like an iPhone where there are no other ways of looking at the console output. Even more so when your game runs inside the Facebook Messenger app instead of the Safari browser.

The gear icon shows up by detecting your user-agent

Would you be able to point to me where this is in cocos’ code?

#4

Looks like the tool is called “eruda”. There’s an option to enable it in the Build Settings.

You can find it being called in /build/main.js :

   var engineLoaded = function () {
                document.body.removeChild(cocos2d);
                cocos2d.removeEventListener('load', engineLoaded, false);
                window.eruda && eruda.init();
                boot();
            };

however on my tests it’s undefined so maybe it’s bugged

#5

Thanks. Looks like all I had to do was to include eruda.min.js in my index.html to get it. I suppose the one included in Cocos Preview gets stripped away when you build your project.

1 Like