Tools and Debugging

Level 3 Extended Diploma

Unit 22

Developing Computer Games

Ref: https://developers.google.com/chrome-developer-tools/docs/overview

Developer Tools

• Notepad++

• Syntax highlighting

• Syntax folding – hiding blocks of code

• Intel XDK

• Syntax highlighting

• Syntax checking

• JavaScript Intellisense

• Designed for apps

Developer Tools

• Google Chrome debugger

• Interactive inspection of elements

• Set breakpoints in scripts

• Reveal values of variables

Developer Tools

• Google Chrome debugger

• Interactive inspection of elements

• Set breakpoints in scripts

• Reveal values of variables

Notepad++

• Syntax highlighting

• Automatic determined

by file type

• Highlight keywords

• Highlight names (swipe

one, all shown)

Notepad++

• Syntax folding – hiding

blocks of code

• Click on + or – to fold or

unfold

Intel XDK

• Syntax highlighting.

• Syntax checker.

• Code intellisense.

• Built in device emulation.

• etc

Intel XDK

• Syntax checker

Debugging code

• First we need to have some code to look at.

• Demo Sample code.

Open sample code

• Now download the sample code from the

WIKI.

• You need extract index.html and game.js and

the images folder.

• Open both of these files with notepad++

• With the html file in view, click run on the

menu then launch in Chrome.

Open sample code

• The sample code does not run – drat!

• How do we fix this?

• Keep Chrome on your screen.

Turn on Google debugger

• Select the Wrench menu at the top-right of

your browser window, then select Tools -

> Developer tools.

• Or press F12

• The developer window opens

Finding the element

• Right-click on any page element (eg some

text) and select Inspect element.

• This will open the HTML file and highlight the selected element

Elements

• The Elements

panel allows

you to see the

web page as

the browser

sees it.

Resources

• The Resources

panel shows all

the resurces that

are loaded

Scripts

• The scripts

(source) panel

shows the

JavaScript files

that have been

loaded

Breakpoints in scripts

• Click on the

line number

to set a

breakpoint

• Hover over

the

variables to

show their

values

Using the tools

• If a page doesn’t load

• Check for the script being loaded

• If it is blank

• go to the elements page

• double click on the file

• the resources page opens and error messages will be

displayed

Check variable values

• Set a breakpoint near the suspected problem

• Hover over the variables

• In the example efficient is NaN (not a number)

• Hover over the variables to see why

Demo Debugger

• Note that Internet explorer and Firefox both

have developer tools built in. (In fact firefox

was the first.)

Debugger Activity

• Try to find and fix the errors in the sample

code and get the game demo to run.