Debug and edit web pages with Chrome DevTools

Google Chrome Developer Tools, also known as Chrome DevTools, are advanced web authoring and debugging tools built into Google Chrome. These comprehensive tools are used by developers to iterate, debug and profile your website without the need to exit Chrome’s environment. DevTools also lets you track layout issues, get insights into code optimisation, and establish JavaScript breakpoints.

Using Chrome DevTools

To use Google Chrome Developer Tools, all you have to do is open a page with Google Chrome. From ‘Chrome menu’, select ‘Tools’ followed by ‘Developer Tools’. You can also right-click on a page element and select ‘Inspect Element’. You can also use your keyboard by selecting ctl+shift+i on Windows-based devices or cmnd+opt+i on Mac. DevTools are grouped in a toolbar at the top of the browser window. You can then work with a specific type of page or app information under several groups of tools, including elements, profiles, console, resources, network, timeline, audits and sources. Each tool makes it easy for you to troubleshoot issues, improve network performance, and get information about what needs to be done to improve your site. They also let you see your size with different screen sizes and resolutions.

A great tool for troubleshooting and improving your site

Google Chrome Developer Tools lets you edit web pages without the need for a separate tool. It boasts excellent features for inspecting and editing with a single DOM tree. The JavaScript Console also lets you log diagnostic information and use a shell prompt to test pages and applications. Powerful debugging tools also helps to find and fix issues with JavaScript, while network and audit tools give you real-time data on resources to identify why requests are taking longer and understand how to improve responses.