Debugging JavaScript In The Trenches

This is a sample I plan on using during my JS debugging talk at YEGrb.

by MarkBennett

HTML

<h1>Debugging JavaScript In The Trenches</h1>

<div id="bulls_eye">Good shooting!</div>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<div id="ajax_target">
</div>

JavaScript

$(function() {
    var list = ["One","Two","Three"],
        new_list = $("li").map(function() { return $(this).text(); }),
        my_div = window.document.getElementById("bulls_eye");
    
    $.ajax({
        url: "/gh/gist/response.json/1629116/",
        success: function(data, status, jqXHR) {
            debugger;
            console.log("AJAX SUCCESS! " + status + ": " + data.message);
            $("#ajax_target").text(data.message);
        },
        dataType: 'json'
    });
    
    // TAKE THIS OUT IN PRODUCTION
    debugger;
    
    // Things to try
    //
    // console.log(list)
    // console.log(new_list)
    //
    // console.dir(list)
    // console.dir(new_list)
    //
    // Inspect an element in the developer tools then try, $0
    //
    // console.monitorEvents(my_div, "mouse")
});