{"id":33590,"date":"2016-04-13T16:15:56","date_gmt":"2016-04-13T10:45:56","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=33590"},"modified":"2016-12-19T15:16:57","modified_gmt":"2016-12-19T09:46:57","slug":"getting-to-know-the-console-api-for-better-debugging","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/getting-to-know-the-console-api-for-better-debugging\/","title":{"rendered":"Getting to know the Console API for better debugging"},"content":{"rendered":"

Developer tools are powerful tools to debugging javascript file in development of front-end web applications<\/a>. The console has an API that provides a number of methods that make debugging easier. There has a multiple method for debugging JavaScript files in web applications. Debug your web applications using the methods provided by the console API but some browsers do not support this functionality. It’s had a browser compatibility issue.<\/p>\n

In this blog post you\u2019re going to learn how to debug JavaScript files in your web applications using these methods provided by the console API.<\/p>\n

Console.log():<\/h3>\n

In debugging, console.log() are most frequently used by web developers. Using this method to print a log messages in the console window. If you have an object and want to populate loges to use console.log() and passed variable as an attribute.<\/p>\n

[java]
\nvar country = [
\n\t{ countryCode: &quot;93&quot;, countryName: &quot;Afghanistan&quot;, capital: &quot;Kabul&quot;},
\n\t{ countryCode: &quot;355&quot;, countryName: &quot;Albania&quot;, capital: &quot;Tirana&quot;},
\n\t{ countryCode: &quot;213&quot;, countryName: &quot;Algeria&quot;, capital: &quot;Algiers&quot;},
\n\t{ countryCode: &quot;684&quot;, countryName: &quot;American Samoa&quot;, capital: &quot;Pago Pago&quot;}
\n];<\/p>\n

console.log(country);
\n[\/java]<\/p>\n

\"console-log\"<\/p>\n

Console.table() :<\/h3>\n

In debugging we face more difficulties to find undefined values because few of the keys in object may be undefined values and that takes more time to debuggers. Using this method to show all data in tabular format and all the key and value shows in tabular format. Still, the property values are neatly arranged and give you a good overview.<\/p>\n

[java]
\nvar country = [
\n{ countryCode: &quot;93&quot;, countryName: &quot;Afghanistan&quot;, capital: &quot;Kabul&quot;},
\n{ countryCode: &quot;355&quot;, countryName: &quot;Albania&quot;, capital: &quot;Tirana&quot;},
\n{ countryCode: &quot;213&quot;, countryName: &quot;Algeria&quot;, capital: &quot;Algiers&quot;},
\n{ countryCode: &quot;684&quot;, countryName: &quot;American Samoa&quot;, capital: &quot;Pago Pago&quot;}
\n];<\/p>\n

console.table(country);
\n[\/java]<\/p>\n

\"console-table\"<\/p>\n

Console.trace() :<\/h3>\n

Javascript is not a very structured language, it can sometimes be hard to get an overview of what happened and when because the views are created, multiple events are triggering functions and in the end you want to know what\/why caused this function call. In Javascript console have a trace method to solve this type of issues. It’s arranged all the calls and shows in a console window.<\/p>\n

[java]
\nvar mobile;
\nvar func1 = function(){
\nfunc2();
\n}<\/p>\n

var func2 = function(){
\nmobile = new Mobile();
\nmobile.funcX();
\n}<\/p>\n

var Mobile = function(){
\nthis.brand = ‘motorola’;
\nthis.color = ‘black’;<\/p>\n

this.funcX = function(){
\nthis.funcY();
\n}<\/p>\n

this.funcY = function(){
\nconsole.trace(‘trace car’);
\n}
\n}<\/p>\n

func1();
\n[\/java]<\/p>\n

\"console-trace\"<\/p>\n

console.count(label) :<\/h3>\n

The console.count() method will output the number of times that the count() method has been called. This method can be useful for finding out how many times a function is being called in your code.<\/p>\n

[java]
\nfunction counter() {
\nconsole.count(‘counter called’);
\n}<\/p>\n

for (var i = 0; i &lt; 10; i++) {
\ncounter();
\n}
\n[\/java]<\/p>\n

\"console-count\"<\/p>\n

console.time() & console.timeEnd() :<\/h3>\n

The console.time() and console.timeEnd() method gives a way to how long it takes for a piece of code to execute. Both the time() and timeEnd() methods should be passed the same label parameter.<\/p>\n

[java]
\nconsole.time(‘time counter’);
\nfunction counter() {
\nconsole.count(‘counter called’);
\n}
\nfor (var i = 0; i &lt; 10; i++) {
\ncounter();
\n}
\nconsole.timeEnd(‘time counter’);
\n[\/java]<\/p>\n

\"console-time\"<\/p>\n

Console.group() , console.groupCollapsed() and console.groupEnd() :<\/h3>\n

The console.group() method is used to group together a series of log messages. Once this method is called, any further log messages will be added to the group until console groupEnd() is executed to close the group.<\/p>\n

The console.groupCollapsed() method is same as console.group() except that the group is initially displayed collapsed rather than open in the console.<\/p>\n

[java]
\nconsole.group(&quot;Log Details&quot;);
\nconsole.log(&quot;Log 1&quot;)
\nconsole.log(&quot;Log 2&quot;)
\nconsole.log(&quot;Log 3&quot;)
\nconsole.log(&quot;Log 4&quot;)
\nconsole.log(&quot;Log 5&quot;)
\nconsole.groupEnd();
\n[\/java]<\/p>\n

\"console-group\"<\/p>\n

console.dir() :<\/h3>\n

This method prints a JS representation of the define object. It is especially useful for examining HTML elements, as it will display the DOM representation of the element.<\/p>\n

[java]
\nconsole.dir(document.body);
\n[\/java]<\/p>\n

\"console-dir\"<\/p>\n

console.dirxml(object) :<\/h3>\n

This method displays an interactive tree of the descendant elements of the specified XML\/HTML element. The output is presented as a hierarchical listing of expandable nodes that let you see the contents of child nodes.<\/p>\n

[java]
\nconsole.dirxml(document.body);
\n[\/java]<\/p>\n

\"console-dirxml\"<\/p>\n

console.log(‘%c’) :<\/h3>\n

To make interactive console output in console window, have a styling %c format specifier to allow to style in console output.<\/p>\n

[java]
\nconsole.log(‘%c CSS in Console log’, ‘color: #ffffff; background-color: #999999; font-size: 20px; padding: 5px;’);
\n[\/java]<\/p>\n

\"console-style\"<\/p>\n

console.assert() :<\/h3>\n

The assert method accepts two parameters a boolean expression, which references whether your test passed or failed and a short description of your test. When expression is false, then it’s shows defined message.<\/p>\n

[java]
\nvar count = 5;
\nconsole.assert(count &gt; 10, ‘count is not larger than 10’);
\n[\/java]<\/p>\n

console.info() :<\/h3>\n

This method in the same as console.log() but it\u2019s a show with info flag. This can be used to filter log messages using flags.<\/p>\n

[java]
\nconsole.info(‘Hello Treehouse’);
\n[\/java]<\/p>\n

console.warn() :<\/h3>\n

This method shows log message in the console windows with warning flag.<\/p>\n

[java]
\nconsole.warn(‘This is warning message);
\n[\/java]<\/p>\n

console.clear() :<\/h3>\n

The console.clear() method clears the console window.<\/p>\n

[java]
\nconsole.clear();
\n[\/java]<\/p>\n

monitor() :<\/h3>\n

Monitors the function call and its arguments. Every time the function is called, it will be logged with the values that was passed in function.<\/p>\n

[java]
\nvar calculator = function(x,y,z){
\n};
\nmonitor(calculator);<\/p>\n

calculator (1,2);
\n[\/java]<\/p>\n

\"monitor\"<\/p>\n

For more:<\/h4>\n

github reference : <\/p>\n

Hope this will help!!<\/p>\n","protected":false},"excerpt":{"rendered":"

Developer tools are powerful tools to debugging javascript file in development of front-end web applications. The console has an API that provides a number of methods that make debugging easier. There has a multiple method for debugging JavaScript files in web applications. Debug your web applications using the methods provided by the console API but […]<\/p>\n","protected":false},"author":370,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[1],"tags":[3198,3195,3196,3199,3197],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/33590"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/370"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=33590"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/33590\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=33590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=33590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=33590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}