Google Chrome Developer Tool (DevTool)

Hi There! Hope you are doing well

Debugging of Javascript code is always a nightmare for developers, Isn’t it? Google has provided a very robust web authoring and debugging tools , built into Google Chrome itself. I use Google Chrome as my default browser and big fan of Chrome Developer Tool.

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.

• Elements  –  to Inspect and live Editing of the HTML/Javascript code.
• Resources – to View inspect and  manage storage (like Database, Cache and Service workers.
• Network – to optimize page load performance.
• Sources – Debug your JavaScript using breakpoints or connect your local files via Workspaces to use DevTools as a code editor
• 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
• Console – Heart of the tool and most used. It Log diagnostic information during development or interact with the JavaScript.

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.

 

I hope you would find above article informative and  interesting. In case you need any further information, please feel free to comment , I shall try to reply the comment at the earliest. If you like this article, please like my Facebook page and advise/suggest me for more topics of your interest. Happy Coding!