How to debug a JavaScript application. Learn how to debug JavaScript using Chrome DevTools. Error messages in IE

NetBeans IDE 7.3 introduces new type projects that can be used to develop HTML5 applications. HTML5 applications typically combine HTML, CSS, and JavaScript to create applications that run in browsers and are displayed on various devices, including smartphones, tablets and laptops. This document shows how the IDE provides tools that can be used in debugging and testing files JAVA scripts in the IDE.

If you need to debug JavaScript files In an HTML5 application, it is recommended to install the NetBeans Connector extension for the Chrome browser. Debugging support is enabled automatically when you launch the application in the browser and install the extension.

The IDE also makes it easy to set up and run unit tests on JavaScript files using the Jasmine testing framework and JS Test Driver server. You can configure the JS Test Driver to run for various modules for a variety of browsers and quickly specify the JavaScript libraries, scripts, and tests that should be loaded into the IDE when you run the tests. If a test fails, you can use a debugger to find the code with the error.

For more information about installing the NetBeans Connector extension for the Chrome browser, see training course.

For an overview of the IDE's JavaScript editing features, see JavaScript Editing in the NetBeans IDE. .

To view a demo of this tutorial, see Video on Testing and Debugging JavaScript in HTML5 Applications.

To complete this tutorial, you will need the following materials.

Notes.

This document uses the JS Test Driver server to run JavaScript module tests. It is recommended that you review the server properties in the JS Test Driver Project Home Page section.
It is assumed that the reader has basic knowledge or experience of programming HTML, CSS, and JavaScript.

Creating a Sample HTML5 Application

Produce the following actions to create a sample HTML5 application using a site template.

When you run the project using the Run button, the first page of the HTML5 application will open in Chrome browser and a list of mobile phones will be displayed there. When you click on a name mobile phone The page displays information about the phone.

Notice that the browser tab has a yellow bar, which is a notification that NetBeans Connector is debugging the tab. The IDE and browser are connected and are able to communicate with each other in cases where the yellow bar is visible. When running an HTML5 application from the IDE JavaScript debugger turns on automatically. After saving changes to a file or making changes to a table CSS styles there is no need to reload the page because the browser window automatically refreshes with the changes.

Closing the yellow bar or clicking Cancel breaks the connection between the IDE and the browser. If the connection is lost, you must relaunch your HTML5 application from the IDE to use the JavaScript debugger.

Also note that the NetBeans icon appears in the URL location of the browser field. You can click the icon to open a menu that provides various options to resize the image in the browser and to enable validation mode in NetBeans mode.

Using the JavaScript Debugger

This exercise describes how to place a breakpoint in a JavaScript file and run the application again. For quick view values of variables, you can use the editor's hint.

Expand the js node in the Projects window and double-click the controllers.js file to open the file in the editor.
Place a line breakpoint on line 16 in controllers.js by clicking the left border.

To view the breakpoints set in your project, choose Window > Debugging > Breakpoints to open the Breakpoints window.
Click the Run button on the toolbar to re-run the project.
When running the project the same page will be displayed because it has not been reached set point stop.
In your browser, click on one of the entries on the page, for example Motorola Atrix4G.
You will see that the page is partially loaded and there is no data for the phone because the data has not been passed to JavaScript and rendered.
In the IDE editor, you can see that the breakpoint has been hit and that the program counter is currently located on line 16 of the controllers.js file.
Hover your cursor over the phone variable to view a tooltip with information about the variable.

The tooltip shows the following information: phone = (Resource) Resource .
Click on a tooltip to expand it and see a list of variables and values.

For example, when expanding the android node, the values of the strings os and ui are displayed.

You can also choose Window > Debugging > Variables to view a list in the Variables window.
Use the buttons on the toolbar to navigate between JavaScript functions in the angular.js library or click Continue (F5) to resume the application.

Running JS Unit Tests

The IDE makes it easy to set up a JS Test Driver server to run unit tests. In this tutorial, you will use the JavaScript unit tests included in the sample project and use the Jasmine testing framework.

JS Test Driver is a server that provides URL address, which is the target for running JavaScript unit tests. When you run tests, the server starts and waits for the tests to run. A green status message will be displayed in the browser window to confirm that the server is running and in standby mode. The IDE provides a configuration dialog for the JS Test Driver that can be opened from the JS Test Driver node in Services. The configuration dialog makes it easy to specify the location of the JS Test Driver server JAR and the browsers in which to run the browsers. The JS Test Driver node allows you to quickly determine whether the server is running and start or stop the server.

For more information on setting up a JS Test Driver server, see the Getting Started with JsTestDriver documentation.

Download the JAR JS Test Driver and save the JAR file on your local system.
In the Services window, right-click the JS Test Driver node and select Configure.
In the Configure dialog box, click Browse and locate the downloaded JS Test Driver JAR file.
Select Chrome using the NetBeans JS Debugger feature. Click OK.

Note. Location JAR file for JS Test Driver only needs to be specified when setting up JS Test Driver for the first time.

List of browsers that can be captured and used for testing in browsers installed on the system. You can select multiple browsers as additional ones, but to run tests, the window, which can be additional for the server, must be open for each browser. The selected browsers will be captured automatically when starting the server from the IDE.
Right-click the project node in the Projects window and select New > Other.
Select jsTestDriver configuration file in the "Module Testing" category. Click "Next".
Make sure that jsTestDriver specified as "File Name".
In the File Generated field, make sure the file is located in the project's config folder (AngularJSPhoneCat/config/jsTestDriver.conf).
Note. The jsTestDriver.conf configuration file should be in the project's config folder. If the location of the generated file is not the config folder, click Browse and select the AngularJSPhoneCat - Configuration Files folder in the dialog box.
Make sure the box to load Jasmine libraries is checked. Click the "Done" button.

Note. To run jsTestDriver you need to download the Jasmine libraries. If you receive a notification that the IDE is unable to load the Jasmine libraries, check your IDE proxy settings in the Options window.

After clicking the "Done" button IDE will create a schema configuration file jsTestDriver.conf and open the file in the editor. The Projects window displays that a configuration file has been created under the Configuration Files node. If you expand the lib folder in the Unit Tests node, you will see that Jasmine libraries have been added to the project.

In the editor you can see the following contents of the configuration file, which is created by default:
Server: http://localhost:42442 load: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js exclude:
The configuration file defines the default location on local server, which is used to run tests. The file also specifies the files that should be downloaded. By default, the list includes Jasmine libraries and all JavaScript files that are located in the unit folder. Tests are usually located in the unit folder, but you can change the list to specify the location of other files that need to be loaded to run the tests.

Folder of modules of the project "Training course on telephone directory AngularJS" contains four JavaScript files with unit tests.

To run unit tests, you can also add the location of the JavaScript files you want to test and Angular JavaScript libraries to the list of downloaded files.
Add the following locations (highlighted bold font) to the load section of the configuration file. Save your changes. load: - test/lib/jasmine/jasmine.js - test/lib/jasmine-jstd-adapter/JasmineAdapter.js - test/unit/*.js
- app/lib/angular/angular.js - app/lib/angular/angular-*.js - app/js/*.js - test/lib/angular/angular-mocks.js
Disable any breakpoints set in the project.
Clicking Test IDE automatically opens the JS Test launcher in the Chrome browser and two tabs in the Output window.

A message indicating that the jsTestDriver server is starting is displayed in the Chrome browser window. A message is displayed indicating that the server is running on localhost:42442. The js-test-driver Server tab in the Output window displays the server status.

Note. To run unit tests, the browser window must be open and the jsTestDriver server must be running. You can start the server and open the window by right-clicking the JS Test Driver node in the Services window and selecting Start.

On the Run JS Module Testing tab, Output shows the output of the four tests that were run. The tests are located in the controllerSpec.js and filtersSpec.js files. (The servicesSpec.js and directivesSpec.js files do not have tests in the unit folder.)
Select Window > Results > Test Results from the main menu to open the Test Results window.
The window displays a message that all tests were successful.

You can click green flag in the left border of the window to view an extended list of successfully completed tests.

Debugging JS Unit tests

This exercise demonstrates how you can use the IDE to debug JavaScript files when a unit test fails.

Expand the js folder in the Projects window and double-click the controllers.js file to open the file in the editor.
Change line 7 in the file to make the following changes (highlighted bold font). Save your changes. function PhoneListCtrl($scope, Phone) ( $scope.phones = Phone.query(); $scope.orderProp = ""; }
name
When saving changes, the page is automatically reloaded in the browser. Displays the change in the order of phones in the list.
Make sure that the JS Test Driver server is running and that the status message is displayed in the Chrome browser window.

Right-click the project node in the Projects window and select Test.
When you run the test, you can see that one of the tests has an error saying that the value "name" was found instead of the expected value "age".

Open the "Run JS unit tests" tab in the "Output" window.
A message is displayed stating that orderProp must be age on line 41. bold font) it("should set the default value of orderProp model", function() ( expect(scope.orderProp).toBe("age"); });
You can see that the test expected "age" as the value of scopeOrder.prop .
Set a breakpoint at the line where the test failed (line 41).
Right-click the project node in the Projects window and select Testing.
When the test is restarted, the program counter will reach the breakpoint. When you hover over scopeOrder.prop, the tooltip shows that the variable is set to "name" when the breakpoint is hit.

Alternatively, you can select Debug > Expression Evaluation from the main menu to open the Code Evaluation window. When you enter the expression scopeOrder.prop in the window and click the Evaluate Code Snippet () button (Ctrl-Enter), the debugger displays the value of the expression in the Variables window.
Click the Continue button on the toolbar to complete the test.

Conclusion

This tutorial demonstrates how the IDE provides tools that can be used to debug and test modules in JavaScript files. Debugging is enabled automatically for HTML5 applications when you run the application in the Chrome browser, provided that the NetBeans Connector extension is enabled. The IDE also makes it easy to set up and run unit tests on JavaScript files using the Jasmine testing framework and JS Test Driver server.

1. 'debugger;'

After console.log, ‘debugger;‘ my favorite quick and dirty debugging tool. Once you add it to your code, Chrome automatically stops code execution at that point. You can even wrap it in a condition so that it only fires when you need it.

If (thisThing) (debugger; )

2. Displaying objects as tables

Sometimes you have complex set objects you want to view. you can use console.log to display them, and then scroll through a huge list, or use console.table. This makes it much easier to understand what you are dealing with.

Var animals = [ ( animal: "Horse", name: "Henry", age: 43 ), ( animal: "Dog", name: "Fred", age: 13 ), ( animal: "Cat", name: " Frodo", age: 18 ) ]; console.table(animals);

3. Try watching at different resolutions

It would be amazing if there was any mobile device, however in real world this is impossible. How to resize the viewport? Chrome gives you everything you need. Go to Developer Tools and then click on the Switch Device Mode button. See your media expressions come to life!

4. Quickly search for DOM elements

Select a DOM element in the Toolbox, and then access it in the console. Chrome's dev tools remember the last five elements: the last selected element $0, the second to last selected element $1, etc.

If you chose the following elements in the order 'item-4', 'item-3', 'item-2', 'item-1', 'item-0', then you can access the DOM elements as shown in the console:

5. Measuring code execution time using console.time() and console.timeEnd()

It can be very useful to know how long it takes to execute a piece of code, especially when debugging slow loops. You can set multiple named timers. Let's see an example:

Console.time("Timer1"); var items = ; for(var i = 0; i< 100000; i++){ items.push({index: i}); } console.timeEnd("Timer1");

This code will produce the following result:

6. Obtaining a stack trace for a function

You probably know that JavaScript frameworks contain a lot of code.

This code renders the interface, fires events, so eventually you'll want to know what caused the function to be called.

Since JavaScript is not very structured language, sometimes it is useful to get information about what happened and when. At this moment he comes on stage console.trace.

Imagine you want to see the entire call stack for a function funcZ in copy car on line 33.

Var car; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); ) this.funcZ = function() ( console.trace('trace car') ) func1(); var car; var func1 = function() ( func2(); ) var func2 = function() ( func4(); ) var func3 = function() ( ) var func4 = function() ( car = new Car(); car.funcX( ); ) var Car = function() ( this.brand = 'volvo'; this.color = 'red'; this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this .funcZ(); ) this.funcZ = function() ( console.trace('trace car'); ) ) func1();

Now we see that func1 causes func2, which causes func4. Func4 creates an instance Car and then calls the function car.funcX, etc.

Even if you think you know the program execution script well, this can be very convenient. Let's say you want to improve your code. Get a stack trace and a list of all associated functions, each of which is viewable.

7. Formatting minified code

Sometimes you may encounter a problem right in production, but your source maps are not on the server. It's OK. Chrome can format your JavaScript files to make them more readable format. Of course, the code will not be as informative as source, but at least you can understand what's going on in it. Click the button {} « Pretty Print", located under the code viewer in the inspector.

8. Quickly debug a function

Let's say you want to add a breakpoint to a function.

There are two most common ways to do this:

Find the desired line in the inspector and add a breakpoint
Add debugger to your script

Both of these solutions require searching the desired file And the desired line, which you want to debug.

Using a console for this purpose is probably less common. Use debug(funcName) in the console, and the script will pause when it reaches the desired function.

This is very quick way however it does not work on private and anonymous functions. But if your situation is different, then this is probably the fastest way to debug the function. (Author's note: there is a function console.debug, which is needed for another.)

Var func1 = function() ( func2(); ); var Car = function() ( this.funcX = function() ( this.funcY(); ) this.funcY = function() ( this.funcZ(); ) ) var car = new Car();

9. Scripts that do not require debugging

10. Find important things with more advanced debugging techniques

More complex debugging scenarios may require many lines of output. One way to structure the output data is to use various functions console. For example, console.log, console.debug, console.warn, console.info, console.error, etc. You can then filter them in the inspector. But sometimes this is not exactly what you need when debugging. Now you can manifest creativity, and create your own data output formats in the console using CSS.

Console.todo = function(msg) ( console.log(' % c % s % s % s', 'color: yellow; background - color: black;', '–', msg, '–'); ) console .important = function(msg) ( console.log(' % c % s % s % s', 'color: brown; font - weight: bold; text - decoration: underline;', '–', msg, '– '); ) console.todo(“This is something that's need to be fixed”); console.important(‘This is an important message’);

11. Track function calls and function arguments.

IN Chrome console, You can monitor certain functions. Every time a function is called, it will be logged along with the parameters passed to it.

Var func1 = function(x, y, z) ( //.... );

This great way see with what arguments the function is called. But I have to say that it would be nice if the console could determine how many arguments to expect. In the above example func1 expects three arguments, but only two are passed. If this is not handled in code, it may result in an error.

12. Quick access to elements in the console

A faster way to use querySelector in the console is to use $. $('css-selector') will return the first matching element, and $$('css-selector') will return all matching elements. If you use an element more than once, you can save it to a variable.

13. Postman is great (but Firefox is faster)

Many developers use Postman to test AJAX requests.

Sometimes it is easier to use a browser for these purposes.

When you no longer worry about login cookies if you are working on a password protected page. Here's how you can edit and resend requests in Firefox.

Open the inspector and go to the Network tab. Right-click on the request you are interested in, and then select “Edit” and “Resend.” Now you can change anything: correct the title, edit the parameters and click “Resend”.

Below I have given an example of a request that was sent several times with different parameters:

14. Breakpoint when a DOM element changes

The DOM can be funny. Sometimes, elements in it change for reasons unknown to you. However, when you need to debug JavaScript, Chrome allows you to pause code execution when a DOM element changes. Right-click on the element of interest in the inspector, and select a condition to stop execution.

This article will be useful web developers who are getting started with JavaScript and becoming familiar with the development tools built into the browser. The ability to “debug” a JavaScript application is very important for a web developer, as it allows you to quickly find the cause of an error in a script.

Debugging in Google Chrome

Debugging the application- the process of detecting, localizing and eliminating errors using a debugger (a tool built into the development environment or other software). When debugging, the developer can learn the values of variables and the progress of the program.

In all modern browsers There are tools that allow a developer to analyze the operation of a web application, including debugging JavaScript code. To open web developer tools, most browsers use the F12 key. This article will discuss JavaScript debugging applications using the example of the Web Inspector tool in Google browser Chrome.

Below is the HTML code of the page with a simple script that will be parsed with using the Web Inspector.

< div id="myDiv"> div>

< script>

Var div = document.getElementById("mydiv");

vartext ="" ;

for ( vari = 0; i< 10; i++)

Text += i +" " ;

Div.innerHTML = text;

< script>

The goal of this script is to create a series of numbers from 0 to 9 and display them in div element On the page. But the code does not work, and we will try to find the problem by debugging.

Launch Web Inspector and switch to the debugger window.

By pressing the F12 key, we get the following window in Google Chrome.

Make sure that the Sources menu item is selected, which allows you to debug.

The debugging window is divided into three panels (marked with numbers in the image):

1 - Panel of files connected to current page, which contain JavaScript code.

2 - Panel in which the JavaScript code of the selected file will be displayed.

3 - Panel with additional settings, simplifying debugging.

Setting a breakpoint or breakpoint

In order to begin debugging the application, you need to determine at what stage the script execution will stop. To do this, as with most other debugging tools, you need to set a breakpoint or breakpoint.

Breakpoint) - a mark that tells the debugger at what point in the application's execution to pause.

First, you need to select the file in which JavaScript debugging will be performed (to do this, double-click on the index.html file)

After that, set a breakpoint by clicking on the line number in the central panel, which displays the code of the selected file. The breakpoint is shown as a blue rectangle. Now, if you refresh the page, the script should run to line 9 and stop. Next, we can step-by-step debug the application and monitor the values of the variables in the script.

One of the advantages of the debugger is the display of errors thrown by the interpreter. On line 14, the message is displayed - Uncaught TypeError: Cannot set property 'innerHTML' of null. This post may already help in solving the script problem. The script tries to access a property on a div variable - the message says that this variable is null and property values cannot be set for null. If the variable contains null, then you need to look for the code that writes the value to the variable.

Step-by-step JavaScript debugging

After installing the breakpoint, you need to start debugging. To do this, just refresh the page (F5). If there was a breakpoint, the script stopped at line No. 9 (this is indicated by the blue highlighting of the line).

From time to time, developers make coding mistakes. An error in a program or script is called a bug.

The process of finding and fixing errors is called debugging and is a normal part of the development process. This section discusses tools and techniques that can help you debug tasks.

Error messages in IE

The easiest way to track errors is to enable error reporting in your browser. Default Internet Explorer shows an error icon in the status bar when an error occurs on the page.

Double-clicking this icon will take you to a dialog box displaying information about the specific error.

Because this icon can be easily overlooked, Internet Explorer gives you the option to automatically display an Error dialog box whenever an error occurs.

To enable this option, select Tools → Internet Options → Advanced tab. and then finally check the "Show notification on every script" checkbox as shown below -

Error messages in Firefox or Mozilla

Other browsers, such as Firefox, Netscape, and Mozilla, send error messages to a special window called JavaScript Console or Error Console. To view the console, select Tools → Error Console or Web Development.

Unfortunately, since these browsers do not provide visual information when an error occurs, you should keep the console open and watch for errors as your script runs.

Error Notifications

Error notifications displayed in the console or via dialog boxes Internet Explorer errors are the result of both syntax and runtime errors. These error notifications include the line number where the error occurred.

If you are using Firefox, you can click on the error available in the error console to go to exact line in the script with an error.

How to debug a script

Exist various ways debugging your JavaScript - Use JavaScript Validator

One way to check JavaScript code for weird errors, run it through a program that checks it to make sure it's valid and that it follows the official syntax rules of the language. These programs are called parsers or just validators for short and often come with commercial HTML editors and JavaScript.

The most convenient validator for JavaScript is Douglas Crockford's JavaScript Lint, which is available for free in Douglas Crockford's JavaScript Lint.

Simply visit this web page, paste the JavaScript code (JavaScript only) into the text area provided and click the jslint button. This program will analyze your JavaScript code, ensuring that all variable and function definitions follow correct syntax. He will also check JavaScript instructions, such as if and while, so that they also follow the correct format

Add debugging code to your programs

You can use alert() or document.write() methods in your program to debug your code. For example, you could write something like this:

var debugging = true; var whichImage = "widget"; if(debugging) alert("Calls swapImage() with argument: " + whichImage); var swapStatus = swapImage(whichImage); if(debugging) alert("Exits swapImage() with swapStatus=" + swapStatus);

By examining the contents and order of alert() as they appear, you can easily test the functionality of your program.

How to Use the JavaScript Debugger

A debugger is an application in which all aspects of script execution are under the control of the programmer. Debuggers provide fine-grained control over a script's state through an interface that allows you to inspect and set values and control the flow of execution.

Once the script is loaded into the debugger, it can be run one line at a time or instructed to stop at certain control points. When execution is stopped, the programmer can check the state of the script and its variables to determine if anything is wrong. You can also view variables to change their values.

Use a lot of comments. Comments allow you to explain why you wrote the script the way you did and explain particularly difficult sections of the code.
Always use indentation to make your code easy to read. Indentation also makes it easier for you to match start and end tags, curly braces, and other HTML elements and script.
Write modular code. Whenever possible, group your statements into functions. Functions allow you to group related statements and test and reuse pieces of code with minimal effort.
Be consistent in how you name your variables and functions. Try to use names that are long enough to be meaningful and describe the contents of a variable or the purpose of a function.
Use consistent syntax when naming variables and functions. In other words, keep them lowercase or uppercase; if you prefer Camel-Back notation, use it consistently.
Check long scripts in a modular way. In other words, don't try to write the entire script before testing any part of it. Write the part and run it before adding the next part of the code.
Use descriptive names for variables and functions and avoid using single-character names.
Watch out for the quotes. Remember that quotes are used in pairs around strings and that both quotes must be the same style (one or two).
Keep track of your equal signs. You shouldn't use one = for comparison purposes.
I explicitly declare variables using keyword var.

Firebug contains a powerful AvaScript debugger that gives you the ability to pause execution at any time and view every variable at that moment. If your code is sluggish, use a JavaScript profiler to measure performance and quickly find bottlenecks.

Find scripts with ease

Many web applications consist of large number files, and finding the one to debug can be a routine and boring task. Firebug's script selection menu sorts and organizes files into a clear, easy-to-understand list that helps you find any file with the click of a finger.

Pause execution at any line

Firebug allows you to set breakpoints, which tell the debugger to stop executing the script when it reaches specific string. While execution is suspended, you can view the values of any variables and inspect objects.

To set a breakpoint, click on any line number and a red dot will appear there, indicating that the breakpoint has been set. Click on the red dot again to remove the breakpoint.

Pause execution only if...

Breakpoints can cause problems if triggered too often. Sometimes we want to pause execution only when certain conditions are met. Firebug allows you to set "conditional" breakpoints. They check an expression that must be true for the breakpoint to work.

To set a conditional breakpoint, simply right-click on any line number. A bubble will appear prompting you to enter a javascript expression. You can right click again at any time to change the expression, or left click to get rid of the breakpoint.

One step at a time

When the debugger has paused execution, you can continue the script one step at a time. This allows you to clearly see how executing a specific line affects variables and objects.

You can also continue execution for more than one line. Select in context menu the desired line "Run to this Line" to continue execution to this line.

I get interrupted when I make mistakes

You don't always choose the debugger... Sometimes the debugger chooses you. Firebug gives you the ability to jump into the debugger automatically when an error occurs, so you can investigate the conditions under which the problem occurred.

Unfolded stack

When the debugger pauses, Firebug shows you the call stack, which is the collection of nested function calls that are currently running and waiting to return.

The call stack is represented by a compact strip of buttons in the panel, each with the name of a function on the stack. You can click any button to jump to the line where the function is paused and look at the values of local variables from inside the function.

Expression Watching

When debugging, you often want to see the meaning of complex expressions or objects that are buried in the DOM. Firebug allows you to print an arbitrary javascript expression, the value of which will be updated at each debugger step.

When typing expressions, remember that you can use Tab key for auto-completion of object properties.

Variable Hints

While execution is paused, you can move the mouse over any variables current function by viewing tooltips with values. This is a great way to keep your eyes on the code and get answers while you read.

Profile JavaScript Performance

Your web application is almost perfect. You have worked through all the errors, done stylish design and users love it. Just one problem - some features are slow and you're not sure why...

With Firebug, you no longer have to wonder why your code is running slow. Using the Firebug profiler, you can separate flies from cutlets in literally seconds.

To use the profiler, simply go to the Console tab and click the "Profile" button. Then use your application for a while or reload the page and click "Profile" again. You'll see a detailed report that shows which functions were called and how long each one took.

Logging function calls

Sometimes the problematic function is called so many times that you cannot go into the debugger each time. You just want to know when it is called and with what parameters.

To track all function calls, simply right-click on the Script tab and select "Log calls to "function name"". Then go to the console and watch the calls appear in the log...

Go straight to line 108

Often you want to go clearly to the desired line of your script. There is nothing easier, just type the line number in the window quick search, putting # first, as shown in the left screenshot.