The Chrome Developer Toolbar console¹ is a powerful and versatile tool that is essential for web developers .
Here is an overview of its main properties and features:
1. Viewing Messages
The console allows you to view logged messages using commands such as console.log(), console.warn(), console.error(), and console.info(). These commands help you monitor code execution and diagnose problems. [read more to find out all the uses of the object console😊]
2. Running JavaScript
The console also acts as a REPL (Read-Eval-Print Loop), allowing you to execute JavaScript directly. This is useful for testing code snippets, manipulating the DOM, and interacting with the page in real time.
3. Filtering and Grouping Messages
You can filter messages by type (errors, warnings, logs, etc.) and group them for better readability. The console also offers the option to disable grouping of similar messages.
4. Event Monitoring
The console can monitor DOM events and function calls using commands such as monitorEvents() and unmonitorEvents(). This is especially useful for debugging complex interactions.
5. Network Request Recording
The console can log XMLHttpRequest and Fetch requests, allowing you to examine network interactions directly from the console.
Viewing Messages in Chrome Console (object console)
Let's now dive deeper into the features of the console, which are useful for debugging and monitoring JavaScript code.
console.log()
This command is used to log informational messages. It is the most common method of displaying debugging data and messages in the console. For example:
console.log('This is a log message');
console.warn()
Used to record warnings. Warning messages appear with a warning icon and are stylized in yellow to attract attention. For example:
console.warn("check for latest library version");
console.error()
This command is used to log errors. Error messages appear with an error icon and are stylized in red. For example:
console.error('variable not valued');
console.info()
Similar to console.log(), but styled differently to indicate that the message is informational. For example:
console.info('google maps version 3.40');
console.trace()
Using console.trace(), you can record a stack trace, which shows the sequence of function calls that led to the execution of a particular point in the code. For example:
console.trace('Stack trace')
Practical Example
Before discovering the other methods it consoleprovides, here is an example that uses the different commands just described:
console.log('Starting debugging');
console.info('Additional information');
console.warn( 'Warning: Possible problem');
console.error('Error detected');
console.trace('Call trace');
Let's now move on to advanced uses of console.
Advanced features of console
console.dir()
The command console.dir() displays a JSON representation of a specified object, allowing you to explore the object's properties in more detail. This is especially useful for inspecting complex objects such as DOM elements.
console.dir(document.body);
var myJsonObj = JSON.parse('{ "name":"Arnold", "surname": "Schwarzenegger", "movies": ["Hercules in New York", "Terminator", "Commando", "Predator", "Last Action Hero"]}')
console.dir(myJsonObject)
console.table()
The command console.table() displays data in tabular format, making it easier to read and analyze arrays of objects. You can specify which columns to display.
Example:
const people = [
{firstname : 'Alan' , lastname : 'Turing' , profession : 'Mathematician'},
{firstname : 'Tim' , lastname : 'Berners-Lee' , profession : 'Computer scientist'},
{firstname : 'John' , lastname : 'Nash' , profession : 'Mathematician'}
];
console.table(people);
console.table(people, ["name"]); //display only the name property
console.assert()
The command console.assert() logs an error message to the console if a specified expression evaluates to false. This is useful for testing conditions while code is running.
Example:
const x = 5 ;
console.assert(x > 10 , 'x is not greater than 10');
console.count()
The command console.count() keeps track of the number of times it is called with a specified label. It is useful for counting how many times a certain block of code is executed.
Example — This command will display the number of times the counter has been incremented:
console.count('Counter');
console.count('Counter');
console.group() console.groupCollapsed() and console.groupEnd()
These commands allow you to group messages in the console, improving organization and readability.
Example:
console.group('Message Group');
console.log('Message 1');
console.log('Message 2');
console.groupEnd();
console.groupCollapsed() is the same as console.group(), except the group is initially collapsed when it's logged to the Console.
console.time() and console.timeEnd()
Time command is used to track the computation time, really useful for performance analysis or troubleshooting:
// Timing code execution
console.time('Timer');
for (let i = 0; i < 1000000; i++) {
// time consuming computation
}
console.timeEnd('Timer');
A bit of cleaning — console.clear()
If after all these logs you need to clean up, you can use console.clear() but consider that:
- If 'Preserve Log' is enabled,
console.clear()is disabled. Alternatively, you can clear the console by clicking on the icon🚫
Remember that…
Message Filtering
The console allows you to filter messages by type (log, warning, error, etc.), making it easy to find specific types of messages. This is especially useful when working with large amounts of output.
Viewing the Source Code
By clicking on a message in the console, you can view the source code that generated that message. This helps you quickly identify where in the code there is a problem.
Follow me #techelopment
Medium: @techelopment
Dev.to: Techelopment
facebook: Techelopment
instagram: @techelopment
X: techelopment
telegram: @techelopment_channel
youtube: @techelopment
whatsapp: Techelopment
References
[1] Console Features Reference | Chrome DevTools | Chrome for Developers
Top comments (0)