How to use your browser web inspector to find and resolve website problems

edge-browser-console

The browser Web Inspector tool is included with most desktop browsers. Developers use the web inspector to debug Javascript errors as well as HTML and CSS code. It can also help identify server errors and is very handy to help narrow down website problems, particularly ones like this:

  • Errors that don’t appear immediately upon page load and instead occur after the page has loaded. This could be after a period of time or after interacting with something else on the page such as a button that doesn’t work.
  • Problems with page rendering, such as missing images, styles (colours, layout, etc) or iframes like embedded Google Maps or external forms.
  • Some WordPress plugin conflicts.
  • Mixed content warnings.

Tip: if you’re having issues with saving a WordPress page powered by a page builder, check out our guide to troubleshooting page builders issues.

How to access your browser console

Here’s how to get to your browser web inspector in all major browsers. If your browser is not in the list, you can always find the answer to this in the browser’s help/support website.

  • Google Chrome: under the View menu, choose Developer > JavaScript Console
  • Mozilla Firefox: under the Tools menu, choose Browser Tools > Web Developer Tools > Switch to the “Console” tab
  • Apple Safari: under the Safari menu, choose Preferences > Advanced (tab) > Check the box at the bottom called “Show Develop menu in the menu bar”. Then go to the Develop menu > “Show JavaScript Console”
  • Microsoft Edge: under the Tools menu, choose Developer > JavaScript Console

Here’s what each of them looks like. They’re all very similar.


Most warnings, except mixed-content warnings, are unlikely to have any effect on the functionality of the website, so you can usually ignore those unless you have absolutely no other leads.

Handling Server Errors

To ensure you see server-related errors, look for an option in the web inspector console to filter the output and ensure both “XHR” and “Requests” are visible. Alternatively you can go to the “Network” tab and refresh the page. Look for anything in the list that doesn’t have an HTTP status code of 200 or 30x. These are typically 400 and up.

If none of those guides do the trick, then our general guide to viewing and interpreting your web server logs should! You’ll very likely find corresponding entries in the server-side logs to the error you see in your web inspector. The server-side logs will usually give more detail as to the reason for the error which will help you resolve the problem.

Resolving Mixed Content Warnings

A mixed content warning occurs when some of the page content is coming from a variation of the URL that you’re accessing the site with. For example if you’re visiting the site at https://websavers.ca but images are loaded from http://www.websavers.ca both the protocol (http vs. https) and domain (websavers.ca vs. www.websavers.ca) are different. The most common reason for mixed content errors is the HTTP vs HTTPS URL differential on resources like photos. Look for errors and/or warnings like this:

[Warning] The page at https://your_url/ was allowed to display insecure content from http://your_url/wp-content/uploads/2015/12/web-design.jpg. (your_url, line 857)

These indicate which files are not being loaded via HTTPS. You will need to find where each of the listed content items (photo, javascript, css file, etc) is being loaded in the website code or website editor, such as the WordPress admin (e.g.: on a page? In the theme customizer settings? In the plugin’s settings? A background image loaded via the theme’s styles.css?), and change them to any of the following URL schemes, which will resolve this problem:

  1. Relative URLs by removing the entire first part up to the end of the domain. Ex: /wp-content/subdir/myfile.jpg
  2. Protocol Agnostic URLs by replacing the http:// with simply //. Ex: //websavers.ca/wp-content/subdir/myfile.jpg
  3. Absolute URLs by simply swapping http with https. Ex: https://websavers.ca/wp-content/subdir/myfile.jpg

Or, if you’re using WordPress, you can take the easy way out and use a plugin that automatically forces the switch to https. Though this does have some performance implications.

Narrowing Down JavaScript errors

When you see Javascript errors in the browser console, they’ll indicate the .js file in which the error occurs and on what line.

However when you’re logged out of the site and the JavaScript is minified/optimized, it’ll be difficult to identify the code responsible because javascript files are frequently combined or reduced or both. To work around this, if you’re using WordPress, login to the admin, then attempt to reproduce the issue. If you’re using another content management system, you probably need to enable debug mode to prevent optimizations of the code from interfering with readability.

Example: if you’re using WordPress and the browser console indicates the .js file with the error is in wp-content/plugins/bb-plugin/ then the JavaScript is part of the BeaverBuilder plugin.

Once you know which plugin or theme’s javascript is reporting the error, check to see if there’s an update available for it. With the example above, you’d check to see if you can update the BeaverBuilder plugin. If no updates are available, pick from one of these two options:

  1. Complete exhaustive troubleshooting to determine if there’s a conflict with other software installed on your site.
  2. Report the exact error you found in the browser console to the plugin’s developers

You’ll probably want to pick option (1) if the error in the log isn’t very specific, or if the you know the software developer is not very responsive/helpful.


Experiencing an error in your JavaScript console that this guide hasn’t addressed? Let us know in the comments!

Posted in

Jordan Schelew

Jordan has been working with computers, security, and network systems since the 90s and is a managing partner at Websavers Inc. As a founder of the company, he's been in the web tech space for over 15 years.
WS-Logo-only-image-large

About Websavers

Websavers provides web services like Canadian WordPress Hosting and VPS Hosting to customers all over the globe, from hometown Halifax, CA to Auckland, NZ.

If this article helped you, our web services surely will as well! We might just be the perfect fit for you.

Leave a Comment