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.
2,
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.
.