Debugging the code

As you will have noticed, there was a third file in the OpenLayers 3 folder discussed at the beginning of the chapter (js/ol3-3.11.0). This file, named ol-debug.js, is the uncompressed source file, in which the library is concatenated with all of its dependencies. We will use this file for two purpose in this book. Now, we will use it for debugging. First, open up ch01_simple_map.js. Next, extend the init function with an obvious mistake:

var geometry = new ol.geom.Point([0, 0]);
vectorLayer.getSource().addFeature(geometry);

Don't worry if you can't spot the error immediately. That's what is debugging for. Save this extended JavaScript file with the name ch01_error.js. Next, replace the old script with the new one in the HTML file, like this:

<script type="text/javascript" src="ch01_error.js"></script>

If you open the updated HTML, and open your browser's developer console, you will see the following error message:

Now that we have an error, let's check it in the source file by clicking on the error link on the right side of the error message:

Quite meaningless, isn't it? The compiled library is created with Google's Closure Library, which obfuscates everything by default in order to compress the code. We have to tell it which precise part of the code should be exported. We will learn how to do that in the last chapter. For now, let's use the debug file. Change the ol.js in the HTML to ol-debug.js, load up the map, and check for the error again:

Finally, we can see, in a well-documented form, the part that caused the error. This is a validating method, which makes sure the added feature is compatible with the library. It requires an ol.Feature as an input, which is how we caught our error. We passed a simple geometry to the function, instead of wrapping it in an ol.Feature first.