There are three ways to access the Developer Tools in Chrome:
- Use the command, Ctrl+Shift+I or (Command+Option+I on Mac), to pull up the Developer Tools.
- Select the three dot button on the right hand side of the browser, then go to More Tools, and select Developer Tools.
- Right-click on any webpage and then select Inspect.
The Console Tool
The Console allows you to log and inspect diagnostic information. You can view HTTP status codes that appear here. An example of when you would use the console would be when you encounter an empty red error message while loading the user counts of lists.
There are several different classes of status codes including:
- 2xx: Success
- 3xx: Redirection
- 4xx: Client errors
Common HTTP error codes that you may see here are:
- 200: OK
- 301: Moved Permanently
- 404: Not Found
- 503: Service Unavailable
- 504: Gateway Time-out
At the top of the page, you can select the Filter or the "Preserve log" checkbox
The filter allows you to find entries that you're interested in faster, while the "Preserve log" button prevents your log from being cleared on page reload and navigation.
The Network Tool
The Network tab shows all the requests that the browser makes to process your request.
As is the case with the console, you can select the filter or "Preserve log" buttons. You can also select "Disable Cache," so that resources aren't provided by the cache.