An Important Troubleshooting Skill
One of the most important website troubleshooting skills is to check the browser Console for errors. Sadly, most people are not familiar with it. As someone who handles technical support requests for my plugin, almost daily I wish that customers would have simply checked the console to get the answer to some website issue before contacting me. This has motivated me to write this tutorial for beginners who are unfamiliar with the Console in the browser developer tools. So in this tutorial I will show you how to check the Console for errors on your Divi website.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
How To Access The Console
Open The Browser Developer Tools
To access the browser developer tools, simply right-click anywhere on any page of your website. A browser tooltip menu will appear. At the very bottom, choose the option called “Inspect” and this will open the developer tools panel either on the side or bottom of your screen.
Pro Tip: If you are inside the Divi Visual Builder, or inside a Divi Theme Builder template, you may realize that you cannot right-click. In those cases , you can usually hover over the black admin bar at the top and right-click.
There are also shortcut keys to access this, but they may be slightly different per browser. In general, you can press F12 or use the keyboard shortcut Control-Shift-J on Windows or Command-Option-J on a Mac.
Find The Console Tab
When the browser tools open, you will see various tabs at the top like Element, Network, Console, Performance, etc. You can expand the width of the window, or use a small menu to find additional hidden items. Often the “Console” tab is the second one, and this is what you want to find.
Checking Warnings & Errors In The Console
When you open the Console, you may see a lot of new things you never knew before about what goes on behind the scenes of a website. Be aware that this could be overwhelming, but you don’t need to understand all of it. This tutorial about the basics, which can be a super helpful skill to have if you build any websites.
NOTE: This tutorial is not intended to teach you how to read the warnings and errors, but rather to introduce you to them and encourage you to check them carefully at least for some clues.
What Will You Find?
That’s a good question! Almost anything! I won’t even attempt to give a list of all the common errors and warnings that you may find, because I simply don’t know. A few stand out in general that I will mention, but it’s going to vary so much based on your server, versions of software, versions of code libraries, Divi versions, plugin versions, combinations of code and plugins, and on and on.
Sometimes you may see yellow warning icons. These are not quite and urgent as a red x, but they are trying to alert you to some issue. Sometimes they can even be ignored, but if you are unsure about anything that seems important, it is best to have a developer check them. One of the most common warnings will be a mixed content error. We talked about fixing this in a previous tutorial called How To Fix Images Not Showing In Divi (Mixed Content Error). As an example, if it is an issue with mixed content, the error message will give you some basic information and will start with “Mixed Content” and after say, “the page at https://www.example.com is loaded over HTTPS, but requested an insecure image http://www.imageurl and this content should also be served over HTTPS.”
Follow The Path
A few quick tips come to mind. Often there will be some indicators. Maybe it will have a URL path – if so, please follow it. Just today a customer sent us a support ticket about an error, but when I checked the console on the link they shared, the path of the error was clearly in Divi:
Warning: Trying to access array offset on value of type bool in /domain.com/wp-content/themes/Divi/epanel/custom_functions.php on line 629
I saw immediately from the path of the warning that this error was coming from the Divi Theme. If this customer had known to check this, they could have contacted Elegant Themes first and saved us both some time. This is a great example of what I face every day with support, and I really hope this tutorial can help everyone just a little.
Research Any Error Numbers
Another common type of error is server errors, like 500 error, 504, 403, etc. When you see these in the Console, you can very easily type them into any search engine and get information about them. Often you will need to check your serer requirements and contact your hosting provider support.
EXTENSIONS: This is an important note about browser extensions. I use about a dozen Chrome extensions, and typically at any given point there is at least one or two errors in one of those. The bad news is that those errors show up in the Console, which makes it very easy to get confused when you are checking your site. The key is to try to recognize any errors that you are seeing from an extension. If you are not sure, the best and most certain approach is to temporarily disable all exertions (at the time of this writing Chromium does not yet have an option to disable all extensions, but they will soon).
In summary, it can save you a lot of headache and time troubleshooting any issue on your Divi site by just taking a few seconds to check the console. It’s a habit I hope all of you readers will develop, and you will thank me later.