Edit the example map from Chapter 1, Getting Started with OpenLayers, to change the reference to JavaScript from ../assets/ol3/js/ol.js to ../assets/ol3/js/ol-debug.js and open the file in Chrome. Enable Chrome DevTools and go to the Console panel. If you like, you can take a look at the Network panel and view the network activity to see the requests your page is making.

Go to the Console panel, input the following code, and then execute it:

console.log(map);

You should see the map object information come up in the console log. Click on it, and take a moment to look over the various attributes it has. Near the bottom, you can see a list of all the functions that belong to it (which are also referred to as methods).

Take note of the function names, as we'll be using them.

Go back to the Console panel, type in, and execute the following code:

map.getView().setCenter([0, 0]);
map.getView().calculateExtent(map.getSize());

Take note of the extent. Clear out the code you typed in, then type in the following and execute it:

map.getView().setResolution(2000);
map.getView().calculateExtent(map.getSize())

Now, let's take a look at some properties of the map object. We can access the map properties using the dot notation, which we discussed earlier. Clear any code you've typed so far, input and execute the following code:

console.log(map.getSize());
console.log(map.getViewport());

You will see the following screenshot:

Refer back to the functions of the map object (by running console.log(map); then clicking on the output in the log area). Try playing around with different functions and attributes the map object has. To access the functions, you just need to type in map.function();.

You can also access the properties of the map by typing map.key, where key would be something like keyHandler_ (so the full code would be map.keyHandler_). Be aware that values with underscore at the end are private when using the compressed ol.js file (it's a naming convention in the library code).