{"id":2954,"date":"2023-10-23T12:41:55","date_gmt":"2023-10-23T10:41:55","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2954"},"modified":"2023-10-23T12:48:00","modified_gmt":"2023-10-23T10:48:00","slug":"how-to-customize-logging-in-javascript","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/10\/23\/how-to-customize-logging-in-javascript\/","title":{"rendered":"How to customize logging in Javascript"},"content":{"rendered":"\n

If you have experience in creating a web application, you will likely be acquainted with console.log(\u2026), a method used to display data in the developer console. It is beneficial for debugging, logging, and testing purposes.<\/p>\n\n\n\n

Let’s outlines some neat tricks we can use to level up our logging experience.<\/p>\n\n\n\n

Tables<\/h4>\n\n\n\n

The console.table() method is used to present objects and arrays in an organized and visually appealing tabular format.<\/p>\n\n\n\n

console.table({\n  'Time Stamp': new Date().getTime(),\n  'OS': navigator['platform'],\n  'Browser': navigator['appCodeName'],\n  'Language': navigator['language'],\n});<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Groups<\/h4>\n\n\n\n
The console.group()<\/strong> method is used to create<\/strong> a new group<\/strong> of logs in the web console. This method allows us to group the content in a separate block, that will be indented.<\/p>\n\n\n\n
We can optionally give a section a title, by passing a string as the parameter. Sections can be collapsed and expanded in the console, but we can also have a section collapsed by default, by using groupCollapsed<\/code> instead of group<\/code>. We can also nest sub-sections within sections but be sure to remember to close out each group with groupEnd<\/code>.<\/p>\n\n\n\n
console.group('URL Info');\n  console.log('Protocol', window.location.protocol);\n  console.log('Host', window.origin);\n  console.log('Path', window.location.pathname);\n  console.groupCollapsed('Meta Info');\n    console.log('Date Fetched', new Date().getTime());\n    console.log('OS', navigator['platform']);\n    console.log('Browser', navigator['appCodeName']);\n    console.log('Language', navigator['language']);\n  console.groupEnd();\nconsole.groupEnd();<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Styled Logs<\/h4>\n\n\n\n
It’s possible to style our log outputs with some basic CSS, such as colors, fonts, text styles and sizes. <\/p>\n\n\n\n
PS:<\/span><\/strong>  browser support for this is quite variable<\/em>.<\/p>\n\n\n\n
console.log(\n  '%cHello World!',\n  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'\n);<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Time<\/h4>\n\n\n\n
One common way to debug code is by measuring execution time, which helps track how long an operation takes. To do this, you can start a timer using console.time()<\/em><\/strong> and assign a label, and then end the timer using console.timeEnd()<\/em><\/strong> with the same label.<\/p>\n\n\n\n
console.time(\"concatenation\");\nlet output = \"\";\nfor (var i = 1; i <= 1e6; i++) {\n  output += i;\n}\nconsole.timeEnd(\"concatenation\");<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
We can also add markers within a long running operation using console.timeLog()<\/code><\/a><\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Assert<\/h4>\n\n\n\n
The console. assert() method writes an error message to the console if the assertion is false<\/strong>. If the assertion is true, nothing happens<\/p>\n\n\n\n
const errorMsg = 'the # is not even';\nfor (let num = 2; num <= 5; num++) {\n  console.log(`the # is ${num}`);\n  console.assert(num % 2 === 0, { num }, errorMsg);\n}<\/code><\/pre>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
Trace<\/h4>\n\n\n\n
In Angular, the console.trace() method outputs a stack trace to the Web console<\/a>. This can be useful for tracking how and why a particular function was called. Here is a simple example:<\/p>\n\n\n\n
import { Component, OnInit } from '@angular\/core';\n\n@Component({\n  selector: 'app-example',\n  template: '',\n})\nexport class ExampleComponent implements OnInit {\n  constructor() {}\n\n  ngOnInit(): void {\n    this.firstFunction();\n  }\n\n  firstFunction() {\n    this.secondFunction();\n  }\n\n  secondFunction() {\n    console.trace('Hier wird der Aufrufstapel protokolliert.');\n  }\n}\n<\/code><\/pre>\n\n\n\n
In this example, we have an Angular component ExampleComponent with two functions: firstFunction and secondFunction. When secondFunction is called, we use console.trace() to log the call stack. Now when you open the developer tools in your browser and use this component, you will see the call stack logged to show the path from which the function was called.<\/p>\n\n\n\n
<\/p>\n\n\n\n
The console output might look something like this:<\/p>\n\n\n\n
Trace\n    at ExampleComponent.secondFunction (path-to-your-component.ts:16:15)\n    at ExampleComponent.firstFunction (path-to-your-component.ts:12:15)\n    at ExampleComponent.ngOnInit (path-to-your-component.ts:8:3)\n    at callHook (core.js:2526)\n    at callHooks (core.js:2492)\n    at executeInitAndCheckHooks (core.js:2442)\n    at refreshView (core.js:9529)\n    at refreshDynamic (core.js:8706)\n    at refreshView (core.js:9585)\n    at refreshComponent (core.js:9696)\n<\/code><\/pre>\n\n\n\n
This shows the call stack, starting with the current function (secondFunction) and going backwards to the start point of the call. This can be very helpful in troubleshooting and understanding program flow in our Angular application.<\/p>\n\n\n\n
Dir<\/h4>\n\n\n\n
the console.dir() method is used mainly to display properties of an object. It outputs the list of properties of an object in a readable and interactive manner.<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n","protected":false},"excerpt":{"rendered":"
If you have experience in creating a web application, you will likely be acquainted with console.log(\u2026), a method used to display data in the developer console. It is beneficial for debugging, logging, and testing purposes. Let’s outlines some neat tricks we can use to level up our logging experience. Tables The console.table() method is used […]<\/p>\n","protected":false},"author":1,"featured_media":1963,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37,5],"tags":[743,741,742,744,185,745,210],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2954"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2954"}],"version-history":[{"count":2,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2954\/revisions"}],"predecessor-version":[{"id":2963,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2954\/revisions\/2963"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1963"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}