 There are different ways to open Chrome DevTools. Tell me your way in the comment below. Meanwhile, I will show you all the ways to access different parts of the DevTools UI. First, there are 3 keyboard shortcuts you can use. Here is an easy way to remember them. C, J, and I. C for CSS. J for JavaScript. And I for my choice. Let's dive in. If you like to inspect an element's attributes or CSS, you can use Command-Option-C in Mac OS, or Control-Shift-C in Windows or Linux. This way, you can access the elements panel faster. Can you see the little inspect icon highlighted in blue? That indicates to you that DevTools is now in the Inspect mode. Hover over to any elements on screen. It is highlighted in the elements panel. Now, let's say you want to inspect the styles. Click the element and you can view its CSS in the styles pane. Next, if you are mostly focused on JavaScript, you might want to open the console directly with the J shortcut. While you are in this page, press Command-Option-J in Mac OS or Control-Shift-J in other OS to jump straight into the console. From here, you can view log messages or run JavaScript right away. All these are great. Let's look into how to reopen your last panel. Guess what? There is a shortcut for that. For example, you are on the network panel. You want to refresh and restart the network log. You could of course clear the network log with this button. However, you can use a keyboard shortcut as well. It might be quicker to do it with Command-Option-I or Control-Shift-I shortcuts to close and reopen the same panel. This will reload the network logging. Combine the C, J and I shortcuts with Command-Option or Control-Shift. You can access different parts of DevTools depending on your needs. If you are not a fan of keyboard shortcuts, no problem. There are ways to open DevTools with the UI tool. On the top right, click the 3-dot menu next to your profile. Then, select More Tools and the Developer Tools option. Apart from that, if you want to inspect an element's styles, you can right-click on the element and select Inspect. If you are using Mac OS, you have an extra option. Go to the top menu bar, select View Developers. It will show you the CGI shortcuts to open DevTools. You can select any of them. Next, let me show you some advanced-level tricks. If you want to open DevTools on every tab, you can use the Command-Line to automate that. In your terminal, specify the Chrome command and add the flag at the end. Here, you see a pretty long name for the flag. It is Auto Open DevTools for tabs. Make sure you quit the Chrome browser before running the command, or else it might not work. Once you press Enter and voila! A new page is open with DevTools. As you open another tab, you will notice DevTools is always open now. Isn't that convenient? Before we close, I save the best for last. The F12 key is the classic way to open DevTools. However, make sure you press the Fn key to activate the F12 if required. Once you press F12, DevTools will start. Alright, if you require more information, you can go to go to Google.Girls-DevTools-Open to open the complete documentation. And if you want to learn more tricks on how to customize and speed up your DevTools workflow, watch my video on Google.Girls-DevTools-Customize. Thanks for watching and see you for the next DevTools Tips. Ciao!