Chrome devtool
0 likes134 views
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.
Chrome devtool
- 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