Troubleshooting with the Developer Tools

Owned by Ayla Dillis (Unlicensed)

Last updated: Aug 16, 2023 by Jessica Tomkins

1 min read

Accessing your Browser's Developers' Tools:

Opening the Developer Tool:
- Chrome - Shift + CTRL + J (on Windows/Linux), or Option + ⌘ + J (on macOS).
- Firefox - Ctrl + Shift + I or F12 (on Windows and Linux), or Cmd + Opt + I (on macOS).

The Developer Tools can also be accessed, on either Chrome or Firefox, by right-clicking the screen and selecting 'inspect'.

Console Tab:
- Check here for JavaScript messages.

Network Tab:
- Check that the files are downloaded correctly.
  - Check to see if the files are being downloaded from the server or recalled from the cache and if there were any files that weren’t loaded correctly.
- Check network timings:
  - Chrome: https://developers.google.com/web/tools/chrome-devtools/network-performance/understanding-resource-timing?hl=en