Exploring the Browser Console: Practical Examples for Web Developers
For a long time my primary JavaScript debugging methods consisted of basically console.log() and console.error(). Once I learned to leverage the other browser console object's methods my JavaScript game definitely took a giant leap forwarding.
Below are 8 ways I utilize the console window object when working through JavaScript projects and scripts and practical usage of each.
1. console.log() - General Logging
Intent: Output general information for debugging or tracking program flow.
Practical Example: Use console.log to inspect variable values:
const user = { name: 'Alice', age: 30 };
console.log('User details:', user);
Example Output:
2. console.error() - Highlight Errors
Intent: Display error messages in the console with a stack trace. console.error() has different formatting helping it standout typically with a red background and error icon.
Practical Example: Log errors when API calls fail:
fetch('/api/data')
.then(response => {
if (!response.ok) throw new Error('Failed to fetch data');
})
.catch(error => console.error('Fetch error:', error));
Example Output:
3. console.warn() - Warn About Potential Issues
Intent: Highlight non-critical issues or deprecations. console.warn() has different formatting helping it standout. Typically a yellow background with a warning icon.
Practical Example: Warn about invalid user input:
const userInput = '';
if (!userInput) console.warn('User input is empty. Default value will be used.');
Example Output:
4. console.table() - Display Data in a Table Format
Intent: Visualize arrays or objects in a tabular format for clarity. Helpful with visualizing large array of objects.
Practical Example: Inspect API response data:
const data = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
];
console.table(data);
Example Output:
5. console.group() and console.groupEnd() - Organize Logs into Groups
Intent: Group related logs for better readability.
Practical Example: Debug API responses and metadata:
console.group('API Response');
console.log(`Status: ${response.status}`);
console.log(`Data:`, data);
console.groupEnd();
Example Output:
6. console.time() and console.timeEnd() - Measure Performance
Intent: Track how long a block of code takes to execute. Good for performance testing and blocking time.
Practical Example: Optimize a sorting function:
console.time('Sort Timer');
const arr = [5, 3, 8, 1, 2, 50000000, 192, 50, 21, 159999, 7, 9,0];
arr.sort();
console.timeEnd('Sort Timer');
Example Output:
7. console.assert() - Test Assumptions
Intent: Log messages only when a condition is false. Helpful when you want to conditionally render an error message. Typically has a red background with a warning icon and the text "Asserting failed."
Practical Example: Validate user permissions:
const hasAccess = false;
console.assert(hasAccess, 'Access denied for the user.');
Example Output:
8. console.trace() - Show the Call Stack
Intent: Display the call stack to trace function calls. Trace the steps leading to the console.trace() call, which is helpful when data is tracked through multiple function calls.
Practical Example: Debug where a function was invoked:
function fetchData() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => showData(json))
}
function showData(fData) {
console.trace('Show data', fData);
}
const fData = fetchData();
Example Output:
9. console.count() - Count Log Occurrences
Intent: Count how many times a line of code has been executed. Helpful in instances where you need to count the number of times a function has been called or a loop has looped.
Practical Example: Count loops:
const array1 = ['a', 'b', 'c', 'd'];
for (const element of array1) {
console.count()
}
Example Output:
10. console.clear() - Clean Up the Console
Intent: Clear cluttered logs during testing.
Practical Usage:
console.clear();
Top comments (0)