10 console commands to help debug the JavaScript code like a PRO

    image

    Translated the article by Amit Solanki on debugging JavaScript code using console commands. According to the author, these teams will help to significantly increase the programmer's productivity when searching for bugs and save a lot of time.

    Let's look at the commands that are really able to simplify the life of any programmer.

    We remind: for all readers of "Habr" - a discount of 10,000 rubles when recording for any Skillbox course on the promotional code "Habr".

    Skillbox recommends: Online course "Profession Frontend Developer" .

    Log grouping with console.group ('name') and console.groupEnd ('name')


    The console commands console.group ('name') and console.groupEnd ('name') provide the grouping of several separate logs into a single drop-down tree, which gives quick access to any of the logs. Moreover, these commands allow you to form nested trees for subsequent grouping.

    There are three methods here. The first, console.group ('name'), marks the beginning of the grouping, the second, console.groupEnd ('name'), marks the ending, and console.groupCollapsed () forms a group in the minimized tree mode.



    Trace console.trace ()


    If a programmer needs a full function call stack, then you should use the console.trace () command. An example of working with her:

    functionfoo() {
  functionbar() {
    console.trace();
  }
  bar();
}
foo();

    And the result.



    We count calls with console.count ()


    The console.count () command shows the number of times it has been called. It is worth remembering: if you change the log line, which is given to the command, then the countdown will go on a new one. If desired, you can reset the counter with console.countReset ().



    Start and stop the timer with console.time () and console.timeEnd ()


    Everything is simple here. Both commands control the timer, allowing you to start or stop it. They are usually used to check performance. In addition, if you wish, you can create a specific timer - in this case, you must pass a string to any of the commands.



    Boolean and console.assert ()


    The console.assert () function is indispensable for working with logical expressions. It allows you to check whether an expression has assumed false. The result is recorded in the log. In principle, you can use if, but the console is more convenient. Example of working with the team:

    functiongreaterThan(a,b) {
  console.assert(a > b, {"message":"a is not greater than b","a":a,"b":b});
}
greaterThan(2,1);

    Result



    Profiling with console.profile ()


    The console.profile () command allows you to start profiling without problems. Hand work is not needed in this case, since the team does everything itself.

    functionthisNeedsToBeProfiled() {
  console.profile("thisNeedsToBeProfiled()");
  // позже, после выполнения нужных действийconsole.profileEnd();
}

    Timeline and console.timeStamp ()


    Another useful function, console.timeStamp (), adds a timestamp for certain events. It can be used to fix the time of returning an API call or record the time when the data processing is completed. Actually, there are many cases.

    console.timeStamp ('custom timestamp!');

    Clearing the console console.clear ()


    Everything is simple here. If you want to clear the console, use console.clear ().

    Property console.memory


    Allows you to display the size of the buffer. It is worth using it if performance statistics are not very clear, and there is no time to get acquainted with the graphs.



    Outputting a table with console.table ()


    The console.table () function allows you to display a small table with which the developer can interact. An array is used here as an argument; it must be passed to the call.



    Actually, that's all for today. If you have your own life hacking debugs, share them in the comments - we will be grateful.

    Skillbox recommends:

    Теги:

    Also popular now: