Debug Chrome Browser

Before moving on, let's talk about debugging scripts.

All modern browsers support for this "developer tools". Error correction with their help is much easier and faster.

At the moment, the most versatile tools - in the Chrome browser. Firebug is also very good (for Firefox).

General view of the Sources panel

Visit the tutorial / debugging / pow / index.html Chrome browser page.

Open the developer tools: F12 or go to Инструменты > Инструменты Разработчика .

Select from above Sources :

Buttons that we will use:

1. Opens a list of scripts and styles connected to the page.
2. Turns the console on / off (ESC).
3. Double clicking on this button causes the debugger to stop at JavaScript errors (the button changes color to purple).
4. The code can be debugged in formatted form, if you enable this button.
5. The flow control panel in debug mode. We will need it soon.

Stopping points

We went to the page? Expand the list of scripts by clicking on button 1, and select pow.js Click on the 6th line, right on the number 6.

Congratulations! You set your first breakpoint.

The word breakpoint is a commonly used English jargon. In Russian-language manuals, the term “stopping point” is used. This is the place in the code where the debugger will stop the execution of JavaScript as soon as it gets to it.

In the stopped code, you can view any variables, execute commands, etc.

On the right-bottom is the Breakpoints tab, in it you can:

• View stop points.
• Turn them off by clicking on the checkbox.
• When you click on a stopping point, a transition occurs to the appropriate place in the code (conveniently, when there are many).

Stop and look around

Our function is executed immediately when the page loads, so the easiest way to activate JavaScript is to reload it. So, press F5.

If you did everything as described above, then execution will abort just on the 6th line.

Pay attention to the informational tabs on the right (marked with arrows).

In them we can see the current state:

1. Watch Expressions - shows the current values ​​of any expressions.

   You can expand this tab, click + on it and enter any expression or variable name. The debugger will display its value.

2. Call Stack - nested calls (otherwise called “call stack”).

   At the moment, you can see that the debugger is in the function pow (pow.js, line 6), called from an anonymous code (index.html, line 13).

3. Scope Variables are variables.

   Currently, line 6 has not yet completed, so result is undefined .

   Local shows variable functions: declared via var and parameters. You can also see the this variable there, it is created automatically. If you do not know what it means - do not worry, we will discuss this in the chapter on this context in detail.

   In Global , global variables that are outside of functions.

Performance Management

The time has come to drive the script and ottrait "(from the English. Trace, track) his work.

Pay attention to the control panel in it there are 4 main buttons:

- continue execution (F8).

If the script does not meet the new breakpoints, then the work in the debugger will end.

Click this button.

You will see that the debugger remained on the same line, but a new call appeared in the Call Stack . This happened because the 6th line contains the recursive call of the pow function, i.e. control passed into it again, but with different arguments.

Go up and down the stack - you will see that the arguments are really different.

- take a step without going inside the function (F10).

Executes one line of script. If there is a function call in it, the debugger bypasses it, i.e. does not switch to code inside.

Click this button.

The debugger will go to line 7. Everything is correct, although there is subtlety.

The fact is that in the pow nested call there is a breakpoint, and the debugger always stops on enabled breakpoints. Even if the nested call and this button is pressed.

... But in this case, the nested call will be with n=1 , so if will work and control will not reach line 6. Therefore, there is no stopping.

- make a move (F11).

Jumps to the next line of code. If there is a nested call, then inside the function.

- perform until exit from the current function (Shift + F11).

As soon as the current function is completed, the debugger immediately stops the script.

Conveniently, if we inadvertently entered an embedded call, which is not at all interesting to us - in order to quickly get out of it.

- disable / enable all breakpoints.

This button does not move us around the code, it allows you to temporarily disable all the breakpoints in the file.

The debugging process is that we stop the script, look at the variables, go further and look for where the behavior deviates from the correct one.

Console

When debugging, besides viewing variables, it is useful to run JavaScript commands. For this you need a console.

You can go to it by clicking the “Console” button at the top-right, or you can open it in addition to the debugger by clicking the button or the ESC key.

The most favorite development team: console.log(...) .

She writes the arguments passed to her in the console, for example:

Full information on special console commands you can get at http://firebug.ru/commandline.html. These commands also work in Firebug (a debugger for the Firefox browser).

The console supports all browsers, but IE <10 does not support all functions. Logging works everywhere, use it instead of alert .

Errors

JavaScript errors are displayed in the console.

For example, open the tutorial / debugging / pow-error / index.html page. You can stop the previous debugging (clear breakpoints and then continue ).

In the console you will see something like this:

Yes, indeed, this is because there is an error in this script. But what's the matter? Let's see what the variable values ​​were at the time of debugging. To do this, let the debugger stop at an error by double-clicking on (until purple).

By the way, to see this button, you need to be in the Sources tab, not in the Console.

Now reload the page. The debugger stops at the line with the error:

You can see the values ​​of variables. Put break points before the code and see what led to such a sad picture.

In this case, everything is simple: a typo in the name of the variable y instead of x . This type of error is called ReferenceError .

Total

The debugger allows you to:

• Stop at a marked place (breakpoint) or with a debugger command.
• Execute the code - one by one or to a certain place.
• Watch variables, execute commands in console, etc.

This article briefly describes the features of the Google Chrome debugger related specifically to working with code.

So far this is all we need, but, of course, developer tools can do a lot more. In particular, the Elements tab allows you to work with the page (you will need it later), Timeline — see what the browser does and how much it takes, etc.

You can learn in two ways:

1. Official documentation (in English)
2. Right-click and double-click in different places and see what happens.