How to use the console for troubleshooting?

About this:

Usually when something is not working as expected there is something blocking the view. Most of the errors will be visible in the console. That being said some may not if the file is not loaded.

Purpose of the console

As mentioned above: the console shows errors if there is something wrong. If something is causing an error the console will show you where it comes from and you can pinpoint the culprit to fix it.

Before you begin

The console only shows errors if something goes wrong. This means if a file is not loaded, it will not show here. Therefor it is important that you deactivate any optimization plugin when troubleshooting or working on the site. Some examples of optimization plugins are: WP Rocket, JetPack and Hummingbird. No worries. The settings will be saved when deactivating (don’t delete it).

If you’ve deactivated this and the error persists it should now show. Continue to section “How to use”.

How to use

If you’ve reached this section there is an error which is not a conflict with optimization plugins.

How to open the console?

Open the console by pressing F12 key on your keyboard or right click on the page and click “Inspect”.
You will now see the HTML of the page. This is called the “Developers Tool”. On top of the Developers Tool you see some options, one of which is “Console”.

Console errors

Now you’ve found the console and you’re ready to debug, as they say. If there are errors they are either yellow or red.

Yellow console lines

Yellow console lines are actually just warnings. Not necessarily critical and usually can be ignored. Most of the time it’s Facebook or Google warnings.

Red console lines

Red console lines are errors. These are important and need to be solved. As there are a lot of errors I will only talk about how to identify the error in the next section.

How to fix:

You’ve found some errors in the console and now you need to find the source of this. Luckily the console offers a line or error where it comes from.

Per example:
Mixed content. This error shows there is an unsafe (http) request on a safe (https) environment and it shows you what it is by the URL after the error.
Another error could be an undefined value of something. In that case it will show you where this happens. Usually with a path to the culprit like a plugin or function.

If you’ve found the error and source but don’t know how to fix it: Good news! Probably a lot of people has had the error before and most of the issues are answered. The solution is often a Google search away.

“WordPress Mixed Content error”
“WordPress Undefined value”

If you have trouble finding the solution or don’t understand what’s happening. The Flatsome Theme Users group on Facebook probably knows what’s up or leave a question below.