level 3 extended diploma unit 22 developing computer...
TRANSCRIPT
![Page 1: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/1.jpg)
Tools and Debugging
Level 3 Extended Diploma
Unit 22
Developing Computer Games
Ref: https://developers.google.com/chrome-developer-tools/docs/overview
![Page 2: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/2.jpg)
Developer Tools
• Notepad++
• Syntax highlighting
• Syntax folding – hiding blocks of code
• Intel XDK
• Syntax highlighting
• Syntax checking
• JavaScript Intellisense
• Designed for apps
![Page 3: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/3.jpg)
Developer Tools
• Google Chrome debugger
• Interactive inspection of elements
• Set breakpoints in scripts
• Reveal values of variables
![Page 4: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/4.jpg)
Developer Tools
• Google Chrome debugger
• Interactive inspection of elements
• Set breakpoints in scripts
• Reveal values of variables
![Page 5: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/5.jpg)
Notepad++
• Syntax highlighting
• Automatic determined
by file type
• Highlight keywords
• Highlight names (swipe
one, all shown)
![Page 6: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/6.jpg)
Notepad++
• Syntax folding – hiding
blocks of code
• Click on + or – to fold or
unfold
![Page 7: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/7.jpg)
Intel XDK
• Syntax highlighting.
• Syntax checker.
• Code intellisense.
• Built in device emulation.
• etc
![Page 8: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/8.jpg)
Intel XDK
• Syntax checker
![Page 9: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/9.jpg)
Debugging code
• First we need to have some code to look at.
• Demo Sample code.
![Page 10: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/10.jpg)
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.
![Page 11: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/11.jpg)
Open sample code
• The sample code does not run – drat!
• How do we fix this?
• Keep Chrome on your screen.
![Page 12: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/12.jpg)
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
![Page 13: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/13.jpg)
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
![Page 14: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/14.jpg)
Elements
• The Elements
panel allows
you to see the
web page as
the browser
sees it.
![Page 15: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/15.jpg)
Resources
• The Resources
panel shows all
the resurces that
are loaded
![Page 16: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/16.jpg)
Scripts
• The scripts
(source) panel
shows the
JavaScript files
that have been
loaded
![Page 17: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/17.jpg)
Breakpoints in scripts
• Click on the
line number
to set a
breakpoint
• Hover over
the
variables to
show their
values
![Page 18: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/18.jpg)
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
![Page 19: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/19.jpg)
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
![Page 20: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/20.jpg)
Demo Debugger
• Note that Internet explorer and Firefox both
have developer tools built in. (In fact firefox
was the first.)
![Page 21: Level 3 Extended Diploma Unit 22 Developing Computer Gameswiki.hct.ac.uk/_media/computing/btec/level3/unit22lesson3debugging... · Tools and Debugging Level 3 Extended Diploma Unit](https://reader031.vdocuments.site/reader031/viewer/2022022803/5c81a2bd09d3f2b4078ce578/html5/thumbnails/21.jpg)
Debugger Activity
• Try to find and fix the errors in the sample
code and get the game demo to run.