Previewing project in Zappar for Mac throws error in dev-tools

Hi there,

I’m rather new to Zap Works studio and I’m trying to set up a project. Thankfully it’s fairly easy to use.

My project has some bugs though, so I’d like to debug it using Zappar for Mac. The project itselfs runs great on my phone-app without any issues.

The problem
When launching Zappar for Mac and click the debug icon (wheel) the console pops up, already showing 2 errors:

snapshot

Zappar for Mac tries to unlock a Zappar code directly when opening Zappar for Mac even if I’m covering my webcam with my hand. Holding the trained image in front of the webcam while opening Zappar for Mac doesn’t do the trick either. Probably because of the error.

I’m using the following hardware:

  • MacBook Pro 2017
  • ZapWorks 4.04
  • LG 5K Ultrafine monitor with it’s build-in webcam (Mac’s native webcam also tested; same result)

Problem with exported functions?
I’m using exported-functions to have a functions-script with all my functions in it, which I can call from various scripts all over the project. Maybe that’s a problem? I’m currently doing it like this:

functions-script:

export function videoIsEnded() { videoEnded = 1; }

movie_seen:

videoplayer.on("video:finish", ()=> { functions.videoIsEnded(); })

Hopefully someone can help me. Thanks in advance!

1 Like

Hi there,

The first error message is an internal deprecation warning which won’t affect your experience.

In regards to the second error, this is something I’d need to have a look at in your project.

Could you send your project’s zpp file through to support@zappar.com please?

I’ll have a look at it and respond to you through that channel.

Thanks,
Seb

1 Like

Thanks again Seb.

The project is on it’s way via e-mail!

1 Like

Hi all,

I’m posting my reply to Ferdy, as other users may find it useful:

I’ve had a closer look at your project and can’t seem to replicate the same error in the console, I’m only receiving the deprecation error mentioned in the forum.

image

This could be caused by the fact that AR experiences created in Studio aren’t designed to be viewed on desktop operating systems, which can throw some runtime errors, but may not necessarily prevent your experience from running as intended.

This seems to be the case with your experience, as I was able to preview it on a few devices with no issues.

Unless the error explicitly prevents your experience from executing correctly and/or references a variable, method etc. specific to your project I think you should be able to safely ignore these.

Secondly, the ‘Launch in Zappar for Mac/Windows’ option will automatically load the experience previewed, which is why blocking the webcam doesn’t prevent the experience from loading.

If you’d like to debug a different experience you’ll have to open it through Studio first, before previewing it and launching the debugger.

If anyone has any questions feel free to post on this thread or get in touch at support@zappar.com.

Thanks,
Seb

1 Like

Thanks again for your time Sebastian.

I think it’s a hardware thing. The latter error in my screenshot is causing the whole experience not to function at all on my computer. The JavaScript simply stops executing after the last error, not executing any script in my experience. It works superb on my Android and iPhone/

Since you don’t get the same error, it must have something to do with my hardware.

Is there a way to debug the experience on a mobile phone? That would be a great feature.

1 Like

Hey Ferdy,

If you’re on an Android device, you can use Google Chrome’s Inspect feature to inspect and debug live content on your device from your development machine.

You can find steps on how to set this up at the link below:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Unfortunately, as far as I’m aware, iOS/Apple devices don’t provide a similar feature.

Hope this helps, all the best.
Seb

1 Like

Hi Seb,

Thanks again for your answer.

I know this is possible when debugging Chrome on an Android-device.

So I’m thinking…this let’s me inspect anything that has something to do with Chrome-browser right? The Zappar-app in that case is a hybrid app (which is using a browser in an app-skin)?

1 Like

Hi Ferdy,

Hope you’ve been well.

Not quite, the Chome Inspect feature simply lets you debug live content from your Android device on your dev machine, through Chrome.

This isn’t necessarily limited to Chrome browser-related content, as you can also debug apps (such as the Zappar app).

Hope this helps.

All the best,
Seb

1 Like

Hi Seb,

Thanks! That’s a great feature of Android. I didn’t know that was available to every app that was installed on the device.

All the best,
Ferdy

1 Like

Hi @Seb,

Is there a way to debug the app on iPhone too? I’m on a Mac. Safari doesn’t seem to recognize the Zappar app, ofcourse Chrome doesn’t recognize it either by default.

Thanks in advance!

Ferdy

1 Like

Hi Ferdy,

It’s great that Android expose these developer tools, but unfortunately there is no way to debug an iOS device in the same way (chrome developer tools).

There is an alternative way of debugging without using a browser or desktop app, which we sometimes use. This is done by adding whatever you believe is throwing errors into a try/catch statement. This will catch the error and using a text node, it can be printed to the screen within the app itself.

For example -

try {
	throw new Error("this throws an error");
} catch (e) {
	textnode.text(e); //this puts the error on screen instead of crashing the app
}

Hope this helps.
George

1 Like

Hi George,

Thanks for your reply. Too bad this isn’t possible on an iPhone.

In the meanwhile I’ve came up with (almost) the same solution, but without the try/catch, because I didn’t get any error. I just wanted to find out why parts of my code didn’t fire.

@George Suggestion to Zappar: Maybe it is possible to catch the console.logs and display it on a developers-tab/overlay in the Zappar-app on the iPhone (or even Android). This tab can only be accessible when previewing an experience. That way you can quickly debug on iPhone/ Android.

How I did it (just to help others out):
I’ve added a (temporary) text-node ‘debugtext’ to the experience, which I use to debug. Make sure it can display multiple lines of code.

// Note: there should be a Text-node 'debugtext' in the hierarchy 
// which displays the message
export function updateDebugText(text) {
    let oldDebugtext = symbol.nodes.debugtext.text();
    symbol.nodes.debugtext.text(oldDebugtext + '\n' + text);
}

Just call updateDebugText like so:

updateDebugText('This is the text I want to show up in the debugtext node');

Run the experience and everytime the updateDebugText is called the text-node wil be updated.

2 Likes