Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM console.error() Method
The HTML DOM console.error() method is used for writing an error message to the browser's console. This method is very useful for testing and debugging purposes, allowing developers to log error information that can be viewed in the browser's developer tools.
Syntax
Following is the syntax for console.error() method −
console.error(message)
Parameters
The console.error() method accepts the following parameter −
-
message − A JavaScript string, object, or any value that needs to be displayed as an error message in the console. This parameter is required.
Return Value
The console.error() method does not return any value. It simply displays the error message in the browser's console.
Example − Logging an Object as Error
Following example demonstrates how to use console.error() to log an object as an error message −
<!DOCTYPE html>
<html>
<head>
<title>console.error() Method</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>console.error() Method</h1>
<p>Click the below button to write object as error message on the console</p>
<button type="button" onclick="errMessage()" style="padding: 10px 20px; font-size: 16px;">ERROR</button>
<p>Press F12 key to view the error message in the console</p>
<script>
function errMessage(){
var errObj = { Message:"ERROR has been caused", Value:"NEGATIVE"};
console.error(errObj);
}
</script>
</body>
</html>
The output displays a button on the page. When clicked, it logs an error object to the console −
console.error() Method
Click the below button to write object as error message on the console
[ERROR]
Press F12 key to view the error message in the console
(In console: {Message: "ERROR has been caused", Value: "NEGATIVE"})
Example − Logging String Messages
Following example shows how to log different types of error messages including strings and formatted messages −
<!DOCTYPE html>
<html>
<head>
<title>console.error() String Messages</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Different Error Message Types</h1>
<button onclick="stringError()" style="padding: 8px 15px; margin: 5px;">String Error</button>
<button onclick="numberError()" style="padding: 8px 15px; margin: 5px;">Number Error</button>
<button onclick="multipleParams()" style="padding: 8px 15px; margin: 5px;">Multiple Parameters</button>
<p>Open developer tools (F12) to see error messages in console</p>
<script>
function stringError() {
console.error("This is a simple string error message");
}
function numberError() {
var errorCode = 404;
console.error("Error Code:", errorCode);
}
function multipleParams() {
console.error("User:", "John Doe", "Action:", "Failed Login", "Time:", new Date());
}
</script>
</body>
</html>
Each button logs different types of error messages to the console. The console.error() method can accept multiple parameters and various data types.
Example − Error with Stack Trace
Following example demonstrates how console.error() can be used with Error objects to display stack traces −
<!DOCTYPE html>
<html>
<head>
<title>console.error() with Stack Trace</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Error with Stack Trace</h1>
<button onclick="triggerError()" style="padding: 10px 20px; background-color: #ff6b6b; color: white; border: none;">Trigger Error</button>
<p>Click the button and check console for detailed error information</p>
<script>
function triggerError() {
try {
// This will cause an error
var result = undefinedFunction();
} catch (error) {
console.error("An error occurred:", error);
console.error("Error message:", error.message);
console.error("Stack trace:", error.stack);
}
}
</script>
</body>
</html>
This example shows how to log actual Error objects with their stack traces, providing detailed debugging information in the console.
Key Points
-
The
console.error()method displays messages in red color with an error icon in most browser consoles. -
It accepts multiple parameters and can log strings, objects, arrays, and other data types.
-
When logging Error objects, it automatically displays the stack trace for easier debugging.
-
Error messages have higher priority in console filtering, making them easier to spot during debugging.
-
The method is available in all modern browsers and is part of the Console API.
Browser Compatibility
The console.error() method is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 8+. It is part of the standard Console API specification.
Conclusion
The console.error() method is an essential debugging tool that displays error messages in the browser console with distinctive red styling and error icons. It accepts various data types and automatically provides stack traces for Error objects, making it invaluable for debugging JavaScript applications.
178 Views
