Syntax Error....just that little bit extra

Using JavaScript with Hype
1

So until now I have had almost nothing to complain about in Hype. Feature requests, yes, but not complaints.

Getting advice that I have a syntax error in my Javascript should tell me exactly where it is: line and column. This seems like very basic functionality to me and indeed very frustrating that it’s half way there.
:rage:

2

I usually use the browser for this.

In Safari... Preferences > Advanced > Show Develop menu in menu bar

There's also a debug mode that can be enabled with Terminal...

defaults write com.apple.Safari IncludeInternalDebugMenu 1

There's also the developer version of Firefox...

Although, that seems similar to the regular Firefox – but with a cool blue icon.

Anyway, in Safari, I right-click to "Inspect element" and that brings up a lot of tools. If there's an error, an icon appears. Clicking that icon usually reveals a detailed explanation about the problem...

Screen Shot 2015-08-10 at 7.08.01 AM.png721×252 24.5 KB

I covered part of this very early in the Hype Book. I thought I might be hitting the reader too early with some advanced techniques. Now I'm glad that I did it. It might save people from frustration.

1 Like
3

I think the problem is because your JS is run within the Hype JS, the error almost always refers to the hype JS, therefore you do not get a line number or clickable code reference to the real line in your code that you have the syntax error. You have to go through where you suspect it is in any recent changes you have made.

So for example. If I put an extra “.” in one of my calls in a functions,

locationForm..focus();

I will get an error.

[Log]

Error (index_hype_generated_script.js, line 5)
column: 13497
line: 5
message: "Unexpected token '.'. Expected a property name after '.'."
sourceURL: "http://127.0.0.1:57652/preview/A9C2C447-C4E3-4FCF-910C-91CA75282696-53075-0002C863BDC1E0D7/index.hyperesources/index_hype_generated_script.js?81369"
stack: "eval@[native code]↵k@http://127.0.0.1:57652/preview/A9C2C447-C4E3-4FCF-910C-91CA75282696-53075-0002C863BDC1E0D7/index.hyperesources/index_hype_generated_script.js?81369:5:13497↵http://127.0.0.1:57652/preview/A9C2C447-C4E3-4FCF-910C-91CA75282696-53075-0002C863BDC1E0D7/index.hyperesources/HYPE-466.thin.min.js:101:368↵global code@http://127.0.0.1:57652/preview/A9C2C447-C4E3-4FCF-910C-91CA75282696-53075-0002C863BDC1E0D7/index.hyperesources/HYPE-466.thin.min.js:101:373"
__proto__: Error

Clicking on the link should take me to the line of code with the issue. But it takes me to a line in the hype_generated_script.js.

Now this is an easy one to find. in you code. While in the console and after clicking the code reference link. use command -F and search for “…” this will take you to the code with the extra “.”

It is not perfect but will show you in which function and where the problem is.

But that is an easy one. If you had an extra “}” or something missing then you have to start looking at you code bit by bit.

2 Likes
4

We’re aware this is a problem when developing JavaScript within Hype documents. Early in the Hype days (v1.0) we would simply embed scripts in the page and call back to them. Unfortunately this meant an error in a script would halt all Hype animations generally leading to a blank page (as many were on initial scene load). We decided to protect against this by better wrapping function in try blocks, but the outcome is that there’s not automatically the same debug/backtrace info.

I’d like to improve this in the future by seeing if there are better ways to report errors or allow a debug mode that doesn’t do the try block wrapping.

2 Likes