Debugging - Easily find which function has an error

It often happens, We enter some code on one javascript function and move on to some other functions before we test any of the code or changes.

When we finally do test what we have set up , we discover that we have an error somewhere!!.

A lot of the time when you get an error, the information reported is lacking any thing for you to know where the error is and which function it is in.

This tip will show you one way of finding the function with the error and the line the error is on in that function.

Lets take the above error.

We are being told that on line 5 we have an error. But we are not told which function. This is ok if you have one or two functions but you can have much, much more and be totally clueless to which one may have the issue. The last thing you want to do is look through every function. In this project that I am using for this example it has about 22.

(update: the line 5 part of the error is not the real line of the error )

How to find the function in seconds.

Ok so we spot that we have an error in the console. As the above image shows.

1, We click on the error indicator (circled in red):

This will take us to a Debugger tab.

When the debugger loads, it will briefly highlight the line where it is reporting the error.

Here you can see that it has highlighted line 141.

2, We now click the code line number 141. ( shown in red)

Clicking the code line number will add a breakpoint. ( blue marker as shown here now on the number 141)


When a breakpoint is added to a line, the runtime will stop at that line of code when an error/exception occurs. This allows you to investigate things like the values of variables before and on the breakpoint line.

3, After setting a breakpoint. reload the page ( CMD + R

The page will reload and the debugger will show the code has stopped at the breakpoint.

Above the line you will see that the reporting line is within a for loop

 for (a = 0; a < b.length; a++)

This is the line we need.

The for loop is iterating over an array. That array just happens to be an array of your Hype functions.

Lets go over what happened so far.

An error has occurred and been reported. We have marked the reported line with a break point and reloaded the page. The break point stops at the error which is inside of a for loop. The for loop was in the middle of an iteration of your Hype functions.

This means that the iteration stopped while processing the function that threw the error/exception.

This is great because now we can look at which item in the array it stopped at.

4, Hover your mouse cursor over the current index number variable.
This is the ‘a’ shown in bold here.

for (a = 0; a < b.length; a++).

This will produce a quicklook popup of the value of 'a’

Here in my example it is 7.

We now know that the function in the array that has the error is item 7.

5, Now hover the mouse cursor over the array variable ‘b’ as shown here in bold.

for (a = 0; a < b.length; a++).

You will now get a new popup showing the array’s items all listed with their array index number. And there we can see what item 7 is.

This is the final bit of information we need.

We now know that the error is:

In line 5 array item 7 which is the element3start Hype Function we have our error.

6, We can now go back to the functions in Hype and check line 5 of the function element3start

Where we will see that there is a period (.) where there should be a space after the var

var.symbolInstance = hypeDocument.getSymbolInstanceById('333');

2 updates to this.

1, Originally Ihad thought that the initial error reports the line number that syntax error occurs on in the function . Line 5 in this example. That was my mistake and just a coincidence. It seems that it will always say line 5 for these types of errors.
If I figure a quick way to find the line I will update.


After step 3, you can show the Detail side bar ->Scope Chain, in the debugger which will also give you all the info you are after.

I hope this helps some of you when you run into errors like this.


nice explanation Mark!

1 Like

Thank You Mark - very helpful!

1 Like

helpful article
To read!

Thanks Mark!

1 Like

A couple of updates.

Where do I find the debugger and console tabs on Hype 3.6.6?

These are not part of Hype. They are part of the developer tools in your browser…

Is there any way Hype will tell me if my code has an error?

Not really.

Why are you not able to look using the Browser…

Are you using this in a iOS app.

If so and you are running it from Xcode with your device connected you can still use the browser on you Mac to see whats going on on the Device while the app is running on it…

Is this the case

This is all very helpful when the error is being thrown by a bug in your code. Sometimes though, there’s an error in the Hype code itself (HYPE-596.thin.min.js for example) and debugging simply takes me to a line that is completely opaque to me.

Here’s an example error I have thrown in a project that seems to function fine even with the error:

HYPE-596.thin.min.js:47 Uncaught TypeError: Cannot read property ‘cL’ of undefined
at Fg (HYPE-596.thin.min.js:47)
at $c (HYPE-596.thin.min.js:66)
at Zc (HYPE-596.thin.min.js:37)
at HYPE-596.thin.min.js:39

Inserting a breakpoint takes me to line 1601 which reads f[A](h)) and leaves me none the wiser.

Today this happened, and I think the issue is that I’m previewing a scene, rather than the whole project. If I preview the whole project, I don’t get the error. I can’t say whether this is always the cause ,but I have a feeling it isn’t because I only learned that I can preview specific scenes recently, and I think I’ve been seeing these kind of errors for longer than that. I may be wrong though.

There’s two basic possibilities:

  1. Invalid input was sent to a Hype API
  2. A bug in Hype’s runtime

It would probably be easiest if you just send the zip of the .hype document with instructions on how to reproduce to and we can take a look.

There is a method to get a non-minified version, but even then there’s some other optimizations in our build process that may make the code opaque to read.

Well, I would do if Gmail allowed me to email zip files, or even just plain hype files, but it doesn’t. So, I’ve attached an example here.

When previewing in Safari, I get the error
Error in undefined: TypeError: h is not a function. (In 'h(ga.API,a,c)', 'h' is undefined)

Widget runs fine though, as far as I’ve tested it. Is there something I’m doing which is causing issues here?

M3 T1 (51.6 KB)

This turns out to be a known issue in v3

The issue is if you have an Javascript action that has a selection of none then you will get this type of error.


Which is what I was pointing out above as likely the issue. Remove these


thanks for that Mark. I was able to locate the action missing the function and that did sort it.

When’s v4 due to be released?

workin’ on “asap” :slight_smile:.

1 Like