The Console panel allows you to log different kind of information and shows you errors and warnings your scripts are causing.
Logging errors and warnings
Logging user-defined info
There is an integrated Profiler, which allows measuring the performance of the functions inside the code and gives detailed information about the timing.
The Script panel and its side panels allow step-debugging your code and give various information to each stack frame.
Ways to break script execution
To be able to debug your code the script execution needs to be stopped at a specific point in your code. There are several ways to achieve that.
Normally you will set breakpoints by clicking the Breakpoint Column at the left side of the line you want to start debugging inside the Script Panel. Not only the Script panel allows setting breakpoints, but also several other panels like e.g. the Net or the HTML Panel allow setting panel-specific breakpoints. If the panel has a Breakpoint Column, you will be able to click on it like inside the Script panel. Or you can add a breakpoint via the context menu of an item inside the panel.
Currently you can create these types of breakpoints:
|Script Breakpoints||Script Panel||Trigger when the line inside the Script is reached|
|HTML Breakpoints||HTML Panel||Trigger on HTML manipulation|
|DOM Breakpoints||DOM Panel||Trigger on DOM property manipulation|
|XHR Breakpoints||Net Panel||Trigger on XMLHttpRequests|
|Cookie Breakpoints||Cookies Panel||Trigger on cookie manipulation|
Some panels even allow you to set a condition for a breakpoint to control when it triggers. This can be done by right-clicking the Breakpoint Column and entering the condition in the upcoming editor.
The set breakpoints can be managed via the Breakpoints Side Panel.
When you write
debugger; somewhere inside your code, the script execution will be stopped automatically as soon as it hits that line.
Break On ...
The Break On ... feature allows you to stop the script execution as soon as a specific event occurs. Several panels have a Break On ... button, which will break the script execution as soon as a specific event occurs.
The Script Panel will show a stack frame path at its panel toolbar. Clicking an item of this path allows you to switch between the different stack frames and inspect the variables set within that frame via the Watch Side Panel. You can also use the Stack Side Panel to inspect the different stack frames. There you will also see the script name and line number of each frame and the parameters in case the called function had some.
While the execution is halted you will be able to control the execution via the Execution Control Buttons. Stepping to the next stack frame will show you all the information related to that frame inside the Watch Side Panel. Also you can get that info by hovering variables and functions within the Script panel.