MENU


Debugging with Console

The Console panel can be brought up on most browsers by pressing the F12 key.
RESETRUNFULL
<!DOCTYPE html><html>
    <head></head><body>
    <script>
        var a = 5;        // clearing console screen
        console.clear();        // prints message if assertion false
        console.assert({a:a}=={a}
              ,"Shorthand Object Literal Not Equivalent: ",{a});                // counter
        console.count();  // default: 1
        console.count("x"); // x:1
        console.countReset();
        console.count(); // default: 1
        console.count("x");  // x:2         // identical logging functions: objects or string substitutionss
        console.log({a},{a:7},{a}.a);  // {a:5} {a:7} 5
        console.log("value: %d %i", a, a+1);  // int, int
        console.info("%i",{a}.a,{a})  // 5
  {a:5}
        console.dir(location);
        console.dirxml(location);        // logging levels
        console.debug("value: %o", {a});  // object
        console.warn("value: %c %f", "color:green", 1/a);                                                                       // css, float
        console.error("value: %s", "five");  // string        // hierarchical grouping
        console.group("l1");
        console.log(100);
        console.groupCollapsed("l2");
        console.log(200);
        console.groupEnd("l2");
        console.log(300);
        console.groupEnd("l1");       // performance measuring: (find the performance tool)
        console.profile("myProfile");
        console.time("myTimer");
        alert(1);
        console.timeLog("myTimer");
        console.timeEnd("myTimer");
        console.profileEnd("myProfile");        // tabular printing
        console.table([[10,20,30],
                             [100,200,300],
                             [1000,2000,3000]]);
        console.table([{a:10,b:20},{a:100,c:300}]);        // stack trace
        function foo() {
            function bar() {
                console.trace();
            }
            bar();
        }
        foo();
    </script></body></html>
To clearly display the values of variables along with their associated names, contain the list of parameters in {} in console.log(). Remember that {v} is a shorthand notation for {v:v}.
RESETRUNFULL
<!DOCTYPE html><html><head><meta charset='utf-8'/></head><body><script>
    var height = 168;
    var weight = 65;
    var age = 38;
    console.log(height,weight,age);    // 168 65 38
    console.log({height, weight, age});    // {height: 168, weight: 65, age: 38}</script></body></html>