{"id":174197,"date":"2021-02-09T17:00:17","date_gmt":"2021-02-09T14:00:17","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/"},"modified":"2021-02-09T17:00:17","modified_gmt":"2021-02-09T14:00:17","slug":"ways-to-format-console-output-in-javascript-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/","title":{"rendered":"#Ways to Format Console Output in JavaScript \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2d79352f1b8\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2d79352f1b8\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#The_Basics\" >The Basics<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Format_Specifiers\" >Format Specifiers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Adding_Images\" >Adding Images<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Tabulated_Output\" >Tabulated Output<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Conditional_Output\" >Conditional Output<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Message_Groups\" >Message Groups<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Counters\" >Counters<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Timers\" >Timers<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Utility_Methods\" >Utility Methods<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/buradabiliyorum.com\/en\/ways-to-format-console-output-in-javascript-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<p><strong>&#8220;#Ways to Format Console Output in Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a> \u2013 CloudSavvy IT&#8221;<\/strong><\/p>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9531\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/470cf3833e48e445bcdadbba538bc422\/p\/uploads\/2021\/02\/8221557e.jpg\" alt=\"Illustration showing JavaScript console log statements\" width=\"1602\" height=\"902\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>JavaScript developers are familiar with the humble <code>console.log()<\/code> function. Although console logging may appear straightforward, there\u2019s much more available within the <code>console<\/code> object. Let\u2019s look at how you can enhance your log messages with advanced formatting.<\/p>\n<h2 id=\"the-basics\"><span class=\"ez-toc-section\" id=\"The_Basics\"><\/span>The Basics<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Let\u2019s recap the most-used console functions:<\/p>\n<ul>\n<li><code>console.log(data, ...args)<\/code> \u2013 Logs <code>data<\/code> to the console. Any other arguments passed will also be emitted on the same line.<\/li>\n<li><code>console.info(data, ...args)<\/code> \u2013 Equivalent to <code>console.log()<\/code> but normally with emphasised formatting \u2013 Chrome, for example, adds a blue background and an information \u201ci\u201d icon.<\/li>\n<li><code>console.error(data ...args)<\/code> \u2013 The same as <code>console.log()<\/code>, except the output is directed to the <code>stderr<\/code> (error) stream. Most browsers automatically format the output with a red background to convey that an error occurred.<\/li>\n<li><code>console.warn(data, ...args)<\/code> \u2013 The same as <code>console.error()<\/code>, except a yellow background is normally applied to indicate the less severe warning status.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9530\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/7406cd395ee57e8f320bafa0d7fa1988\/p\/uploads\/2021\/02\/39465969.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<h2 id=\"format-specifiers\"><span class=\"ez-toc-section\" id=\"Format_Specifiers\"><\/span>Format Specifiers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Developers usually only pass a single argument to the above commands. Nonetheless, they all accept multiple arguments, which are automatically concatenated in the final output.<\/p>\n<p>You can also use arguments with <code>printf<\/code>-compatible format specifiers defined by a string in <code>data<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> value <span class=\"sy0\">=<\/span> <span class=\"nu0\">10<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw1\">const<\/span> available <span class=\"sy0\">=<\/span> <span class=\"st0\">\"available\"<\/span><span class=\"sy0\">;<\/span>\nconsole.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"There are %d options\"<\/span><span class=\"sy0\">,<\/span> value<span class=\"sy0\">,<\/span> available<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ Logs \"There are 10 options available\"<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The available format specifiers are as follows:<\/p>\n<ul>\n<li><code>%s<\/code> \u2013 Format as a string.<\/li>\n<li><code>%i<\/code> \u2013 Format as an integer.<\/li>\n<li><code>%f<\/code> \u2013 Format as a floating point value.<\/li>\n<li><code>%O<\/code> \u2013 Format as a JavaScript object.<\/li>\n<li><code>%o<\/code> \u2013 Format as a DOM element.<\/li>\n<li><code>%c<\/code> \u2013 Format as a CSS rule, which is applied to the emitted log line.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9529\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/691d4a66e8aef8a3b2a19a58d087385e\/p\/uploads\/2021\/02\/efaf98db.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Support for the last two varies by JavaScript engine. They\u2019re available in modern browsers but not necessarily in other execution contexts.<\/p>\n<h2 id=\"adding-images\"><span class=\"ez-toc-section\" id=\"Adding_Images\"><\/span>Adding Images<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Using the CSS format specifier, it\u2019s possible to include images in console output! This works in browsers but won\u2019t be supported in CLI environments such as Node.js.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> css <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span>\n    <span class=\"st0\">\"background-image: url(https:\/\/example.com)\"<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"st0\">\"background-size: cover\"<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"st0\">\"height: 100px\"<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"st0\">\"padding: 15px\"<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"st0\">\"width: 100px\"<\/span>\n<span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\nconsole.<span class=\"me1\">log<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"%cI'm An Image!\"<\/span><span class=\"sy0\">,<\/span> css.<span class=\"me1\">join<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\";\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9528\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/190fb9ab1aedea3acfde6d885f601ad9\/p\/uploads\/2021\/02\/792069df.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>We hijack CSS\u2019 <code>background-image<\/code> rule to render the image. While it may seem lighthearted, this could have practical use cases if your debugging involves working with images. You can check the images being retrieved without actually emitting them to the page.<\/p>\n<h2 id=\"tabulated-output\"><span class=\"ez-toc-section\" id=\"Tabulated_Output\"><\/span>Tabulated Output<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>JavaScript includes built-in support for emitting tabulated data to the console. Use <code>console.table()<\/code> with an array of uniform objects. The column headers will be determined automatically, based on the properties common to each object.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw1\">const<\/span> objects <span class=\"sy0\">=<\/span> <span class=\"br0\">[<\/span><span class=\"br0\">{<\/span>a<span class=\"sy0\">:<\/span> <span class=\"nu0\">1<\/span><span class=\"sy0\">,<\/span> x<span class=\"sy0\">:<\/span> <span class=\"st0\">\"a\"<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">,<\/span> <span class=\"br0\">{<\/span>a<span class=\"sy0\">:<\/span> <span class=\"nu0\">2<\/span><span class=\"sy0\">,<\/span> x<span class=\"sy0\">:<\/span> <span class=\"st0\">\"b\"<\/span><span class=\"br0\">}<\/span><span class=\"br0\">]<\/span><span class=\"sy0\">;<\/span>\nconsole.<span class=\"me1\">table<\/span><span class=\"br0\">(<\/span>objects<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9527\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/b78a864c401d273ceda9db8c0cccdb8d\/p\/uploads\/2021\/02\/efc7da8d.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>This can be extremely useful when you\u2019re working with objects in bulk. Instead of having to iterate an array and call <code>console.log()<\/code> with each item, just use <code>console.table()<\/code> and benefit from the automatically formatted output.<\/p>\n<h2 id=\"conditional-output\"><span class=\"ez-toc-section\" id=\"Conditional_Output\"><\/span>Conditional Output<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can use the <code>console.assert()<\/code> function to condition output on the value of an expression. This reduces the code you need to write compared with prefacing a <code>console.log()<\/code> with an <code>if<\/code> statement.<\/p>\n<p>Your message will only be logged if the expression evaluates to <code>false<\/code>. An expression evaluting to <code>true<\/code> will result in nothing being emitted.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">console.<span class=\"me1\">assert<\/span><span class=\"br0\">(<\/span><span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"I never appear\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nconsole.<span class=\"me1\">assert<\/span><span class=\"br0\">(<\/span><span class=\"kw2\">false<\/span><span class=\"sy0\">,<\/span> <span class=\"st0\">\"I will be logged\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The <code>console.assert()<\/code> function does not affect runtime. No error will be thrown if the assertion fails; your expression is used solely to determine whether to log to the console.<\/p>\n<h2 id=\"message-groups\"><span class=\"ez-toc-section\" id=\"Message_Groups\"><\/span>Message Groups<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>You can visually group sections of output together with <code>console.group()<\/code>. This will apply an automatic indent to subsequent lines using a predefined number of spaces.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9526\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/d638798db209ebf197d590ce3284047c\/p\/uploads\/2021\/02\/ea0323f5.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>To close the group, call <code>console.groupEnd()<\/code>. This restores the previous indentation.<\/p>\n<p>You may call <code>console.group()<\/code> multiple times before <code>console.groupEnd()<\/code> to create deeply nested output. <code>console.groupEnd()<\/code> reverts the indentation by one step at a time, so you\u2019ll need to match the number of <code>group()<\/code> and <code>groupEnd()<\/code> calls before you get back to the default level.<\/p>\n<h2 id=\"counters\"><span class=\"ez-toc-section\" id=\"Counters\"><\/span>Counters<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Use <code>console.count(label)<\/code> to create an internal counter with a given name:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">console.<span class=\"me1\">count<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"my-counter\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ my-counter: 1<\/span>\nconsole.<span class=\"me1\">count<\/span><span class=\"br0\">(<\/span><span class=\"st0\">\"my-counter\"<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ my-counter: 2<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This gives you a straightforward way to emit incrementing values. You don\u2019t have to specify a name \u2013 the <code>default<\/code> counter will be used automatically. You can reset counters to 0 using <code>console.countReset(label)<\/code>.<\/p>\n<h2 id=\"timers\"><span class=\"ez-toc-section\" id=\"Timers\"><\/span>Timers<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The console has built-in support for operation timing. Elapsed time is measured in milliseconds and emitted in seconds (e.g.\u00a0\u201c1.234s\u201d); it\u2019s not guaranteed to be high-accuracy.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">console.<span class=\"me1\">time<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ ...some time later...<\/span>\nconsole.<span class=\"me1\">timeEnd<\/span><span class=\"br0\">(<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n<span class=\"co1\">\/\/ Emits the elapsed time (\"1.234s\")<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Timers support optional labels in the same way as counters. This lets you manage multiple timers simultaneously when timing different aspects of your code.<\/p>\n<h2 id=\"utiity-methods\"><span class=\"ez-toc-section\" id=\"Utility_Methods\"><\/span>Utility Methods<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The <code>console<\/code> object includes several utility methods which help you manage your output.<\/p>\n<ul>\n<li><code>console.clear()<\/code> \u2013 Clears the console of all visible output. The effects will vary by execution environment.<\/li>\n<li><code>console.dir(obj, options)<\/code> \u2013 Emits a list of all the enumerable property\/value pairs of the object <code>obj<\/code>. You can customise the recursion depth using the <code>depth<\/code> property of the <code>options<\/code> object.<\/li>\n<li><code>console.trace()<\/code> \u2013 Emits a stack trace to the current point in your code, enabling straightforward debugging of the execution path taken.<\/li>\n<\/ul>\n<p>There are other non-standardised methods which are engine-dependent. An example is <code>console.profile()<\/code>, which is widely available but with differing implementations. In browsers, it <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/general\/\" data-internallinksmanager029f6b8e52c=\"3\" title=\"General\" target=\"_blank\" rel=\"noopener\">general<\/a>ly invokes high-accuracy profiling to help you diagnose performance issues.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There\u2019s much more to JavaScript\u2019s console than the basic <code>console.log()<\/code>! Taking the time to learn the available functions can drastically accelerate debugging, particularly when working with complex objects or fast-moving output.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-9525\" src=\"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/da73909e44335ec81de28409301e7de9\/p\/uploads\/2021\/02\/5f732a84.jpg\" alt=\"\" width=\"960\" height=\"540\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The available features do depend on the JavaScript engine you\u2019re working with. Generally, you\u2019ll get the most advanced styling from an up-to-date browser, although Node.js also supports most of the techniques we\u2019ve described here.\n<\/p><\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/9501\/ways-to-format-console-output-in-javascript\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;#Ways to Format Console Output in JavaScript \u2013 CloudSavvy IT&#8221; JavaScript developers are familiar with the humble console.log() function. Although console logging may appear straightforward, there\u2019s much more available within the console object. Let\u2019s look at how you can enhance your log messages with advanced formatting. The Basics Let\u2019s recap the most-used console functions: console.log(data,&#8230;<\/p>\n","protected":false},"author":1,"featured_media":174198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/thumbcache\/0\/0\/470cf3833e48e445bcdadbba538bc422\/p\/uploads\/2021\/02\/8221557e.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-174197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/174197","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=174197"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/174197\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/174198"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=174197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=174197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=174197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}