You get a bonus - 1 coin for daily activity. Now you have 1 coin

Debug Chrome Browser

Lecture




  1. General view of the Sources panel
  2. Stopping points
  3. Stop and look around
  4. Performance Management
  5. Console
  6. Errors
  7. Total

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 :

  Debug Chrome Browser

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.

  Debug Chrome Browser

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).

Additional features
  • You can initiate a stop directly from the script code using the debugger command:
    1 function pow(x, n) {
    2    ...
    3    debugger; // <-- отладчик остановится тут
    4    ...
    5 }
  • Right-clicking on the digit of the line allows you to create a conditional breakpoint, i.e. set the condition at which the breakpoint will work.

    This is useful if a stop is needed only for a certain value of a variable or a function parameter.

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.

  Debug Chrome Browser

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:

  Debug Chrome Browser - 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.

  Debug Chrome Browser - 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.

  Debug Chrome Browser - make a move (F11).
Jumps to the next line of code. If there is a nested call, then inside the function.
  Debug Chrome Browser - 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.

  Debug Chrome Browser - 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.

Additional features

Right clicking on the line number allows you to run the code before it (Continue to here).

This is very convenient if the intermediate lines do not interest us.

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   Debug Chrome Browser or the ESC key.

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

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

1 // результат будет виден в консоли
2 for ( var i=0; i<5; i++) {
3    console.log( "значение" , i);
4 }

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   Debug Chrome Browser and then continue   Debug Chrome Browser ).

In the console you will see something like this:   Debug Chrome Browser

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   Debug Chrome Browser (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:

  Debug Chrome Browser

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.

Comments


To leave a comment
If you have any suggestion, idea, thanks or comment, feel free to write. We really value feedback and are glad to hear your opinion.
To reply

Scripting client side JavaScript, jqvery, BackBone

Terms: Scripting client side JavaScript, jqvery, BackBone