How to Use Browser Developer Tools

Master browser developer tools to debug websites, inspect HTML/CSS, monitor network requests, and analyze JavaScript performance in Chrome, Firefox, and Safari.

1. Open Developer Tools. Press F12 on Windows/Linux or Cmd+Option+I on Mac. Alternatively, right-click any element on a webpage and select 'Inspect Element' or 'Inspect'. The developer tools panel opens at the bottom or side of your browser window.
2. Navigate the Elements Panel. Click the Elements tab (or Inspector in Firefox) to view the HTML structure. Hover over HTML elements in the panel to highlight them on the page. Click the arrow icons to expand or collapse nested elements. The right sidebar shows CSS styles for the selected element.
3. Inspect and Modify CSS. Select any element in the Elements panel to view its CSS in the Styles section. Click any CSS property value to edit it. Add new properties by clicking in empty space within a CSS rule. Check or uncheck the boxes next to properties to toggle them on and off.
4. Use the Console Panel. Click the Console tab to view JavaScript errors, warnings, and log messages. Type JavaScript commands directly into the console prompt and press Enter to execute them. Use console.log() in your code to output debug information here.
5. Monitor Network Activity. Click the Network tab and refresh the page to see all network requests. Each row shows a file request with details like status code, file size, and load time. Click any request to view headers, response data, and timing information.
6. Debug JavaScript Code. Open the Sources tab (Debugger in Firefox) to view and debug JavaScript files. Click line numbers to set breakpoints that pause code execution. When code hits a breakpoint, use the step controls to walk through code line by line and examine variable values.
7. Analyze Performance. Click the Performance tab and hit the record button to start profiling. Interact with the page normally, then stop recording. The timeline shows CPU usage, rendering activity, and JavaScript execution to help identify performance bottlenecks.