Using the Browser's Developer Tools

Modern web browsers offer developers a powerful set of developer tools. The Developer Tools are a front-end web developer's best friend! For example, using the dev tools you can:

• View the web page's JavaScript console output
• Inspect the page's HTML, CSS, and JavaScript code
• View network requests and responses, along with their headers.

The method for accessing dev tools varies from browser to browser.

• Keyboard Shortcuts:
  • Windows: Ctrl+Shift+I or F12
  • macOS: Cmd+Option+I

In most browsers, you can just right-click anywhere on a web page and click the "inspect" option. Follow this link for more info on how to access dev tools.

The Network Tab

While all of the tabs within the dev tools are useful, we will focus on the network tab in this chapter so we can play with HTTP headers. The network tab monitors your browser's network activity and records all of the requests and responses the browser is making, including how long each of those requests and responses takes to fully process.

Assignment

1. Open the developer tools in your browser
2. Navigate to the network tab
3. Refresh the page