Skip to content

The Google Chrome Development tools are very useful if you want to understand and learn about web programming.

The tools are integrated in the Chrome web browser and you can find them easily selecting the View Menu, then Developer and Developer Tools.

By default at the right side of the browser a panel will appear . For trying out some Javascript code, click on the Console tab and then clear the console.

How to use the Chrome Developer Tool console to try out Javascript code snippets.

The console allows you to enter small Javascript code snippets, just one line or a small block. When you have finished entering your command(s) behind the ">" prompt, press return on your keyboard to execute your code. If your code produces any output, it will be shown on the following line.

console.log(....) will print anything you ask it to print in between the parentheses. But methods and functions also have return values (like an output). If the function has nothing to return, it will often write "undefined", no worries if you read this message.

Often you need to get a copy of your screen or a part of it for documentation purposes. There are many different ways available with Windows 10, my two favourite tools are mentioned here, they also give you some choice on what part of the screen you want to copy.

Snipping Tool

This tool is around already for a long time. It will not show up any more as an app, so you will need to type its name in the search bar at the bottom of the screen. Then you can choose it.

How to find the Snipping Tool with the Search Bar

Click the New button to begin the screenshot process. The default snip type is a rectangular snip, but you can also take free-form, full-screen and window snips.

The Snipping Tool does not automatically save your screenshots -- you will need to manually save them in the tool before you exit -- and it does automatically copy your captures to the clipboard.

This tool maybe discontinued in the future, a message with that content will be displayed when you launch the app.

Snip & Sketch

This is a newer tool, the fastest way to launch it with the keyboard shortcut Windows key + Shift + S. You will also see the Snip & Sketch tool listed in the Start button as well as in the notification panel where it is listed as Screen snip, these are two alternative ways to start the app.

After launch, the screen will be dim and a tiny menu will open at the top of your screen. It lets you choose which type of screenshot you want to take -- rectangular, free-form, window or full-screen.

Choices for a screenshot with Snip & Sketch, displayed at the top of the screen

Once you take your screenshot, it will be saved to your clipboard. Click the notification that pops up to open the screenshot in the Snip & Sketch app to process it further in the app. You may also access the image via the notification panel.

There are other options. available with this tool, just have a look in the documentation.

Both these tools are not as powerful as some commercially available tools, but they give you the basic functionality and they are free-of-charge.

Classes are a means to structure your program and make the code more easy to follow. A class allows you to put all variables and functions that create, manipulate and interact the same type of structure in one declaration and use them afterwards throughout your program.

(more to follow ...)

Arrays are a powerful element of programming languages. They allow to store and manipulate data using one name and then accessing individual data with an index (number). You can imagine them as a container that holds many objects.

You may also imagine a postman distributing letters in one street with a certain name, distinguishing the individual addresses by the house numbers. The name of the street compares to the array name in programming, the index has the same meaning as the house number.

The image below summaries the key features of an array and also visualises how the indexing works to create, access and delete fields of an array.

You have several ways to access the elements of an array. The most common ways are ...

  1. You can use the array name with the index in brackets to set or get the content of one field, Burt also to add new items.
  2. You can use the push/pop methods to add or remove items at the end of the array.
  3. You can use the unshift/shift methods to add or remove items at the beginning of an array.

A full documentation on arrays can be found on the MDN website. It not only describes in words what the class and its methods are doing, but it also provides small editors with sample code you can modify and execute. For each method there are detailed descriptions accessible on the left side of the window (if your browser window is wide enough) with even more sample code to play with. Have a look.

MDN side for Array


The following screenshot shows how the push and pop methods are working.

  1. Please follow the instructions given here to launch the Development Console of your Chrome browser and then do the example with the push and pop methods by yourself.
  2. Next try to figure out how the unshift and shift methods are working. You can have a look at the MDS documentation first (you find at in the array section).

We will work extensively with the Array methods for making games, so getting familiar with them will be very helpful later.

Skip to toolbar