How to show logs in browser console
I know, I know, how difficult can be show logs in browser, you can use console.log(), it's a simple line of code that you can include in any part of your JavaScript application with a parameter and will work, it will show the information you want in the console right? but in this post I want to show you how to log in different ways that you maybe don't know.
I will start with the most common, as you know is console.log(), and 99% of the time will do the job that you need, for this simple method I want to share my personal way of use.
To execute the examples please first open your console with Ctrl + Shift + J (on Windows) or Ctrl + Option + J (on Mac)
Did you noticed the difference? in the first logs you lack of context, you can see the values in the console but you don't know which value belongs to each variable, my recommendation is to wrap the variables with { }, that will create an object with the variables, letting you know the variable name and it's value.
Also there are other kind of logs like console.info(), console.warn(), console.error(), console.debug() and console.trace(), each one has different level on the browser log, working in almost the same way.
As you can see console.info(), console.warn(), console.error() and console.debug() level show the fist parameter like console.log(), with the difference that console.warn() and console.error() also show the stack trace, similar like console.trace(). By default debug level does not appear in the console, you have to select Verbose level in the drop down next to filter in the top menu.
Now let's step into a better formatting of logs, there are two methods that I want to cover on this, first one is console.group(), this method allow us to group the logs, that will help us to expand or contract the log information. Second one is console.table(), this method allow us to show the information in table format providing an array of objects to this one, an example of both is down here.
As simple as that, now you know how to present the information in different ways in the console, if you require more information about console API or it's use, yo can take a look on the documentation:
https://developers.google.com/web/tools/chrome-devtools/console/api
https://developer.mozilla.org/en-US/docs/Web/API/console
I will start with the most common, as you know is console.log(), and 99% of the time will do the job that you need, for this simple method I want to share my personal way of use.
To execute the examples please first open your console with Ctrl + Shift + J (on Windows) or Ctrl + Option + J (on Mac)
Did you noticed the difference? in the first logs you lack of context, you can see the values in the console but you don't know which value belongs to each variable, my recommendation is to wrap the variables with { }, that will create an object with the variables, letting you know the variable name and it's value.
Also there are other kind of logs like console.info(), console.warn(), console.error(), console.debug() and console.trace(), each one has different level on the browser log, working in almost the same way.
As you can see console.info(), console.warn(), console.error() and console.debug() level show the fist parameter like console.log(), with the difference that console.warn() and console.error() also show the stack trace, similar like console.trace(). By default debug level does not appear in the console, you have to select Verbose level in the drop down next to filter in the top menu.
Now let's step into a better formatting of logs, there are two methods that I want to cover on this, first one is console.group(), this method allow us to group the logs, that will help us to expand or contract the log information. Second one is console.table(), this method allow us to show the information in table format providing an array of objects to this one, an example of both is down here.
As simple as that, now you know how to present the information in different ways in the console, if you require more information about console API or it's use, yo can take a look on the documentation:
https://developers.google.com/web/tools/chrome-devtools/console/api
https://developer.mozilla.org/en-US/docs/Web/API/console
william hill login【WG】tournaments - Casinoland Japan
ReplyDelete【 더킹카지노 Walt Disney World william hill 2020】tournaments, tournaments, and 퍼스트카지노 information about 【 Walt Disney World 2020】tournaments, tournaments, and information about
Borgata Hotel Casino & Spa - Mandel Group
ReplyDeleteMandel Group provides the largest selection 포천 출장안마 of Spa, dining, 진주 출장마사지 and spa services in Atlantic City, 군포 출장안마 New Jersey. 화성 출장샵 Mandel Group Atlantic 공주 출장안마 City Hotel
Here, when an individual desires to play Roulette desk with https://thekingofdealer.com/pharaoh-casino/ a live individual working as a dealer, it will be to be|will in all probability be} never a web-based Roulette free choice. The work of a croupier needs to be paid, and goes to be|will in all probability be} bizarre if someone would work for free, even when it comes to of|in relation to} this true enjoyable. The player who bets on the most probably outcome wins the bet, and the home loses nothing.
ReplyDeleteCheck the terms and conditions to positive you|ensure you|be positive to} understand how these winnings are handled. One smart way of helping to improve your profitable 토토사이트 likelihood on a slot is through the use of free spins. Fruit machines additionally provide a bonus board or bonus path characteristic that comes into play at random intervals. The board/trail looks a bit like a racetrack of squares that are be} quickly lit and unlit as though a automobile have been traveling around the track. You try and cease the game when essentially the most lucrative sq. is lit, and are rewarded whatever bonus the lit sq. describes.
ReplyDelete