Hi, this is Mozilla and in this video we will see how to use the dev tools in Firefox to
debug our games.
We will be using a special version of Firefox called Developer Edition. This version is
tailored to developers, since it contains features 12 weeks before their final release.
It also has a custom theme and some developer tools that are not available in the regular
version of Firefox.
It also has a separate user profile, so it can remain separated from the add-ons and
settings of your regular Firefox (which is quite handy).
You can download it from mozilla.org/firefox/developer
To access the dev tools, you go to the Tools Menu and then Web Developer, then “Toogle
tools”. Or you can also use the keyboard shortcut that appears in the menu.
This panel will appear. Let’s start with the Console tab. This is a JavaScript console,
and from here you can customise the JavaScript that is running in the page. This is very
useful for debugging –since you can query and execute code on the fly–, but also for
fine-tuning values.
For instance, let’s imagine that we need to adjust the speed of this character. See
how it moves now. We are storing the speed at some variables, so they are easier to change
later. The running speed is at `Hero.SPEED`. Right now this is its value. Let’s put something
lower… And here it is, it’s moving more slowly now.
What about jumping? That value is in Hero.JUMP_SPEED. This is its current value and this is how
far the character can jump. Let’s try setting a bigger value and… Wow! That is way too
much.
After finding the values you are happy with, remember that you can transform your variables
into constants, or make them private, so your code is encapsulated and clean.
We will now see how the Responsive Design View works. This is very useful if you want
to make a game than can run in a variety of screen sizes, such as mobiles and tablets.
So this is how the game currently looks on a big desktop screen. Let’s see how it looks
like in other screen sizes. Go to the Tools Menu, then Web Developer, then Responsive
Design View. Or you can use the keyboard shortcut as well.
Here we can see a dropdown with some predetermined screen sizes. We also have this button to
switch orientation from portrait to landscape. OK, so the game definitely doesn’t look
good on mobile. Let’s fix it in code.
This game is using Phaser as a game framework. How you fix this will depend on your actual
code and what you are using. I’m going to use Phaser’s scale manager to stretch the
canvas as much as possible, while respecting the game’s aspect ratio.
Let’s see if it worked. We reload the game, and the problem is kind of fixed, but there
are these big black areas at the bottom. This is because the game needs to be centered.
So, back to code, and I’ll change the alignment. Let’s reload and… see? The black space
is the same at the top than at the bottom. Problem solved!
What about other screen sizes? Let’s select another one from the dropdown and… sweet
Firefox has a JavaScript debugger with the features you would expect: pause the execution,
go step by step, breakpoints, variable inspection…
To use it, just open the Debugger tab in the developer tools panel. Let’s put a breakpoint
in our code. We can search for function names in the search box by using the @ symbol prefix.
Let’s search for a function named 'create' belonging to the PlayScene object.
Here’s the code for this function. Let’s put a breakpoint in this line, and then reload
the browser. We don’t need to reload for breakpoints to take effect. I’m doing it
now because this function only gets called once, at the beginning of the game.
So here we are. The execution is paused at this line, and here on the right side we can
see the current stack and inspect the variables there.
Now we can go step by step. We also have the access to the console by clicking this button.
With it, we can execute code and inspect variables as well. If we click an object, we will see
a breakdown of it in the right sidebar.
Besides going step by step, we can also step into a function with this button. And we step
out of it with this other one. Once we are done, we can resume the normal execution by
clicking the first button in the toolbar.
We can also set breakpoints from inside our code. To do that, just type `debugger`.
Once we reload, we can see that the execution stops automatically. Now we can go to the debugger
and use it as we normally do.
The debugger can also help us to fix unhandled exceptions in our code. Here we can see that
our character isn’t jumping, and that there’s an exception printed in the console.
If we go to the debugger panel and click on the small gear icon, we can enable the “Pause
on exceptions” setting. This time, when we try to jump, the debugger automatically
pauses the execution because an exception has been raised. It will take us directly
to the line where this happened. And we can see this because we made a typo with a function
name.
Let’s go back to the text editor and fix it. Now after reloading we can see that we
have fixed the bug and the character can jump as usual.
We can inspect all the requests that are made in the Network panel.
In the dev tools, click in the Network tab and we will be prompted to reload the page to be able to see all the requests.
Let’s do that.
Here are our requests in chronological order. We can also see more details by clicking on
them. We get the HTTP code, the headers, the response, etc.
On the right side we can see when they were made and how long they took to complete.
OK, let’s move on. If we click on play, the game will perform more requests since
it needs to load all the assets.
So here they are, a bunch of PNG files. We can also get a preview of them.
The Network panel is very useful to find out the reason your game takes too long to load,
as well as detecting why a particular file is not being loaded at all.
In the Performance panel we can profile our game and measure its frames per second, or
detect if we have a bottleneck in our code.
Let’s click on “start recording performance” and play with the game for a bit.
Now if we stop we can see the frames per second here, and also the average on the right side.
Here are the function calls that have been made, in chronological order.
If we go to the Call Tree tab, we get some statistics so we can know which functions
occupy most time the CPU.
The flame chart is useful to detect spikes in performance. If your framerate drops, chances
are that you will see an spike on this chart. You can zoom in and inspect which functions
have been called in that moment and decide if you need to optimise one of them.
This is all for now. Download Firefox Developer Edition and give it a try.
Until next time!