 Do you know there are more ways to write messages to the console than console.log? In this episode, Brahmos and I will walk you through the different APIs to log messages in the console. Eh? Brahmos! Brahmos! Brahmos! Hey everyone! During development, we can use console.log statements in our JavaScript code to log messages to the console. This way, we can leave certain clues to ourselves in order to understand what is happening internally. Let's dive in. First things first. To open the console in Chrome DevTools hit Ctrl Shift J on Linux and Windows or Command Option J on Mac. Any message that you log from within your JavaScript code will appear here in the console. In this demo, there's a console.log call attached to the first button. Every time you click the button, the message is logged to the console. The console will show the message along with the file and line number that was responsible for it. Not only is the console used for logging, it is also a REPL or language shell. It can take some JavaScript input, execute it and then return the result. The JavaScript you enter here can interact with the page you are currently on. So we can, for example, change the label on the first button there. Let's select the first button using Document.CurrySelector, set it in a text, hit return and yes, that totally worked! Now, back to logging things to the console. You can log messages at one of the three log levels. Info, warning or error. The console.log we have just used logs something at the info level. To log a message at the warning level, use console.warn and to log at the error level, use console.error. You'll notice that these messages are styled differently, so they are very easy to recognize. By default, the console will show messages of all levels, but we can change that. Using the filter dropdown, it's possible to have the console show only the messages for the selected levels. You can check these options on a rough one by one. Messages that don't match the filter will still be logged, but won't be shown. Finally, choose default to revert to the default selection of levels. Jessalyn, I remember there's another way to filter messages, right? Can you show us? Sure, sometimes you might want to filter the messages temporarily during debugging. You can use the console sidebar for that. Click on this little button on the left to toggle the console sidebar. Say you want to filter out all browser messages. You can click on user messages to just focus on those messages that came from the pages' JavaScript. Similarly, to view just the errors, click on the Errors tab. Notice the filter dropdown is disabled when the console sidebar is open. That makes sense, because we don't mix two filters. Close the sidebar and the filter dropdown is back. Hey brothers, we have too many console messages now. How can we clear them all? Oh, you can use console.clear for that. Invoke console.clear to clear the console. Clicking on the clear console button will also do. So far, we've only logged static strings, but the console can also log the contents of JavaScript variables. This button right here keeps track of the number of clicks on it. Every time you click it, the click-out variable is incremented and logged to the console. Logging is supported for all types of variables. Numbers, strings, arrays, objects, the console can handle them all. When logging an object, you can click open the leaves to further inspect them. Same with arrays. When you've got an array of similar objects, it may become difficult to keep the overview, though. To help us out, we can use the console table method, which logs an array of objects as a table. To force an object to be logged as JSON, use console.deer. Compare this logging of document.head using console.log first and then using console.deer. The first log message is a reference to the HTML element. The second one, the JSON representation of it. One thing I also like is the ability to group messages. To start a group, call console.group. It visually groups messages together until console.group end is called. By clicking the arrow next to the group label, it is possible to open or close the contents of a group. In addition to console.group, there is also console.group collapsed. It offers the same functionality as console.group, except that the group is initially collapsed. To change the text of a group in the console, pass a label as the first argument into console.group. Group nesting happens automatically when you call console.group when you're already in a group. And with that, we have covered the basics of logging to the console. There are a few more console methods available that you can use. Console.count and console.count reset, which counts and logs the number of times the function has been invoked. Console.trace to print the stack trace. And finally, console.time and console.time end to track the elapsed time between calling the two. Wow! Thanks, Brahmas. Where can we learn more about these logging functions? Sure. To learn more about the console APIs and DevTools, go to goo.gl slash devtools-console-api. Nice. I guess that's all. See you for the next DevTools tips. Bye!