BYU-Idaho | Software Development

Help: Troubleshooting Common Issues

Select an issue to see what to check. Most problems show up as an error in the browser DevTools Console, so open it first.

Image Not Displaying

Check the file name.
Check the file path.
Check the spelling and letter case. They must match exactly.
Check the file extension.
Check the DevTools Console for a 404 (Not Found) error showing the path the browser tried.

Use relative paths for files in your own site. A relative path does not start with a protocol such as https://.

Relative path example:

<img src="images/my-image.png" alt="Description of the image">

Path notation in relative references

A single dot ./ means the current folder, so ./images/logo.png is the same as images/logo.png. You normally do not need it; just start the path with the folder or file name.
Two dots ../ mean the parent folder (up one level).
A leading forward slash / starts at the root of the site. Avoid it on GitHub Pages project sites, where your site lives in a subfolder of the domain.

Absolute URLs include the protocol and domain. Use them for resources on other sites.

Absolute URL example:

<img src="https://example.com/images/breakfast.svg" alt="Breakfast illustration">

CSS Not Applying

Check that the <link rel="stylesheet"> element is in the <head> and that its href path is correct. A wrong path shows as a 404 error in the DevTools Console.
Check the selector for typos. Class and ID names are case-sensitive, and a class selector needs a leading . and an ID selector a leading #.
Inspect the element in the DevTools Elements panel. A declaration that is crossed out in the Styles pane lost to another rule. See CSS Specificity.
Look for a missing } or ;. One syntax error can stop the rules after it from working. Validate your CSS to find it.

Changes Not Showing in the Browser

Save the file. Turning on Auto Save in VS Code prevents this problem.
Confirm that the page in the browser is the file you are editing, and not the published copy or a file in another folder.
Do a hard reload to bypass the cache (Ctrl+Shift+R on Windows/Linux, Cmd+Shift+R on macOS).
For a published site, confirm that you committed and pushed your changes, then wait a minute or two for the site to rebuild. See The Git Workflow.

JavaScript Not Working

Read the error in the DevTools Console. It names the file and line number where the script stopped.
Check the src path of the <script> element. A wrong path shows as a 404 error.
Make sure the script runs after the HTML it uses has loaded. Add the defer attribute to the <script> element or place the element at the end of the <body>.
An error such as Cannot read properties of null usually means a selector did not match any element. Compare the selector in your script with the id or class in your HTML.
Check spelling and letter case. JavaScript names are case-sensitive, so getElementByID is not the same as getElementById.