Break On Next
The "Break On Next" button gives you the possiblity to stop the script at the next executed command. This can be a user action, a timeout or anything else that causes script execution. As soon as you click on the button, it is armed. When any script execution occurs now, the debugger will halt the script and you can step through it.
Script Type Menu
The Script Type Menu filters the Script Location Menu by different types of scripts. Thereby three different kinds of scripts are distinguished:
|static||All scripts, that are loaded together with the page (via the <script> tag)|
|eval()||Scripts, that are executed using the eval() function (typically scripts loaded via an XMLHttpRequest)|
|event||Scripts, that are generated through an event (like e. g. client side table sorting)|
You have the option to just show static scripts, static + eval scripts, static + event script or all types of scripts.
Script Location Menu
All scripts filtered by the type(s) selected in the Script Type Menu will be shown inside this menu. By selecting one of the scripts it will be shown inside the Main Panel. When you right-click you'll get options for opening the script in a seperate browser tab, copying its location to the clipboard or opening it inside the DOM Panel.
Execution Control Buttons
The execution buttons are enabled as soon as the debugger is stopped. There are four buttons, which can be used for debugging:
|Continue||F8||Continues script execution until the next breakpoint or the execution ends|
|Step Into||F11||Jumps into the body of executed functions, so you can debug them|
|Step over||F10||Executes functions, but doesn't jump into them, instead moves to the next line of the same scope|
|Step out||Shift + F11||Executes the rest of the current function and jumps back to it's caller|
You can set breakpoints to stop script execution as soon as it reaches them for debugging purposes. Currently you can manually create five different types of breakpoints:
|Script Breakpoints||Script Panel||Standard type of breakpoints|
|HTML Breakpoints||HTML Panel||Trigger on HTML manipulation|
|DOM Breakpoints||DOM Panel||Trigger on DOM property manipulation|
|XHR Breakpoints||Net Panel||Trigger on XMLHttpRequests|
For manually set breakpoints you also have the possibility to set conditions, at which they trigger. These conditions can be very complex, but most of the time you'll want to limit breaking to specific variable values. An example for this could be having a counter and you want to stop execution when the counter reaches a specific value. Another situation would be to stop execution when a specific variable is defined resp. undefined.
Furthermore the script execution can be stopped via the different implemented Break On... features of each panel, which doesn't require explicitly setting of breakpoints.
When the debugger halted the script, you are able to get information about the script variables by hovering them. A popup will appear showing the current value of the hovered variable.
The Side Panels of the Script Panel offer different useful information and functionality about the executed scripts.
The Watch Side Panel offers the possibility to enter watch expressions allowing to follow changes of variable values while debugging. To add a variable to the Watch List you can either select it inside the Main Panel and choose "Add Watch" from the context menu or you can enter it into the text field inside the Watch Side Panel. Right-clicking on a variable inside the Watch List opens a context menu with options for copying its name and path as well as options for editing or removing it from the list and refreshing the whole list. When you've added a function to the Watch List opening the context menu additionally offers you the possibility to copy the whole function, opening it inside the DOM Panel and logging calls to it inside the Console Panel. The options menu offers toggling the display of user-defined properties and functions, DOM properties, functions and constants and lets you refresh the list
While debugging the Stack Side Panel shows information about the stack trace listing the function stack for the currently debugged function. Right-clicking on one of the entries gives you the possibility to copy the function or jump to it inside the DOM Panel. For the stack there's one option inside the option menu to omit the toolbar stack
Lists the defined breakpoints and gives the possibility to toggle their activation The options of the Breakpoints options menu include removing all defined breakpoints and toggling their activation