The Chrome DevTools provide web developers with tools to debug websites and applications built into the Chrome browser. Some key panels include the Elements panel for inspecting and modifying the DOM and CSS, the Network panel for optimizing page load performance and debugging requests, and the Console panel for logging information and interacting with JavaScript. The Audits panel identifies common issues that affect performance, accessibility, and user experience. This document focuses on introducing the Elements, Network, Console, and Audits panels of the Chrome DevTools.

1. Chrome Devtool
Understanding Element, Network,Console,Audit

2. Chrome DevTools Overview
The Chrome Developer Tools (DevTools for short), are a set of web authoring and debugging tools built
into Google Chrome. The DevTools provide web developers deep access into the internals of the browser
and their web application. Use the DevTools to efficiently track down layout issues, set JavaScript
breakpoints, and get insights for code optimization.

3. Accessing the DevTools
1. Select the Chrome menu Chrome Menu at the top-right of your browser window, then select More
Tools > Developer Tools.
2. Right-click on any page element and select Inspect Element.
3. The DevTools window will open at the bottom of your Chrome browser.
There are several useful shortcuts for opening the DevTools:
1. Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
2. Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
3. Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode, or
toggle Inspect Element mode if the DevTools are already open.

4. Important Panel
1. Elements
2. Resources
3. Network
4. Sources
5. Performance
6. Memory
7. Audits
8. Console

5. We will learn
1. Elements
2. Network
3. Audits
4. Console

6. Element Panel
Iterate on the layout and
design of your site by freely
manipulating the DOM and
CSS.

7. Element Panel
1. Select an element
2. View CSS
3. Computed CSS
4. Color Picker
5. Add Box Shadow
6. Insert Style Rule Below
7. Add Classes

8. Console Panel
Log diagnostic information
during development or
interact with the JavaScript
on the page.

9. Console Panel
1. REPL (Read Eval Print Loop) for Javascript
2. Access last selected dom with $0, $1 ...
3. Preserve Logs
4. Filter Logs
5. Display Network Logs
6. User selected Logs
7. Show time

10. Network Panel
Optimize page load
performance and debug
request issues.

11. Audits Panel
Audits help you identify and
fix common problem that
affect your site's
performance, accessibility,
and user experience

12. Thank you