Good VS Bad – Beyond the JavaScript Console

In your development career, you mostly know about the console.log() but the console API can do many things that you may don’t know. HERE, in this article, we are going to learn all about console API with Good VS Bad practice.

Let’s start with consolin…


This content originally appeared on DEV Community and was authored by Suchitkumar Khunt

In your development career, you mostly know about the console.log() but the console API can do many things that you may don’t know. HERE, in this article, we are going to learn all about console API with Good VS Bad practice.

Let’s start with consoling the console object.

Write console.log(console) in your browser’s console editor and you found the list of APIs provided by the console object. Each API purpose is unique and useful in certain cases.

Alt Text

Below are my explanations of the most useful APIs in console object.

Assume you have an Object on the list and you show that on the JavaScript console.

The Bad Practice

Alt Text

The Good Practice

Alt Text

Assertion – Sometimes we want to log only when the condition is false.

console.assert() – If condition false then only give an error. It eliminating the need for if condition and keep your code clean.

The Bad Practice

Alt Text

The Good Practice

Alt Text

{ } – Always use Braces to log the object with the name.

The Bad Practice

Alt Text

The Good Practice

Alt Text

Group: If you have multiple logs, then try log group for collapsible sections.

The Bad Practice

Alt Text

The Good Practice

Alt Text

Always, console object with its’ properties.

The Bad Practice

Alt Text

The Good Practice

Alt Text

How to set a timer with the console?

We can start a timer with the console by calling time, then call timeLog to measure the elapsed time. It provides a simple solution for measuring performance.

Alt Text

Now, lets talk about remaining APIs in console log.

console.clear()

The console.clear() method clears the console

console.count()

Writes to the console the number of times that particular console.count() is called.

Alt Text

console.info()

This method writes a message to the console.

Alt Text

console.warn()

The console.warn() method writes a warning to the console.

Alt Text

console.error()

The console.error() method writes an error message to the console.

Alt Text

Console.trace()

The console.trace() method displays a trace that shows how the code ended up at a certain point.

Alt Text

How to apply CSS in console.log()?

We can also apply the style in the console.log(). Use the special %c character to add some style.

Alt Text

Thank you for reading this article.


This content originally appeared on DEV Community and was authored by Suchitkumar Khunt


Print Share Comment Cite Upload Translate Updates
APA

Suchitkumar Khunt | Sciencx (2021-04-21T14:02:05+00:00) Good VS Bad – Beyond the JavaScript Console. Retrieved from https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/

MLA
" » Good VS Bad – Beyond the JavaScript Console." Suchitkumar Khunt | Sciencx - Wednesday April 21, 2021, https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/
HARVARD
Suchitkumar Khunt | Sciencx Wednesday April 21, 2021 » Good VS Bad – Beyond the JavaScript Console., viewed ,<https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/>
VANCOUVER
Suchitkumar Khunt | Sciencx - » Good VS Bad – Beyond the JavaScript Console. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/
CHICAGO
" » Good VS Bad – Beyond the JavaScript Console." Suchitkumar Khunt | Sciencx - Accessed . https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/
IEEE
" » Good VS Bad – Beyond the JavaScript Console." Suchitkumar Khunt | Sciencx [Online]. Available: https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/. [Accessed: ]
rf:citation
» Good VS Bad – Beyond the JavaScript Console | Suchitkumar Khunt | Sciencx | https://www.scien.cx/2021/04/21/good-vs-bad-beyond-the-javascript-console/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.