![bg width:70% right:40%](https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png) # JavaScript `console`
in 5 minutes ## [@inje_lee](https://twitter.com/inje_lee) --- # Basic
commands ![width:480px height:480px bg right](https://media1.giphy.com/media/h4TP7zsNRxcXVG9L7T/giphy.webp?cid=d8f9e3b8w6oro4xkvpdzlzx3nrq01abnps5owfo4w1h300el&ep=v1_stickers_search&rid=giphy.webp&ct=s) --- # `console.log()` outputs an message to the console. ```js console.log("Hello, world!"); ``` ![height:100](https://cdn.markslides.ai/users/1/images/zQeMFV6uQQEYFWcK0qC5V) --- # `console.warn()` outputs a warning message to the console. ```js console.warn("Hello, world!"); ``` ![height:100](https://cdn.markslides.ai/users/1/images/JqZol4Euc9g7e80de-8Js) --- # `console.error()` outputs an error message to the console. ```js console.error("Hello, world!"); ``` ![height:100](https://cdn.markslides.ai/users/1/images/D4RW7g7nEDgsleBodoyDF) --- # `console.clear()` clear the console. ```js console.clear(); ``` ![height:100](https://cdn.markslides.ai/users/1/images/jwiH6-p2gR1qQNo5rc0vQ) --- # Advanced
commands ![width:480px height:480px bg right](https://media1.giphy.com/media/h4TP7zsNRxcXVG9L7T/giphy.webp?cid=d8f9e3b8w6oro4xkvpdzlzx3nrq01abnps5owfo4w1h300el&ep=v1_stickers_search&rid=giphy.webp&ct=s) --- # `console.dir()` displays a list of the properties of the specified JavaScript object. ```js console.dir({ a: "apple", b: "banana" }) ``` ![height:200](https://cdn.markslides.ai/users/1/images/R1RaDvkJ5rBL1Gc83bHvC) --- # `console.table()` displays tabular data as a table. ```js console.table(["apple", "banana", "carrot"]); ``` ![height:300](https://cdn.markslides.ai/users/1/images/rbqii0ZqWdMsFTO159TWH) --- # Measure execution time ```js console.time(); // starts a timer console.timeLog(); // logs the current value of a timer console.timeEnd(); // stops a timer ``` ![height:300](https://cdn.markslides.ai/users/1/images/Yx4rpNo5mndtWRyksNVrf) --- # References - MDN Web Docs: [JavaScript Console](https://developer.mozilla.org/en-US/docs/Web/API/console) - Google Chrome DevTools: [Console Overview](https://developers.google.com/web/tools/chrome-devtools/console) --- # Thank you! ## Made with ♥ by [@inje_lee](https://twitter.com/inje_lee)