diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-examples.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-examples.png index 07fb1999df..380c692f07 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-examples.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-examples.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups-expanded.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups-expanded.png index 760d66d231..22ad0c701c 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups-expanded.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups-expanded.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups.png index 8ea6b49809..7f10e32335 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-groups.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers-expanded.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers-expanded.png index 6996dc64e4..400ecbd447 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers-expanded.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers-expanded.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers.png index 43470c3918..3f60724ca3 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-specifiers.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table-filtered.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table-filtered.png index 38d5c2d8cd..4a9c8f9286 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table-filtered.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table-filtered.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table.png index 006f191205..6690225545 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-table.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types-expanded.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types-expanded.png index fced6cf8c5..6dfaf577aa 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types-expanded.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types-expanded.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types.png b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types.png index d242cb6396..8d85e4e863 100644 Binary files a/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types.png and b/microsoft-edge/devtools-guide-chromium/console/console-log-images/console-log-types.png differ diff --git a/microsoft-edge/devtools-guide-chromium/console/console-log.md b/microsoft-edge/devtools-guide-chromium/console/console-log.md index 0ce561f11c..e7dd4cd572 100644 --- a/microsoft-edge/devtools-guide-chromium/console/console-log.md +++ b/microsoft-edge/devtools-guide-chromium/console/console-log.md @@ -5,26 +5,28 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 04/13/2021 +ms.date: 09/27/2023 --- # Log messages in the Console tool Ever since browsers started to offer developer tools, the **Console** is a favorite, because in most programming courses, you learn to output some kind of `print` or `log` command, to gain insights about what happens in your code. -Before DevTools, for JavaScript, you were limited to an `alert()` or `document.write()` statement to debug in the browser. With DevTools, to log information in the **Console**, many methods of the `Console` object are available in the **Console**, listed in [Console object API Reference](api.md). +Before DevTools, for JavaScript, you were limited to an `alert()` or `document.write()` statement to debug in the browser. With DevTools, to log information in the **Console**, many methods of the `Console` object are available in the **Console**, listed in [Console object API Reference](./api.md). -## Console messages examples: log, info, error, and warn + +## Levels of Console log messages: console.log, .info, .error, and .warn -The `Console` object has several levels of message-logging methods: +The `console` object has methods to log various levels of messages: -* `console.log` - Prints the text to the console as a log message. -* `console.info` - Prints the text to the console as an informational message. -* `console.error` - Prints the text to the console as an error message. -* `console.warn` - Prints the text to the console as a warning. +* `console.log` - Prints the text to the **Console** as a log message. +* `console.info` - Prints the text to the **Console** as an informational message. +* `console.error` - Prints the text to the **Console** as an error message. +* `console.warn` - Prints the text to the **Console** as a warning. -### Example code + +#### Example code for levels of Console log messages ```javascript // prints the text to the console as a log message @@ -41,17 +43,18 @@ console.warn('This is a warning') ``` -### Demo webpage: Console messages examples: log, info, error, and warn + +#### Demo webpage for levels of Console log messages -To try using the logging functions in the Console: +To try using the logging functions in the **Console**: 1. Open the demo webpage [Console messages examples: log, info, error, and warn](https://microsoftedge.github.io/Demos/devtools-console/logging-examples.html) in a new window or tab. -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). DevTools opens, with the **Console** open in main toolbar. +1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). - The demo page has already sent the above log messages to the **Console**: + DevTools opens, with the **Console** open in the Activity Bar. The demo page has already sent the above log messages to the **Console**: ![The Console shows the messages from different log APIs](./console-log-images/console-log-examples.png) @@ -65,12 +68,13 @@ To try using the logging functions in the Console: -## Different types of log entries and variables +## Logging various types of values -Instead of log text, you can send any valid JavaScript or DOM references to the **Console**. The **Console** appropriately displays the various types of JavaScript values that you send to it from console log messages. The **Console** displays a filtered and formatted representation of the results. +Instead of logging text values, you can send any valid JavaScript or DOM references to the **Console**. The **Console** appropriately displays the various types of JavaScript values that you send to it from console log messages. The **Console** displays a filtered and formatted representation of the results. -### Example code + +#### Example code for logging various types of values ```javascript let x = 2; @@ -93,7 +97,8 @@ console.log(w3techs); ``` -### Demo webpage: Logging different variable types + +#### Demo webpage for logging various types of values To use the `log` function to display different variable types: @@ -101,13 +106,13 @@ To use the `log` function to display different variable types: 1. Open the demo webpage [Console messages examples: Logging different types](https://microsoftedge.github.io/Demos/devtools-console/logging-types.html) in a new window or tab. -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). DevTools opens, with the **Console** open in main toolbar. +1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). - Each type of result is displayed in a different way. + DevTools opens, with the **Console** open in the Activity Bar, displaying several types of values. Each type of result is displayed in a different way. -1. Click the triangles to toggle the information and analyze each result in more detail. +1. Expand each output entry to analyze each result in more detail. - Suppose you get many log messages that only display a value, but you don't know where the value originated. For that case, we added curly braces `{}` around the `x` variable, to provide better grouping. + The second log message in the example code uses curly braces `{}` around the `x` variable, to output the name of the variable in addition to the value of the variable. This syntax logs an object that contains a single property named `x`, instead of logging the value of `x` only. Logging variables of different types in the **Console**: @@ -117,24 +122,28 @@ To use the `log` function to display different variable types: ![Log variables of different types in the console with expanded extra information](./console-log-images/console-log-types-expanded.png) -1. Copy and paste any of the examples into the **Console**, and then press **Enter**. +1. Copy and paste any of the examples from the rendered webpage into the **Console**, such as `console.log({x})`, and then press **Enter**. - Output is displayed in the **Console**, below the code that you entered. + Formatted output is displayed in the **Console**, below the code that you entered. -## Format and convert values with specifiers +## Logging values using format specifiers + +A feature of all the log methods is that you can use format specifiers in your log statement's message. Format specifiers are part of a log message, and start with a percentage sign (`%`) character. + +Use format specifiers to log certain values in different formats, and to convert between formats: -A special feature of all the log methods is that you can use specifiers in your log statement's message. Specifiers are part of a log message and start with a percentage sign (`%`) character. Specifiers allow you to log certain values in different formats and even convert between formats. +* `%s` logs output as Strings. +* `%i` or `%d` logs output as Integers. +* `%f` logs output as a floating-point value. +* `%o` logs output as an expandable DOM element. +* `%O` logs output as an expandable JavaScript object. +* `%c` allows you to style a message by using CSS properties. -* `%s` logs as Strings. -* `%i` or `%d` logs as Integers. -* `%f` logs as a floating-point value. -* `%o` logs as an expandable DOM element. -* `%O` logs as an expandable JavaScript object. -* `%c` allows you to style you message with CSS. -### Example code + +#### Example code for logging values using format specifiers ```javascript // logs "10x console developer" @@ -157,47 +166,46 @@ console.log('%cImportant message follows','color:red;font-size:40px') ``` -### Demo webpage: Logging with specifiers + +#### Demo webpage for logging values using format specifiers 1. Open the demo page [Console messages examples: Logging with specifiers](https://microsoftedge.github.io/Demos/devtools-console/logging-with-specifiers.html) in a new tab or window. -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). DevTools opens, with the **Console** open in main toolbar. +1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). - The webpage has already populated the **Console** with output. + DevTools opens, with the **Console** open in the Activity Bar. The webpage has already populated the **Console** with output. - The first example demonstrates that the order of replacement of specifiers is the parameter order following the string: + The first example demonstrates that the order of replacement of format specifiers is the parameter order following the string: ```javascript console.log('%ix %s developer', 10, 'console'); // logs "10x console developer" ``` -1. Click the expander triangles in the output results, to expand and see the data that's output by the above `log` statements that are in the webpage. +1. Click the expander triangles in the output results, to expand the data that's output by the above `log` statements that are in the webpage. 1. If necessary, press **F5** to reload the page and re-populate the **Console** output. - Specifiers are used to log, format, and convert values: + Format specifiers are used to log, format, and convert values: ![Use specifiers to log and convert values](./console-log-images/console-log-specifiers.png) -1. In the **Console**, click triangles to expand the log results, to see the difference between the `%o` and `%O` specifiers. +1. In the **Console**, on the two `body` entries, click the triangles to expand the log results, to see the difference between the `%o` and `%O` format specifiers. - The body of the webpage is either displayed as an expandable DOM node, or as a full list of all JavaScript properties on the webpage body: + The `body` element of the webpage is either displayed as an expandable DOM node (`console.log('%o', document.body);`), or as a full list of all JavaScript properties on the `body` element (`console.log('%O', document.body);`): - ![Expand the results displays the difference between the %O and %o specifier - the body is either displayed as an expandable DOM node or as a full list of all JavaScript properties on the webpage body](./console-log-images/console-log-specifiers-expanded.png) - -1. Copy and paste the above example code listing into the **Console**, and then press **Enter**. - - Output is displayed in the **Console**, below the code that you entered. + ![Results expanded to display the difference between the %O and %o specifiers](./console-log-images/console-log-specifiers-expanded.png) -## Group log messages +## Grouping log messages -If you log a lot of information, you can use the `group` and `groupCollapsed` methods to display log messages as expandable and collapsible groups in the **Console**. Groups can be nested and named to make the data much easier to understand. +If you log a lot of information, you can use the `group` and `groupCollapsed` methods to display log messages as expandable and collapsible groups in the **Console**. Groups can be nested and named, to make the data easier to understand. -### Example code + + +#### Example code for grouping log messages ```javascript // Example 1: Nested groups, with the inner group hidden (collapsed): @@ -212,6 +220,7 @@ console.log('(Frankie & Benjy)'); console.groupEnd("Hidden"); console.groupEnd("Passengers: Heart of Gold"); + // Example 2: let technologies = { "Standards": ["HTML", "CSS", "SVG", "ECMAScript"], @@ -225,38 +234,32 @@ for (tech in technologies) { ``` -### Demo webpage: Grouping logs - -In this example, the group names are optionally generated. + +#### Demo webpage for grouping log messages 1. Open the demo page [Console messages examples: Grouping logs](https://microsoftedge.github.io/Demos/devtools-console/logging-with-groups.html) in a new tab or window. -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). DevTools opens, with the **Console** open in main toolbar. +1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). - The webpage has already populated the **Console** with output. - - Logging lots of values as groups: + DevTools opens, with the **Console** open in the Activity Bar. The webpage has already populated the **Console** with output, logging many values as groups: ![Log lots of values as groups](./console-log-images/console-log-groups.png) -1. In the Console output, expand and collapse each of the sections: +1. In the **Console** output, expand or collapse the sections: ![Each group can be expanded and collapsed](./console-log-images/console-log-groups-expanded.png) -1. Copy and paste the above example code listing into the **Console**, and then press **Enter**. - - Output is displayed in the **Console**, below the code that you entered. - -## Display complex data as tables +## Displaying data as tables -The `console.table()` method logs complex data not as a collapsible and expandable object, but as a table that you can sort using different headers. A sorted table makes it much easier for people to review the information. +As an alternative to outputting expandable objects, the `console.table()` method logs data as a table that you can sort by using the table headers, to make it easier to view the information. -### Example code + +#### Example code for displaying complex data as tables ```javascript let technologies = { @@ -276,10 +279,11 @@ console.log(bodyDimensions); console.table(bodyDimensions); ``` -The second portion of the code listing from the demo page is shown further down. +This code in the demo webpage produces the first four `console` outputs, with four line numbers shown on the right side of the **Console**. -### Demo webpage: Using table formatting + +#### Demo webpage for displaying complex data as tables To show complex data as tables: @@ -287,31 +291,27 @@ To show complex data as tables: 1. Open the demo page [Console messages examples: Using table](https://microsoftedge.github.io/Demos/devtools-console/logging-with-table.html) in a new window or tab. -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). DevTools opens, with the **Console** open in main toolbar. +1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). - The webpage has already populated the **Console** with output. + DevTools opens, with the **Console** open in the Activity Bar. The webpage has already populated the **Console** with output. 1. In the **Console**, click the expander triangles. -1. Click the expander triangles. Displaying data with `console.table` makes the data easier to read: - - ![Display data with console.table to make it easier to read](./console-log-images/console-log-table.png) - -1. Copy and paste the above code listing into the **Console**, and then press **Enter**. - - Output is displayed in the **Console**, below the code that you entered. + The data is output by using `console.table`, which makes the data easier to read: + ![Display data with console.table to make it easier to read](./console-log-images/console-log-table.png) -The output of `console.table` has a table format. The output has a table format not only when the output is displayed in the **Console**, but also, if you copy and paste a table into Microsoft Excel, Microsoft Word, or any other product that supports tabular data, the structure of the output remains intact. +The output of `console.table` has a table format. If you copy and paste a table from the **Console** into an app that supports tabular data, such as Microsoft Excel or Microsoft Word, the structuring of the output as rows and columns is preserved. -#### Specify an array of columns for each property, for readability + +#### Specifying an array of properties to display as columns If the data has named parameters, the `console.table()` method also allows you to specify an `Array` of columns for each property to display as a second parameter. The following example shows how to specify an array of columns that is more readable: -##### Example code - -This code is from the same demo webpage as above. +The remaining code in the demo webpage shows: +1. How to output all the properties as columns, for the selected elements. +1. How to specify an array only of specified properties as columns, for the selected elements. ```javascript // get all the h1, p and script elements @@ -319,22 +319,27 @@ let contentElements = document.querySelectorAll(':is(h1,p,script)'); // show the elements as an unfiltered table console.table(contentElements) // show only relevant columns -console.table(contentElements,['nodeName', 'innerText', 'offsetHeight']) +console.table(contentElements, ['nodeName', 'innerText', 'offsetHeight']) ``` -This code filters the information that the `console.table()` method displays. - -The code provides an array of properties to display, as a second parameter: +This code produces the final two `console` outputs, with two line numbers shown on the right side of the **Console**: +* `logging-with-table.html:37` +* `logging-with-table.html:39` ![Filtering information that 'console.table' displays, and providing an array of properties to display, as a second parameter](./console-log-images/console-log-table-filtered.png) -1. Copy and paste the above code listing into the **Console**, and then press **Enter**. +The final call to `console.table` filters the information that the `console.table()` method displays, by specifying an array of properties to display, as a second parameter. - Output is displayed in the **Console**, below the code that you entered. + +## Log statements vs. breakpoint debugging and Live Expressions + +You might be tempted to use the `log` methods as your main means to debug webpages, because log methods are simple to use. However, consider the result of any `console.log()` request: released products shouldn't use any `log` statement that was used for debugging, because it could reveal inside information to people. And excess noise is created in the **Console**. + +So, instead of `log` statements, try using [Breakpoint Debugging](../javascript/breakpoints.md) or [Live Expressions](live-expressions.md). You may find that your workflows are more effective and you get better results. -### Log statements vs. breakpoint debugging and Live Expressions -You may be tempted to use the `log` methods as your main means to debug webpages, because log methods are simple to use. Consider the result of any `console.log()` request. Released products shouldn't use any `log` statement that was used for debugging, because it could reveal inside information to people. And the noise created in the **Console** is overwhelming. + +## See also -Instead of `log` statements, try using [Breakpoint Debugging](../javascript/breakpoints.md) or [Live Expressions](live-expressions.md). You may find that your workflows are more effective and you get better results. +* [Console object API Reference](./api.md)