Testing the DHTMLX installation>

We now have the necessary file structure and the index.html file created. This file includes the external DHTMLX CSS and JavaScript files for the application.

Next, we will talk about the Chrome developer tools and test if the DHTMLX library files were included correctly.

Open the Chrome web browser and navigate to http://localhost/ or http://localhost/index.html, loading the index.html file.

You should see a blank page displayed.

To make JavaScript development easy, Chrome provides the developer tools. This provides many useful tools for developing applications on the Web. The tool that we will focus on is the console. There are two ways to access the Chrome developer tools console window: through the Chrome menu or through keyboard shortcuts. Let's use the keyboard shortcuts approach. On Windows and Linux, the keyboard shortcut is Ctrl + Shift + J, and for Mac, it is Cmd + Opt + J. With the provided keyboard shortcuts, open the developer tools console window.

Inside the console window which you just opened, type the word dhtmlX. This will bring up the developer tools intellisense with all of the available properties and methods beginning with the word "dhtmlX". You should see something similar to the next screenshot:

Now, we will do a further test to check that the CSS is correct. For this we will add a DHTMLX layout object to the page.

Type the following line of code into the console and then press Enter:

 new dhtmlXLayoutObject(document.body);

The page is now divided into three separate containers as shown in the following screenshot:

The three containers you see in the browser are the DHTMLX layout cells. These will be discussed in a later chapter. This simple test is enough to show that we have the files set up correctly. The installation and testing is now complete.