Learning about Your HTML5 Game Development Environment - HTML5 Mobile Game Development - page 116

Problems with your game can generally be traced to either JavaScript errors or resource loading problems.
Resource loading problems, such as putting the wrong path in to a JavaScript file or asset, strike far more often
than you might guess and cause headaches because they aren't the first thing you'll try to debug.
Taking a quick peak at the Network tab can help you solve many resource loading problems. It shows you
the actual response status of each of the resources you want to load and highlights any problems with the file
you load. The tab needs to be open to capture resource usage, so you may need to reload the page to view the
requests made.
One common problem is the issue of capitalization. When you test a game locally using a file:/ / URL,
the capitalization of filenames doesn't matter. If you have a file called engine.js and you try to load it in
a script file as Engine.js , the browser happily loads the file and pretends that nothing is wrong. After you
deploy your game on a website, unless your web server is a Windows machine, capitalization matters, and the
asset won't load.
Imagine you load your game that works perfectly locally but sits there blankly after you put it on the web.
Before trying to track down imaginary browser bugs, open the Network tab. If you see something such as Figure
7-7 , you can pinpoint the issue right away.
Figure 7-7: A resource that failed to download.
The request for the mistakenly capitalized Engine.js is invalid. Although this would probably be
something you would eventually figure out with other methods, when you get deep into asset requests, taking
a quick peek at the Network tab to check on invalid paths can save you a lot of time and frustration when sud-
denly some sprite isn't showing up on the screen.
A second major use of the Network tab is tracking down slow requests. Getting your game loaded and play-
able as quickly as possible should always be a goal. Pulling assets from a slow server can cause a marked
slowdown in your game. If you refer to Figure 7-6 , you can see exactly how long each of the assets loaded by
Chapter 3's Alien Invasion takes to load. In this case the sprites.png file takes the most time. Moving the
file to a CDN might help, but because the entire game loads in less than 1 second, there's probably not that