Breakpoints help you understand available variables and their values, one at a time in your code, and see when the code is executed. Let's see how.
As we didn't have space to cover such a large topic, we chose to let you discover the basic parts using the official tutorial. So head to it and review it at https://developers.google.com/chrome-developer-tools/docs/javascript-debugging. Now after this review, open the example for Chapter 1, Getting Started with OpenLayers, with Chrome Developer Tools opened with the Sources panel. Change the ol.js reference to ol-debug.js (more readable).
Set breakpoints in the HTML page at var osmLayer, var map, map.addLayer, and map.setView. Check the following steps:
Define in the Watch Expressions part on the right the following variables and functions calls:
osmLayer,map,map.getLayers(),map.getLayers().getArray(),map.getView()andmap.getView().getCenter().Reload your page to see your page loading stopped at the first breakpoint
var osmLayer.You should have content similar to the following screenshot:
Use the Resume script execution to see at each step the value in the Watch Expressions part. The result should be along the steps like the following illustration:
When we began by introducing the library in Chapter 1, Getting Started with OpenLayers, we described every step to create a basic map. With this example, we are able to follow the flow of your code with Chrome Developer Tools. First, all the variables we defined in the Watch Expressions were empty, as seen in the screenshot at step 3.
With the declaration of var osmLayer, the part of figure After var osmLayer... showed us an ol.layer.Tile object was created.
Then, we created a map in the After var map... part. The result is that map variable was assigned an instance of ol.Map. With this ol.Map creation, ol.Collection was created for layers, but there were no layers: map.getlayers().getArray() as a length equal to 0. Moreover, a view was also added in the map but didn't have a center in this step; map.getView() stopped to be empty and was replaced with an ol.View instance.
Then, by adding the layer in the After map.addLayer part, we saw that the map had a layer added: the previous map.getlayers().getArray() was using osmLayer: its length is 1.
At the end, the same process happened for the map view. The Map class with the map.setView method gained the view parameters, and so, map.getView().getCenter() returned an array with coordinates.
This detailed description was a good way to show that we can find how the code works by following the code execution, instead of blindly searching where things happen or only deducing by reading code. When you have enough coding experience, the solution to only follow the code without using a debugger can be better to get a full code overview, but as a beginner, it's not the best solution and you should focus only on small code parts.
We hope with this demonstration, you appreciated discovering one of the main web debuggers features.
After this JavaScript escape, let's return to the CSS topic. Remember we said that we can also edit the CSS content in the Sources panel. Contrary to the Elements panel, we have the option to edit any CSS document associated with the page, not just the style of a selected element. We don't need to not talk much about this panel. We'll give you an accelerated overview for using it in OpenLayers.