- Mastering CSS
- Rich Finelli
- 154字
- 2025-02-26 11:48:47
How to open developer tools
To open up Chrome's DevTools, all you need to do is right-click or Ctrl + click on any part of the page. You'll get a contextual menu, as shown in the following screenshot. When you select the Inspect Element option, you get a whole new world of techie goodness:

What typically happens is DevTools will occupy the lower half of your screen. As you can see in the following screenshot, on the left-hand side, you have your HTML as rendered by the browser, technically referred to as the DOM. On the right-hand side, you will have all your styles:

If you hover over something on the left-hand side, it gets highlighted at the top. So, if you hover over h2 or click on it, it gets highlighted, as you can see in the following screenshot:

If you hover over <section> or click on it, it gets highlighted at the top:
