 Do you know the console contains the collections of convenient functions for you to perform common tasks quicker? In this episode, we have Sophia to share with you some of these useful utilities API. Sophia? Hi, Jason. Hello everybody. Before we dive right into it, you should know that the tricks I'm going to share with you only work inside the Chrome DevTools console. Try to call them from your scripts is subtly futile. However, these tricks can boost your console magic. First off, the most useful shortcuts you can type into the console are the dollar sign shortcuts. For example, dollar underscore returns the value of the most recently evaluated expression. Let's evaluate 2 plus 2. The console shows you the result right away. Now to get to the previous value, you just need to type dollar underscore. You can refer to this value to compose a new expression. For example, add a number to the previous value and get your result. Moreover, you can refer to the last five DOM elements you selected in the elements panel. Let's click on the hat element first, then on the body element. To refer to the most recent element, type dollar zero. The console shows the body element, which is the most recent one. To refer to the previous element, type dollar one and get the hat element. The console remembers up to five elements and you can refer to them in reverse order by using numbers from zero to four. Did you know that there's a short alias for the query selector function? You can stop typing long commands like document dot carry selector. Instead, try the jQuery way. Just type dollar in the selector name as an argument to achieve the same result. The selector function returns the first element that matches the selector, but you can also specify a node to search the elements from. There's a second optional parameter for this. You can use shortcuts to specify a node with this parameter. Let's select an element in the DOM tree so we can refer to it. Now type dollar then the selector as the first argument and the shortcut to the current element as the second argument. You'll get the first matching element from the currently selected one. Likewise, there's a short alias for the query selector role function. It returns an area of all the elements that match the selector. The syntax is similar, but instead of just $1 sign, type two. This shortcut gets you all the SVG elements. Similarly, you can specify the node to search from. This shortcut gets you the SVG elements that belong to the main element. Want to select elements by their X path? There's a shortcut for that too. Just type dollar X and then as an argument the X path of the element. For example, this shortcut returns all the P elements on a page. Not sure how to construct an X path. You can right click on any element, copy its X path and feed it to the shortcut. Also, the console has a special query that retrieves all objects created by a constructor you specify. For example, type query objects followed by promise to discover all promise objects that you have on your page. By the way, there are some very useful console logging commands. Can you share them with us, Chaselin? Sure. Besides console.log, you can use dir and table to log arrays and objects to the console. Suppose we have this player object defined. We can use table to log its keys and values in the table form. Much easier to view, right? Table is the shortcut for the console.table function. Similarly, to clear the console, we can simply type the clear shortcut instead of console.clear. There is another DevTools Tips video about all the ways you can use the console to log things. Make sure you check that out. Alright, let's talk about how we can extract the object keys and values and copy them in one go. To get only the keys of an object, simply type keys and specify the object name. Here we can extract all the keys of our player object. Similarly, you can get just the object values by typing you guessed it values followed by the object name. Even better, if you want to copy the object values in one go, use the copy function to copy it to the clipboard. Now paste it wherever you want. Next, let's explore how you can monitor stuff from the console. Want to see all the event listeners registered on a button? Select the button in the elements panel. Then type get event listeners and refer to the selected button with the dollar shortcut. Aha! This button listens for the blur, focus and mounts events. Need to monitor a specific event? You can. Let's monitor a window-resize event. Type monitor events, then specify the window object and the resize event. Try resizing the window now. And voila! You can see the list of captured events in the console. When you're done, stop all monitoring on the window object with the unmonitor events command. In addition to events, you can also monitor function calls. Say you have this sum function on your page. Type monitor sum to log a message every time this function gets called. Let's trigger the sum call now. The console logs each function call along with the arguments. Don't forget to unmonitor the function when you're done. Thanks, Sophia. To learn more about the console utilities APIs, go to goo.gov slash devtools dash console dash utils. That's all. See you for the next DevTools Tips. Bye!