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.