How to debug Javascript in a Hype project?

Using JavaScript with Hype
1

I’m tearing my hair out trying to debug a Javascript function. What are people using as aids to debugging JS in Hype? I think I’m missing something as I can’t generate any debug info at all. I can’t even send anything to the console. I can’t believe that other Hype users write perfect JS first time.

Any helpful comments appreciated.

2

You should probably post an example; console logging works fine. Perhaps your function isn’t being called?
I previously used Firebug for my debugging, and now primarily use Chrome Dev tools.

3

Here is the body of the JS function that is causing problems. I know the function called all right because it displays the initial image loaded into img.src around line 18. The function is intended to display a sequence of 200 images at 10 frames per sec while there is mousedown over the element RightArrow of LeftArrow, and then stop when there is a mouseup event. This might look like a strange thing to do, but it’s a proof of principle version of a more complex task that I am working towards. I’ve got a similar function working that does a free run of the images (no mouse interaction).
It’s the lack of debug info that bothers me. I’m clearly doing something wrong. I thought that the console.log() statement around line 22 would display in Firefox’s Web Console, but nothing appears, even though the image is loaded and displayed in the line above.

Help …

var picture_frame = document.getElementById("picture_frame3");
var img = document.createElement("IMG");  // creates HTML <IMG> tag on the fly
picture_frame.appendChild(img);  // makes this image a child of element picture_frame

var RightArrow = document.getElementById("R_arrow3");
var LeftArrow = document.getElementById("L_arrow3");

img.width = "454";  // images dimensions
img.height = "468"; //
var fotoIndex = "001";
var counter = 50;
var dirn = +1;
var nrImages = 200;
var driveL = 1; // used as return value in setInterval function
var driveR = 1; // used as return value in setInterval function

img.src = "${resourcesFolderName}/P-RL_050.jpg";  // display 50th frame

function displayNextFrame()  {
	counter = counter + dirn;
	if (counter > nrImages) counter = nrImages;
	if (counter < 1) counter = 1;
	fotoIndex = ("000" + counter.toString()).slice(-3);
	img.src = "${resourcesFolderName}/P-RL_" + fotoIndex + ".JPG";  
}

RightArrow.addEventListener("mouseDown", function () {
	dirn = +1;
	console.log(dirn);
	driveR = setInterval(displayNextFrame, 100); // start and run 10 fps until mouseup
});

RightArrow.addEventListener("mouseUp", clearInterval(driveR)); // stop rt drive

LeftArrow.addEventListener("mouseDown", function () {
	dirn = -1;
	driveL = setInterval(displayNextFrame, 100); // start and run drive 10 fps until mouseup
});

LeftArrow.addEventListener("mouseUp", clearInterval(driveL)); // stop left drive
4

UPDATE …

I’ve now got basic console logging working in FireBug and it now does display the “Initial image displayed” message, so that was my fault.

Also, I’ve realised that the event mousedown does not have an upper case D, nor does mouseUp have an upper case U. So it’s sort of working now! Although not quite as I expected. I had hoped that the displayNextFrame sequence would start when the mouse went down and stop when the mouse came up. The starting and running bit is fine, but the stopping is unreliable. Still, at least I’ve got something to work with now.

I hope I haven’t wasted anyone’s time.

Thanks.

1 Like