Hi There! Hope you are doing well
How to Access DevTool
There are multiple ways to access the Developer Tool
- Run the website and Press F12
- Use Ctrl+Shift+I (or Cmd+Opt+I on Mac) to open the DevTools.
- Use Ctrl+Shift+J (or Cmd+Opt+J on Mac) to open the DevTools and bring focus to the Console.
- Use Ctrl+Shift+C (or Cmd+Shift+C on Mac) to open the DevTools in Inspect Element mode
- Right Click and select Inspect Menu Item
Understanding Various Developer Tool Options
When you access developer tool on any website, you will see below screenshot (or similar). You can dock developer tools to Right or Bottom. You can undock the tools to show in a separate window as well. There are 8 panels are visible.
- Resources – to View inspect and manage storage (like Database, Cache and Service workers.
- Network – to optimize page load performance.
- Timeline – to record and analyze all the activity in your application as it runs. It's the best place to start investigating perceived performance issues in your application
- Profiles – to analyze the execution time and memory usage of a web app or page.
- Audits – provides suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness
Although you can use various options using menu and sub menu items, but as a developer, I would recommend you to use Keyboard shortcuts to speed up the debugging.
In addition, DevTool provides heap profiling, CPU Profiling, Device mode selection and most interesting Remote Debugging (using your connected device). More details about Developer Tools is available at Google Chrome developer Tool website . I would suggest to go through the official documentation and watch any YouTube Video on Google Developer Channel.
The objective of this article is limited to introduction to developer tool and showing available options, however we shall take up the topic of debugging a website using Google Chrome Developer Tools in near future.