Debugging JavaScript In The Trenches

This is a sample I plan on using during my JS debugging talk at YEGrb. author(s): Mark Bennett

HTML

<script src="https://plus.google.com/104431949275766772757/posts/N1qwzwuAZd1"></script>
<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>

<p>You can also find this in it's own <a href="http://jsfiddle.net/MarkBennett/YpQKS/">fiddle</a>.</p>

<p><em>Edited in c9</em></p>

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) {
            console.log("AJAX SUCCESS! " + status + ": " + data.message);
            $("#ajax_target").text(data.message);
        },
        dataType: 'json'
    });

    // I handle an exception without you ever knowing!
    function exceptional() {
        try {
            throw "Bad mojo!";
        } catch (e) {
            // I don't care about no stinkin' exception!
            console.log("he he he...");
        }
    }
    exceptional();
    
    // 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")
});