{"id":307,"date":"2019-06-21T23:23:29","date_gmt":"2019-06-21T23:23:29","guid":{"rendered":"https:\/\/www.regexseo.com\/blog\/?p=307"},"modified":"2023-02-07T16:32:10","modified_gmt":"2023-02-07T16:32:10","slug":"10-browser-console-hacks","status":"publish","type":"post","link":"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/","title":{"rendered":"10 Browser Console Hacks"},"content":{"rendered":"\n

Productivity in the workplace is always a major concern. We try all kinds of things to boost our productivity from using productivity apps like Asana,<\/a> Brief<\/a> or using the 2-Minute rule<\/a>, to bringing an entire garden to work<\/a>. So what about finding ways to improve our productivity<\/a> when we’re coding?<\/p>\n\n\n\n

If you\u2019re developing any kind of web-based project and your code isn\u2019t working as planned (which is most of the time) the first place you\u2019d check is your browser console.
<\/p>\n\n\n\n

The console is arguably the most used tool that a developer uses to debug their code. Still, most developers just use it to search for syntax errors and console logging. While these two are the most common uses, that\u2019s just a fraction of what the console is capable of.

Here are 10 of the top browser console hacks that will make you (or your dev\u2019s) life much easier:<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

1. Output errors using console.warning() & console.error()<\/h2>\n\n\n\n

I bet you\u2019re using console log as a debugger for your web app projects. Typical console.log()<\/span> gets the job, but sometimes, when you use it too often, the important stuff can get lost in the giant output of every message type – from critical errors to standard reminders. A better way to output errors and warnings is to use console.warning()<\/span> and console.error()<\/span>. This will make higher priority issues stand out from the rest of the output:<\/p>\n\n\n\n

\"console.warning()<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. Keep organized using console.group()<\/h2>\n\n\n\n

Sometimes when you\u2019re debugging statements within functions, you console log every stage of those functions. All of these console logs can get very unorganized. It gets hard to know where each of the logs came from. In these situations, it\u2019s a good choice to use console.group()<\/span>. This will group all of your logs into a group, that way it doesn\u2019t get mixed up with the rest of the logs.

Example: <\/p>\n\n\n\n

\"console.group()\"\/<\/figure>\n\n\n\n

Just using console.group()<\/span> will give you an uncollapsed view of the logs. If you want them to be collapsed and hidden use console.groupCollapsed()<\/span> instead.<\/p>\n\n\n\n

\"console.group()\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

3. Improve UX using console.time() & console.timeEnd()<\/h2>\n\n\n\n

Getting things served to users quickly is amazing for UX. If you\u2019re trying to optimize your functions to return data quickly, you should use this amazing console hack instead of the typical setTimeout() functions. Use console.time()<\/span> to start the timer and use console.timeEnd()<\/span> to end the timer. The time between those two commands will automatically be output in milliseconds. <\/p>\n\n\n\n

\"how<\/figure>\n\n\n\n

In some cases, you\u2019ll have a bunch of timers running together for multiple functions. To avoid confusion between which timer was started and ended, you can attach a label to the timers when you start them. Like this: console.time(\u2018function foo\u2019)<\/span>, and to end them use: console.timeEnd(\u2018function foo\u2019)<\/span>.<\/p>\n\n\n\n

If the function you\u2019re tracking has multiple stages and requires you to log time after completing each stage, you can use the following code:<\/p>\n\n\n\n

const start = Date.now();
\n\/\/ do some stuff
\nconsole.log(‘Your function took ‘ + (Date.now() – start) + ‘ millis’);<\/p>\n\n\n\n

Output in the console:<\/p>\n\n\n\n

\"console.time()<\/figure>\n\n\n\n

In here, you can use the same console log command after completion of each stage.
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. Debugging loops? Use console.count() & console.countReset<\/h2>\n\n\n\n

When it comes to debugging loops, I catch myself just console logging the iterator to keep track of the other logs from the loop. In these scenarios, it\u2019s better to use console.count()<\/span> in the loop, then to console log the iterator. Here\u2019s what the results should look like:<\/p>\n\n\n\n

\"console.count()<\/figure>\n\n\n\n

If you\u2019re tracking iterators in a nested loop, you can add a label like this: console.count(‘Loop 1’)<\/span>. This will help you to identify them in the mess of all other loops.<\/p>\n\n\n\n

In order to reset the counter back to 0 just use console.countReset()<\/span> or console.countReset(‘Loop 1’)<\/span><\/p>\n\n\n\n

TIP: Using console.count()<\/span> along with console.group()<\/span> will be a good combination while dealing with nested loops<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

5. Getting lost? Use console.trace()<\/h2>\n\n\n\n

If you use libraries in your code, it is very likely that you have run into errors that involve fixing something in the library\u2019s code. Sometimes these libraries can be very complex and hard to understand. Using console.trace()<\/span> can be very helpful to identify the stack of a statement. It gives a clear picture of all the functions that were used along with its location.<\/p>\n\n\n\n

Example:
function a() {
    function b() {
        function c() {
            console.trace(‘Where am I?’);
        }
        c();
    }
    b();
}
a(); <\/p>\n\n\n\n

\"console.trace()\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

6. Keep logs private with console.debug(‘Found Error 1’)<\/h2>\n\n\n\n

When your application is in the production phase, it\u2019s better not to show errors and your logs to the general public. But if you still want to track logs from your code and don\u2019t want the general public to see it, use console.debug(‘Found Error 1’)<\/span>. Console debug allows you to hide all the logs in the console unless the \u2018Verbose\u2019 level of logs are enabled from the \u2018All levels\u2019 filter. This filter is turned off by default so that all the logs will be hidden until \u2018Verbose\u2019 is turned on. <\/p>\n\n\n\n

\"console.debug('Found<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

7. Keep it neat with console.table()<\/h2>\n\n\n\n

In many cases, the log output of arrays or objects data is very ugly and hard to understand. With traditional console.log();<\/span> the results in the console looks like this:

Object<\/p>\n\n\n\n

\"console.table()\"\/<\/figure>\n\n\n\n

But if you use console.table()<\/span>, the console shows all the data in a very clear manner.<\/p>\n\n\n\n

\"console.table()\"\/<\/figure>\n\n\n\n

When logging Arrays as well, the results are more elegant and much easier to understand than direct console log.
<\/p>\n\n\n\n

\"console.table()\"\/<\/figure>\n\n\n\n

In my opinion, using console.table()<\/span> for nested arrays is the best use case. Because if you compare the result with traditional console log your results are much easier to understand.<\/p>\n\n\n\n

\"console.table()\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

8. Retrieve all interactive properties with console.dir()<\/h2>\n\n\n\n

console.dir()<\/span> is another handy tool. It helps you retrieve all the interactive properties you can use on a JS object. It\u2019s most useful when you\u2019re trying to access properties of a DOM element. This tool can provide which exact property you will be using.<\/p>\n\n\n\n

\"console.dir()\"\/<\/figure>\n\n\n\n

<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

9. Process if statements with console.assert()<\/h2>\n\n\n\n

In many cases, developers end up writing if statements only for console logging data. console.assert()<\/span> is a very great tool because it can process the if statement and will show an error in the console when the statement wasn\u2019t met. <\/p>\n\n\n\n

\n\nExample:
<\/p>\n\n\n\n

\"console.assert()\"\/<\/figure>\n\n\n\n

console.assert()<\/span> takes 2 parameters, (if statment, {label: \u2018info\u2019, label: \u2018info\u2019 \u2026..})
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

10. Add CSS styling to your console with %c<\/h2>\n\n\n\n

If you want your console to look fancy, it\u2019s possible to add CSS styling to it. To add the styling, use the traditional console.log()<\/span> but in the text add %c<\/span> before the characters you want to style. In the second parameter add the CSS you want to apply to the text.<\/p>\n\n\n\n

\"CSS<\/figure>\n\n\n\n

You can also apply different styles on different parts of text like this:<\/p>\n\n\n\n

\"CSS<\/figure>\n\n\n\n

This method is also used by companies like Facebook to give their users warnings like this:<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

This is just one of the many ways you could use this hack<\/p>\n\n\n\n

So there you have it! 10 Console hacks to hopefully make your life easier as you work through browsers. Did any of these make your life easier, or maybe you\u2019ve got a tip we didn\u2019t include. Let us know!<\/p>\n","protected":false},"excerpt":{"rendered":"

Productivity in the workplace is always a major concern. We try all kinds of things to boost our productivity from […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"yoast_head":"\n10 Browser Console Hacks - Regex SEO Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"10 Browser Console Hacks - Regex SEO Blog\" \/>\n<meta property=\"og:description\" content=\"Productivity in the workplace is always a major concern. We try all kinds of things to boost our productivity from […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/\" \/>\n<meta property=\"og:site_name\" content=\"Regex SEO Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-21T23:23:29+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-07T16:32:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2020\/09\/Group-571-2-1024x706.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\">\n\t<meta name=\"twitter:data1\" content=\"Shubh Sheth\">\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data2\" content=\"5 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\",\"url\":\"https:\/\/www.regexseo.com\/blog\/\",\"name\":\"Regex SEO Blog\",\"description\":\"Your SEO, SEM and SMM Information Source\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.regexseo.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2020\/09\/Group-571-2.jpg\",\"width\":1267,\"height\":873},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/#webpage\",\"url\":\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/\",\"name\":\"10 Browser Console Hacks - Regex SEO Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/#primaryimage\"},\"datePublished\":\"2019-06-21T23:23:29+00:00\",\"dateModified\":\"2023-02-07T16:32:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/8f0c3e071fde34cc78700c9856d6d598\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.regexseo.com\/blog\/10-browser-console-hacks\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#\/schema\/person\/8f0c3e071fde34cc78700c9856d6d598\",\"name\":\"Shubh Sheth\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.regexseo.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.regexseo.com\/blog\/wp-content\/uploads\/2019\/06\/IMG-20181221-WA0001-e1561156485625-150x150.jpg\",\"caption\":\"Shubh Sheth\"},\"sameAs\":[\"https:\/\/www.regexseo.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/307"}],"collection":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/comments?post=307"}],"version-history":[{"count":49,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions"}],"predecessor-version":[{"id":3392,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/posts\/307\/revisions\/3392"}],"wp:attachment":[{"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/media?parent=307"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/categories?post=307"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.regexseo.com\/blog\/wp-json\/wp\/v2\/tags?post=307"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}