In addition to the most commonly used console.log(), the Console object of the Web API interface provides some handy methods.

  1. console.assert(assertion, obj)

Set the assertion to output obj to the console when its value is false.

let str = "assertion is falsy"
console.assert({}==={}, str); // VM378:2 Assertion failed: assertion is falsy
Copy the code
  1. console.dir(obj)

Displays the properties of the specified JavaScript object in the console, which can be used to view the scope chain properties of the function object [[scope]].

let a = 1;
function foo() {
    console.dir(foo);
    function bar() {
        console.dir(bar);    
        function baz(){
            console.dir(baz);
        }; 
        baz();
    }
    bar();
}

foo();
Copy the code

Console.dir () prints in sequence:

foo()
    arguments: null
    caller: null
    length: 0
    name: "foo". [[Scopes]]: Scopes[2] 0: Script {a: 1} 1: Global {window: Window, self: Window, document: document, name:"", location: the location,... } bar() arguments: nullcaller: null
    length: 0
    name: "bar". [Scopes]]: Scopes[3] 0: Closure (foo) {bar: ƒ} 1: Script {a: 1} 2: Global {window: window, self: window, document: document, name:"", location: the location,... } baz() arguments: nullcaller: null
    length: 0
    name: "baz"Prototype: {constructor: ƒ}... [[Scopes]]: Scopes[4] 0: Closure (bar) {baz: ƒ} 1: Closure (foo) {bar: ƒ} 2: Script {a: 1} 3: Global {window: Window, self: Window, document: document, name:"", location: the location,... }Copy the code

You can clearly examine the scope chain of the current function and the dependencies of the closure variables within it (if any).

  1. console.trace()

Can be called within a function to display the stack on which the current function is located.

function foo() {
    function bar() {
        /* console.trace bar @ VM87:3 foo @ VM87:6 (anonymous) @ VM87:9 */
        console.trace();    
        function baz(){}; 
        baz();
    }
    bar();
}
foo();
Copy the code