Accessing developer tools
There are three ways to access the developer tools in Chrome:
Type Ctrl+Shift+I (Command+Option+I on Mac)
Select the three dot button on the right-hand side of the browser, then navigate to More Tools > Developer Tools.
Right-click on any webpage and then select Inspect.
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 timeout
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 option prevents your log from being cleared on page reload and navigation.
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 checkbox. You can also select Disable Cache so that resources aren't provided by the cache.