Building websites with Blocs is a pretty straight forward and fun process, however, there are times when you may run into problems once you have exported and hosted your site. Finding the cause of these problems can be very time consuming, if you don’t know where to look.
Fortunately Blocs and all web browsers have a built in tool called a web inspector, this tool lets you inspect the code of a web page in order to quickly identify problems.
Accessing the Inspector
Google Chrome, FireFox and Blocs (preview mode only) all have the web inspector enabled by default, however, in Safari you will need to enable this functionality via the preferences.
To access the inspector simply right click any element on the page and from the contextual menu, select Inspect. This will open the web inspector.
Understanding the Inspector
The web inspector can be a little intimidating if you have never seen it before, don’t worry, it’s not that complicated, you just need to know where to look to spot problems.
Within the web inspector window you should notice some tabs across the top of the window, navigate to the one labelled console and Left Click it. This will display the console pane.
The Console
The web inspector console outputs various messages about a site as it is being loaded, including any errors encountered with the site. Error messages in the console are typically displayed as Red text, this makes them very easy to spot.
Common Problems
The most common problem web designers and developers encounter when getting a site live is missing assets, referred to in the console as a 404 error. When an item such as an image or any other resource is missing, the console will log a 404 error message stating that the resource cannot be found on the host server.
404 errors are usually the cause of missing images, broken visual styling and broken site functionality.
Fixing 404 Errors
Fixing 404 errors is usually a very simple process. The error log is telling you that a resource is missing from the server at a specific location, to remedy the issue, simply upload and add that missing resource to the path mentioned in the 404 error log.
It’s important to remember, in a site created with Blocs, missing images will usually need to be placed in the directory on your server labelled img, style sheets .css files in the directory labelled css and .js files in the directory labelled js.
Other Errors
Although 404 errors are probably the most common cause of website problems for Blocs users, there are many different server side errors that can be logged in the console, you can read more about the various other error types here.