When coding projects in JavaScript (or NodeJS), there are many tools to debug, but I still often debug in a farmer style that is using console.log. Those who have the same interest can refer to this article to be able to log in a more professional way
There are many types of logs besides console.log
Console is an object, and it has many different methods. Of which .log() is the most common.
Refer to the methods of the console object here: https://developer.mozilla.org/en-US/docs/Web/API/console .
When the code is in the browser, you can use one of the following log types, so that when displayed you can filter as you like: console.log() , console.info() , console.warn() , console.error() . These methods have the same usage but different display.
Filter display types of logs
Some types of logs and how to display them on Console
Or when displaying data as an array of objects, it can be displayed as a table using console.table (column width can be adjusted when there are many properties).
Log using console.log()
Log using console.table()
With NodeJS, if you view the log on Terminal, you will see the same (except console.table ). Can be combined with some other tools to filter the log, remove the log, … for example, use console.log() for quick debugging and console.info() to notify the terminal ( running server at port … ).
Console.log with CSS
This method only applies to the browser.
Instead of just console.log() as usual, we can add a bit of CSS to make it stand out (especially in case there are many logs written by many people without removing.
For example:
1 2 3 | <span class="token keyword">const</span> style <span class="token operator">=</span> <span class="token string">'color: red; font-size: 30px;'</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> <span class="token string">'%c'</span> <span class="token operator">+</span> <span class="token string">'Hello World'</span> <span class="token punctuation">,</span> style <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
This method is applied as in Facebook, turn on developer tools and you will see.
Console.log with color code
This method is applicable to both the browser and the Terminal, which is to use the color code (ANSI escape code) to log the text in color.
For example, the special symbol for red text is x1b[31m , the color ending is x1b[0m (reset). So the following log will print the word Hello World with 2 colors blue and red:
1 2 3 4 5 | <span class="token keyword">const</span> textRed <span class="token operator">=</span> <span class="token string">'x1b[31m'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> textGreen <span class="token operator">=</span> <span class="token string">'x1b[32m'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> reset <span class="token operator">=</span> <span class="token string">'x1b[0m'</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> textRed <span class="token operator">+</span> <span class="token string">'Hello'</span> <span class="token operator">+</span> reset <span class="token operator">+</span> <span class="token string">' '</span> <span class="token operator">+</span> textGreen <span class="token operator">+</span> <span class="token string">'World'</span> <span class="token operator">+</span> reset <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
There is also a red background color code of x1b[41m , so the following log will print blue text on a red background:
1 2 3 4 5 | <span class="token keyword">const</span> textGreen <span class="token operator">=</span> <span class="token string">'x1b[32m'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> bgRed <span class="token operator">=</span> <span class="token string">'x1b[41m'</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> reset <span class="token operator">=</span> <span class="token string">'x1b[0m'</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> textGreen <span class="token operator">+</span> bgRed <span class="token operator">+</span> <span class="token string">'Hello World'</span> <span class="token operator">+</span> reset <span class="token punctuation">)</span> <span class="token punctuation">;</span> |
You can use the following tool to quickly select colors: https://console-colors.vercel.app .
Log faster with VS Code’s User Snippets
VS Code allows users to create their own snippets depending on the language to code quickly. Taking advantage of this function, we can pre-write different log snippets so that we don’t have to waste time typing or remembering color codes (if we want the log to be colored). Now just type a few characters and VS Code will have suggestions.
To create snippets, go to File > Preferences > Configure User Snippets . Then select the language in which the snippet applies, for example javascript.json (JavaScript) .
Then follow the suggestions available in this file to configure. For example:
1 2 3 4 5 6 7 8 | <span class="token punctuation">{</span> <span class="token property">"Print to console"</span> <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"prefix"</span> <span class="token operator">:</span> <span class="token string">"cl"</span> <span class="token punctuation">,</span> <span class="token property">"body"</span> <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"console.log('--- ${1:DATA} ---', ${2:''});"</span> <span class="token punctuation">,</span> <span class="token string">"$0"</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token property">"description"</span> <span class="token operator">:</span> <span class="token string">"Log output to console"</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> |
So when the code just needs to type cl , there will be suggestions, press enter will display a log with tab stops (stops when clicking tabs, blacked out) and the last mouse pointer position. after typing the command ( $0 ):
Above is a simple snippet log example, you can customize it to your liking to make it look more dangerous when debugging.
Happy coding
Source: https://huydq.dev
Refer: