 Did you just find out about Chrome DevTools? Congrats! It's a powerful tool for debugging and tackling web development issues. In this video, I will walk you through the basics to get you started with some learning resources and tips along the way. Let's go! First thing first, assessing Chrome DevTools is super easy. Right-click anywhere on the web page and select Inspect. In fact, there are more than 5 ways to open Chrome DevTools. If you want to learn them all, watch this video. Wow! There is a lot going on here. Don't panic! These are the 6 things you need to know for now, and we will cover them all. Let's start with the Inspect button. You can use these two to highlight any elements on the page and inspect the DOM in the Elements panel. But not only that, you can view its CSS in the Style tab or add a new style or change the color to deep paint, for example. In the Computer tab, there is a box model to help you visualize the final styling, like the element size, padding, border, and margin. You can double-click a value, edit it, and view the change live. There are more tabs here. However, you don't need to rush into those now until you need them. By the way, if you want to simulate how the page looks on a mobile device, toggle the Device mode. For example, select Pixel 7 to see how your design scales. Next, the Console panel is where you will find all your application's log messages and warnings. This is your go-to place for identifying errors and fix them in your code execution. Not sure about logging messages? This video will show you the ropes. Let's say when you click on a coffee, it throws an error in the Console. You can easily see the file name and line number causing the error. Isn't that handy? At this point, you can either open the file and fix the errors in your code editor, or you might want to track the program flow further and find out what happened. You can click on this link to open the code in the Sources panel and then set the breakpoint on the line number. Now, when you repeat the step again, DevTools will pause at the line. That gives you time to analyze the values and you can debug the code step by step. Go to this article to learn more about how to debug JavaScript with DevTools. Time for a pro tip. Do you know you can edit the code directly in DevTools? To do that, you need to set up a workspace and follow the step in this video. By the way, the Console isn't just about viewing messages. It is also a playground for experimenting with JavaScript. For example, you can run the script to list out all the cup elements on the page or even change the cup's color. Take note that the dollar sign is a shortcut of document.query selector. Did you know that DevTools has a list of shortcuts to help you test your code faster? More shortcuts are covered in this video. Lastly, a web page usually has different resources like images, JavaScript and CSS. The network panel is where you can analyze network activities when loading a web page. Open the network panel. If you don't see any logs, reload the page. You can filter the list by request types like CSS or images. Another pro tip here. If you want to filter multiple types, hold the command key and select the types you want to see. Look, there's an error here. The status shows 404. What does that mean? To find out, you can hover over to read the description or click on the name to view it in detail. You can easily navigate to another resource and view the response details as well. Before we wrap up, this drop down on the top here is pretty cool. You can slow down the website to simulate how users experience your page with slow connections. As you can see, the network panel is a powerful tool. And there's too much to cover. Here is where you can go to to learn more. Alright, one last bonus tip just for you. If you want, you can customize DevTools based on your preferences. For example, you can change to the dark theme, switch to different languages and customize keyboard shortcuts. For more productivity tips, watch this video. By the way, how did you discover DevTools? Let me know in the comments below. Today, we just scratched the surface of Chrome DevTools. Check out our Getting Started guide to discover even more. If you have questions, drop a comment below or connect with us on social media. That's all. Happy debugging and welcome to the web community. See you soon. Ciao!