How to Debug a Web Page Using a Web Browser

To debug a web page using a modern web browser:

Apple Safari

  1. Open a new window in the latest version of Safari.

  2. From the Develop menu, select Show Web Inspector.

    (If you do not have a Develop menu, go to Preferences > Advanced and select the checkbox labeled 'Show Develop menu in menu bar', then close the Preferences window and proceed with the above.)

  3. Enter the full URL of the page you wish to visit into the web address bar.

  4. If there are errors on the page, you’ll see a small red hexagonal logo with an exclamation sign within it.

  5. If there are warnings on the page, you’ll see a small orange triangular logo with an exclamation sign within it.

  6. Click the red hexagonal logo or the orange triangular logo to view the list of errors or warnings.

Google Chrome

  1. Open a new window in the latest version of Chrome.

  2. From the View menu, select Developer > Developer Tools.

  3. Enter the full URL of the page you wish to visit into the web address bar.

  4. If there are errors on the page, you’ll see a small red circular logo with an X sign within it and a black number to its right indicating the number of errors encountered.

  5. If there are warnings on the page, you’ll see a small orange triangular logo with an exclamation sign within it and a black number to its right indicating the number of warnings encountered.

  6. Click the red circular logo and/or the small orange triangular logo to view the list of errors and/or warnings.

Mozilla Firefox

  1. Open a new window in the latest version of Firefox.

  2. From the Tools menu, select Web Developer > Web Console.

  3. Enter the full URL of the page you wish to visit into the web address bar.

  4. If there are errors on the page, you’ll see them listed.