When you are debugging your JavaScript and jQuery code, you often wonder if the script is really getting to the function or is retrieving the correct value for a variable. You may find yourself sticking an alert(); in as follows:

alert("Hello, I got to here");

The alert(); in your code at specific locations allows you to see if a specific function is being called or if the code is progressing past a certain point. You may also may want to see if the variable is receiving the right information with something like this:

alert("callInfoBox: " + callInfoBox);

This will alert you with the value for that variable. This method is acceptable in some cases, but it is not really the best approach. 

For one thing, the alert(); will stop the code running, dead in its tracks, until you close the dialog box. Maybe you want to do this to go slowly, step by step, but this is not really representative of how the code is progressing. It also can be really annoying to have all those alerts to tidy up later down the line for production.

 

Use console.log(); to test the script's progression

console log

You can replace the alert(); calls with console.log(); and place the exact information inside the parenthesis. To see the console, click on F12 (in most browsers) on your keyboard. Select the Console tab.

The console.log(); function will send the information to the log shown in this tab, and still allow the script to run naturally. You can even leave these in the script, as they don't affect how it runs.

Here is an example:

$(".changeStyle").click(function(){
    $("#numRounds span").html("0");
    console.log("Here!");
    $("#matches").html("MATCH!");
    var turnCount = 0;
    var allFlag = true;
    $(".changeStyle").removeClass("active");
    $(this).addClass("active");
    cardStyle = $(this).attr("id");
    console.log("cardStyle: " + cardStyle);
    cardURL = "data/match-cards-" + cardStyle + ".html";
    stopElapsedTime();
    getCards();
    $("#pickStyle").css("overflow","hidden");
});