{"id":647,"date":"2021-06-14T16:24:59","date_gmt":"2021-06-14T14:24:59","guid":{"rendered":"http:\/\/strawberrycode.com\/blog\/?p=647"},"modified":"2021-07-05T16:38:35","modified_gmt":"2021-07-05T14:38:35","slug":"javascript-console-log","status":"publish","type":"post","link":"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/","title":{"rendered":"JavaScript console.log: Next Level Debugging"},"content":{"rendered":"\n<p>If you are working in web development, you have probably encountered JavaScript at some point. As the following chart shows, it has been a dominating language for many years now, and still holds a strong position, probably due to the large number of frameworks using it (Angular, Backbone, Node, React, Vue.. to name a few).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"597\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github-1024x597.png\" alt=\"JS Octoverse Github\" class=\"wp-image-660\" srcset=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github-1024x597.png 1024w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github-300x175.png 300w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github-768x448.png 768w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github-1536x895.png 1536w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_octoverse_github.png 1702w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Top languages over the years &#8211; <a href=\"https:\/\/octoverse.github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Octoverse.github.com<\/a><\/figcaption><\/figure>\n\n\n\n<p>Then you are probably familiar with the famous logging method: <code>console.log()<\/code>. But, are you using it to its full potential ? Here is a glimpse of a few powerful hacks to debug JavaScript.<\/p>\n\n\n\n<h2>Logging Objects<\/h2>\n\n\n\n<p>Let&#8217;s dive directly into the core of the console with the objects. <\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Let's define some objects\nconst fruits  = {'name': 'Strawberry', 'color': 'red', 'size': 'small', 'image': '&#x1f353;'};\nconst veggies = {'name': 'Broccoli', 'color': 'green', 'size': 'medium', 'image': '&#x1f966;'};\n\nconsole.group(\"___ Logging the Objects ___\"); \/\/ Open a debug group (don't forget to close it at the end)\n\n\/\/ 1. straightforward output\nconsole.log(fruits); \n\/\/ returns: {name: \"Strawberry\", color: \"red\", size: \"small\", image: \"&#x1f353;\"}\n\n\/\/ 2. Frustrating output\nconsole.log('fruits are: ' + fruits);     \/\/ :(\n\/\/ fruits are: [object Object]\n\n\/\/ 3. Using the %o string substitution for objects, it's way better!\nconsole.log('veggies are: %o', veggies);  \/\/ :)\n\/\/ veggies are: {name: \"Broccoli\", color: \"green\", size: \"medium\", image: \"&#x1f966;\"}\n\n\/\/ 4. Returning multiple objects at once\nconsole.log({ fruits, veggies });\n\/\/ {fruits: {\u2026}, veggies: {\u2026}}\n\/\/   fruits: {name: \"Strawberry\", color: \"red\", size: \"small\", image: \"&#x1f353;\"}\n\/\/   veggies: {name: \"Broccoli\", color: \"green\", size: \"medium\", image: \"&#x1f966;\"}\n\n\/\/ 5. log() vs info() to display objects in strings\nconsole.log(\"Shopping list: \" + fruits + \" and \" + veggies);  \/\/ :(\n\/\/ Shopping list: [object Object] and [object Object]\nconsole.info(\"Shopping list: \", fruits, \" and \", veggies);    \/\/ :)\n\/\/ Shopping list:  {name: \"Strawberry\", color: \"red\", size: \"small\", image: \"&#x1f353;\"}  and  {name: \"Broccoli\", color: \"green\", size: \"medium\", image: \"&#x1f966;\"}\n\n\/\/ 6. Returning object attributes using template literals\nconsole.log(`Shopping list short version: \\n- ${fruits.name} \\n- ${veggies.name}`);\n\/\/ Shopping list short version: \n\/\/   - Strawberry \n\/\/   - Broccoli\n\nconsole.groupEnd(); \/\/ end of the debug group\n<\/pre>\n\n\n\n<p>&#x26a0;&#xfe0f; Pay attention to the backticks (or grave accent) <code>` `<\/code> used in the template literal in #6 above. Also, I often use <code>\\n<\/code> to insert a new line and improve readability.<\/p>\n\n\n\n<h2>Colors!<\/h2>\n\n\n\n<p>If you&#8217;re outputting a lot of logs in the console, it can be useful to have some of them popping out. This can be done by adding a bit of CSS in your console with the substitution string<code> %c<\/code> :<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ 7. Adding colors\nconsole.log('%c Important debug', 'color: red; font-weight: bold;');\n\n\/\/ 8. Using colors, string substitution and template literals\nconst step = 1;\nconst success = true;\nconst msg = (success) ? 'success' : 'error';\nconst msgColor = (success) ? 'green' : 'red';\nconsole.log('%c Debug %c - Step %i: %c%s', 'background: FireBrick; color: white; font-weight: bold', 'font-weight: bold', step, `color: ${msgColor}`, msg);<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"64\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_color-1024x64.png\" alt=\"JS Console log colors\" class=\"wp-image-656\" srcset=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_color-1024x64.png 1024w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_color-300x19.png 300w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_color-768x48.png 768w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_color.png 1028w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The console output of #7 and #8<\/figcaption><\/figure>\n\n\n\n<p>As #8 is a bit complex and a picture is worth a thousand words, here is a graphical explanation of what is going on with the string substitutions and template literals: <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"185\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation-1024x185.png\" alt=\"JS Console log explained\" class=\"wp-image-654\" srcset=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation-1024x185.png 1024w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation-300x54.png 300w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation-768x139.png 768w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation-1536x278.png 1536w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_debug_explanation.png 1957w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>Details of #8: string substitutions and template literals<\/figcaption><\/figure>\n\n\n\n<p>&#x26a0;&#xfe0f; Be careful not to add too many colors or you may end up with a headache and that will be rather counterproductive&#8230;<\/p>\n\n\n\n<h2>Table Display<\/h2>\n\n\n\n<p>Finally, you can display objects as a table to see all your data at a glance. It works perfectly if the objects have the same attributes, but it works also for objects with different attributes. In that case, a new column will be created for each attribute. So, keep in mind not to mix drastically different objects, or you will end up with a very large unreadable table.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const fruits  = {'name': 'Strawberry', 'color': 'red', 'size': 'small', 'image': '&#x1f353;'};\nconst veggies = {'name': 'Broccoli', 'color': 'green', 'size': 'medium', 'image': '&#x1f966;'};\n\n\/\/ 9. Displaying objects in a table (same attributes)\nconsole.table([fruits, veggies]);\n\n\/\/ 10. Displaying objects in a table (different attributes)\nconst meat = {'name': 'Chicken', 'weight': '2kg'};\nconsole.table([fruits, veggies, meat]);<\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"262\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_tables-1024x262.png\" alt=\"JS Console Tables\" class=\"wp-image-657\" srcset=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_tables-1024x262.png 1024w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_tables-300x77.png 300w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_tables-768x196.png 768w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_tables.png 1322w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>The console output of #9 and #10<\/figcaption><\/figure>\n\n\n\n<h2>Going further<\/h2>\n\n\n\n<p>To know more about JavaScript console methods, have a look at the full <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/console\" target=\"_blank\" rel=\"noreferrer noopener\">console documentation<\/a>. <br>And if you need color inspiration, this is a cheat sheet of <a href=\"https:\/\/www.w3schools.com\/colors\/colors_names.asp\" target=\"_blank\" rel=\"noreferrer noopener\">the HTML color names supported by all browsers<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"629\" src=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-1024x629.png\" alt=\"HTML Colors \" class=\"wp-image-658\" srcset=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-1024x629.png 1024w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-300x184.png 300w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-768x472.png 768w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-1536x944.png 1536w, http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_colors-2048x1259.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption>HTML Color Names<\/figcaption><\/figure>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>&#x1f449; You can find all the examples above (and play with them) on the dedicated Codepen: <a href=\"https:\/\/codepen.io\/strawberrycode\/pen\/dyvQqGd\" target=\"_blank\" rel=\"noreferrer noopener\">JS Console.log<\/a>.<\/p>\n\n\n\n<div style=\"height:50px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Feel free to\u00a0<a href=\"https:\/\/www.buymeacoffee.com\/strawberrycode\" target=\"_blank\" rel=\"noreferrer noopener\">buy me a coffee (or tea)<\/a>\u00a0if you found this article useful &#x1f609;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you are working in web development, you have probably encountered JavaScript at some point. As the following chart shows, it has been a dominating language for many years now, and still holds a strong position, probably due to the large number of frameworks using it (Angular, Backbone, Node, React, Vue.. to name a few). Then you are probably familiar with the famous logging method: console.log(). But, are you using it to its full potential ? Here is a glimpse of a few powerful hacks to debug JavaScript. Logging Objects Let&#8217;s dive directly into the core of the console with &hellip; <a href=\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript console.log: Next Level Debugging<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":648,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[115],"tags":[130,120,129],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>JavaScript console.log: Next Level Debugging - StrawberryCode<\/title>\n<meta name=\"description\" content=\"JavaScript is the most popular web language. You surely know console.log, but are you using its debug functionalities to their fullest?\" \/>\n<link rel=\"canonical\" href=\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript console.log: Next Level Debugging - StrawberryCode\" \/>\n<meta property=\"og:description\" content=\"JavaScript is the most popular web language. You surely know console.log, but are you using its debug functionalities to their fullest?\" \/>\n<meta property=\"og:url\" content=\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\" \/>\n<meta property=\"og:site_name\" content=\"StrawberryCode\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-14T14:24:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-05T14:38:35+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_log.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1286\" \/>\n\t<meta property=\"og:image:height\" content=\"860\" \/>\n<meta name=\"twitter:label1\" content=\"Estimated reading time\">\n\t<meta name=\"twitter:data1\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"StrawberryCode\",\"description\":\"Fruit for Thought\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/strawberrycode.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_log.png\",\"contentUrl\":\"http:\/\/strawberrycode.com\/blog\/wp-content\/uploads\/2021\/06\/js_console_log.png\",\"width\":1286,\"height\":860,\"caption\":\"JS Console.log\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/#webpage\",\"url\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\",\"name\":\"JavaScript console.log: Next Level Debugging - StrawberryCode\",\"isPartOf\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/#primaryimage\"},\"datePublished\":\"2021-06-14T14:24:59+00:00\",\"dateModified\":\"2021-07-05T14:38:35+00:00\",\"author\":{\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\"},\"description\":\"JavaScript is the most popular web language. You surely know console.log, but are you using its debug functionalities to their fullest?\",\"breadcrumb\":{\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/\",\"url\":\"https:\/\/strawberrycode.com\/blog\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\",\"url\":\"http:\/\/strawberrycode.com\/blog\/javascript-console-log\/\",\"name\":\"JavaScript console.log: Next Level Debugging\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/strawberrycode.com\/blog\/#\/schema\/person\/c328d959959928f47281d7a0ec779e2a\",\"name\":\"StrawberryCode\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/647"}],"collection":[{"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":10,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":674,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/posts\/647\/revisions\/674"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media\/648"}],"wp:attachment":[{"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/strawberrycode.com\/blog\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}