Google Chrome’s web development tools, also known as Chrome DevTools, is a set of web developer tools built directly into the Google Chrome browser which can help in editing pages and diagnose problems quickly, which ultimately helps you build better websites, faster. Here’s how to use these tools to debug HTML:
1. Open Google Chrome
1. Open the webpage you wish to debug
1. Right click on an element on the page that you would like to inspect and select ‘Inspect’ or use the keyboard shortcut (Ctrl+Shift+I or Cmd+Option+I on Mac). This will open the developer console on the right side or the bottom of the window.
1. Within the ‘Elements’ panel, you’ll see a HTML document which represents the structure of the webpage that Chrome downloaded. This panel allows you to see the HTML and CSS that is applied to any selected element in the ‘Elements’ panel.
1. If you want to edit the HTML for a selected element, select the element and then double click on any of the HTML in the ‘Elements’ panel that you want to edit.
1. In the right section, under the ‘Styles’ tab you can change CSS for a selected HTML element, this change will be immediately visible on the webpage.
1. Use the Console panel to log diagnostic information, or to interact with JavaScript.
1. Network tab will show you all network requests, Timing tab can help you find out performance issues in your webpage.
1. There’s also a Debugger for JavaScript in Sources tab.
Please note that resetting the page or reloading it will also reset any changes you made. This is meant for live debugging and not for actual development. So if you make any changes, make sure to copy them and save in your actual code.
