Difference between revisions of "Troubleshooter Debugger Tab"
Yvonne.milne (Talk | contribs) (→The Debugger Tab) |
Yvonne.milne (Talk | contribs) (→The JavaScript Debugger Tab) |
||
| Line 29: | Line 29: | ||
or the debug() function: | or the debug() function: | ||
| − | [[{{ns:file}}:troubleshooter_jsdebugger1cc.png | + | [[{{ns:file}}:troubleshooter_jsdebugger1cc.png|left|link={{filepath:troubleshooter_jsdebugger1cc.png}}|Debug() Function]] |
<br clear=all> | <br clear=all> | ||
| Line 43: | Line 43: | ||
<br clear=all> | <br clear=all> | ||
| − | Alternatively, in the [[Pages Workspace]], clicking on the 'flag' icon in the header of a Section loads the JavaScript Scripting Libraries and/or source code for that Section into the JavaScript Debugger. | + | Alternatively, in the [[Pages Workspace]], clicking on the 'flag' icon in the header of a Section loads the JavaScript Scripting Libraries and/or source code ([[WebView Section|WebView]] or [[Developing Custom UI Sections in JavaScript|Custom]]) for that Section into the JavaScript Debugger. |
| − | [[{{ns:file}}:troubleshooter_jsdebugger1a.png|left|link={{filepath:troubleshooter_jsdebugger1a.png}}|Debug the code for this section]] | + | [[{{ns:file}}:troubleshooter_jsdebugger1a.png|800px|left|border|link={{filepath:troubleshooter_jsdebugger1a.png}}|Debug the code for this section]] |
| − | <br clear=all | + | <br clear=all> |
Right-clicking in a loaded file displays the context menu: | Right-clicking in a loaded file displays the context menu: | ||
| − | [[{{ns:file}}:debug_tab_file_cm.png|left|link={{filepath:debug_tab_file_cm.png}}| | + | [[{{ns:file}}:debug_tab_file_cm.png|left|link={{filepath:debug_tab_file_cm.png}}|Context Menu]] |
<br clear=all> | <br clear=all> | ||
Note: some menu options only operate when the file is in edit mode. See [[#actionbar|actionbar]] below for how to switch mode. | Note: some menu options only operate when the file is in edit mode. See [[#actionbar|actionbar]] below for how to switch mode. | ||
| − | While the debugger is active, hovering the mouse over a | + | While the debugger is active, hovering the mouse over a variable will display its datatype, size and current value. |
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger2.png|left|link={{filepath:troubleshooter_jsdebugger2.png}}|Variable]] |
<br clear=all> | <br clear=all> | ||
===Output=== | ===Output=== | ||
The Output panel displays program and [[#Command|Command Window]] output. | The Output panel displays program and [[#Command|Command Window]] output. | ||
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger3.png|left|link={{filepath:troubleshooter_jsdebugger3.png}}|Output]] |
<br clear=all> | <br clear=all> | ||
Right-clicking in the Output panel displays the context menu: | Right-clicking in the Output panel displays the context menu: | ||
| − | [[{{ns:file}}:debug_tab_output_cm.png|left|link={{filepath:debug_tab_output_cm.png}}| | + | [[{{ns:file}}:debug_tab_output_cm.png|left|link={{filepath:debug_tab_output_cm.png}}|Context Menu]] |
<br clear=all> | <br clear=all> | ||
===Command=== | ===Command=== | ||
| − | The Debug Console contains a | + | The Debug Console contains a JavaScript Command Window. |
| − | + | Output and errors are displayed in the [[#Output|Output panel]]. | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
===Breakpoints=== | ===Breakpoints=== | ||
| − | Breakpoints cause execution of the running program to pause before the line of code set as a breakpoint is run | + | Breakpoints cause execution of the running program to pause before the line of code set as a breakpoint is run. |
| − | + | Breakpoints can be set and unset using the [[#actionbar|actionbar]] or by clicking in the line number column to the left of the selected line. | |
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger4.png|left|link={{filepath:troubleshooter_jsdebugger4.png}}|Breakpoints]] |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<br clear=all> | <br clear=all> | ||
| Line 96: | Line 87: | ||
Click '''Remove All Breakpoints''' in the [[#actionbar|actionbar]] to clear all current breakpoints. | Click '''Remove All Breakpoints''' in the [[#actionbar|actionbar]] to clear all current breakpoints. | ||
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger5.png|left|link={{filepath:troubleshooter_jsdebugger5.png}}|Remove All Breakpoints]] |
<br clear=all> | <br clear=all> | ||
| Line 102: | Line 93: | ||
Watches (or 'watchpoints') cause execution of the running program to pause after the value of a field or memory variable set as a watchpoint changes. Watches are set using the [[#actionbar|actionbar]]: | Watches (or 'watchpoints') cause execution of the running program to pause after the value of a field or memory variable set as a watchpoint changes. Watches are set using the [[#actionbar|actionbar]]: | ||
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger6.png|left|link={{filepath:troubleshooter_jsdebugger6.png}}|Watches]] |
<br clear=all> | <br clear=all> | ||
| − | The | + | The Watches grid shows the name, data type and current value for currently set watchpoints. Double-clicking on a grid row will clear that watchpoint. |
| − | + | ||
| − | + | ||
| − | + | ||
Click '''Remove All Watches''' in the [[#actionbar|actionbar]] to clear all current watchpoints. | Click '''Remove All Watches''' in the [[#actionbar|actionbar]] to clear all current watchpoints. | ||
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger7.png|left|link={{filepath:troubleshooter_jsdebugger7.png}}|Remove All Watches]] |
<br clear=all> | <br clear=all> | ||
| Line 118: | Line 106: | ||
The Call Stack grid shows the filename and line number for each program in the current stack. | The Call Stack grid shows the filename and line number for each program in the current stack. | ||
| − | [[{{ns:file}}: | + | [[{{ns:file}}:troubleshooter_jsdebugger8.png|left|link={{filepath:troubleshooter_jsdebugger8.png}}|Call Stack]] |
<br clear=all> | <br clear=all> | ||
===Globals=== | ===Globals=== | ||
| + | The Globals grid shows details of global objects and variables. | ||
| + | [[{{ns:file}}:troubleshooter_jsdebugger9.png|left|link={{filepath:troubleshooter_jsdebugger9.png}}|Globals]] | ||
| + | <br clear=all> | ||
===Locals=== | ===Locals=== | ||
| − | + | Not currently used. | |
===Actionbar=== | ===Actionbar=== | ||
| Line 149: | Line 140: | ||
|- | |- | ||
|valign="top"|Refresh all files | |valign="top"|Refresh all files | ||
| − | |valign="top"|Refresh all files in the debugger. This will update them with any changes made using the [[Script Editor]] in the [[Apps | + | |valign="top"|Refresh all files in the debugger. This will update them with any changes made using the [[Script Editor]] in the [[Apps Workspace]]. |
|- | |- | ||
|valign="top"|Step Over | |valign="top"|Step Over | ||
| Line 161: | Line 152: | ||
|- | |- | ||
|valign="top"|Add Conditional Breakpoint | |valign="top"|Add Conditional Breakpoint | ||
| − | |valign="top"| | + | |valign="top"|Not currently supported. |
|- | |- | ||
|valign="top"|Toggle Breakpoint | |valign="top"|Toggle Breakpoint | ||
| Line 174: | Line 165: | ||
|valign="top"|Remove All Watches | |valign="top"|Remove All Watches | ||
|valign="top"|Remove all watchpoints. | |valign="top"|Remove all watchpoints. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
|- | |- | ||
|valign="top"|Clear | |valign="top"|Clear | ||
Revision as of 11:19, 26 September 2019
Under Construction. Coming soon in Lianja v5.0
Contents
The Troubleshooter
The Troubleshooter provides a tabbed interface bringing together debugging, tracing and performance metrics to assist you in testing and tuning your Apps.
The JavaScript Debugger Tab
The JavaScript Debugger Tab contains the JavaScript Debugger. The tabbed upper container contains an Output panel and the files currently loaded in the JavaScript Debugger. The lower tabbed container contains the following:
- Command Window
- Breakpoints Grid
- Watches Grid
- Call Stack Grid
- Globals Grid
- Locals Grid
Below these are: a message line showing the current operation and an actionbar.
Activating the Debugger
As with all Troubleshooter tabs, the JavaScript Debugger Tab can be selected by clicking on its tab.
It can also be activated automatically, when a running script issues the debugger command:
or the debug() function:
Loading Files in the Debugger
Scripts can be loaded into the JavaScript Debugger from the Apps Workspace. Open the file (double-click the filename) in the Script Editor then click the Open file in Debugger toolbutton.
Right-clicking on the tab containing the script name displays the context menu, which also includes an option to Open File In Debugger.
Alternatively, in the Pages Workspace, clicking on the 'flag' icon in the header of a Section loads the JavaScript Scripting Libraries and/or source code (WebView or Custom) for that Section into the JavaScript Debugger.
Right-clicking in a loaded file displays the context menu:
Note: some menu options only operate when the file is in edit mode. See actionbar below for how to switch mode.
While the debugger is active, hovering the mouse over a variable will display its datatype, size and current value.
Output
The Output panel displays program and Command Window output.
Right-clicking in the Output panel displays the context menu:
Command
The Debug Console contains a JavaScript Command Window.
Output and errors are displayed in the Output panel.
Breakpoints
Breakpoints cause execution of the running program to pause before the line of code set as a breakpoint is run.
Breakpoints can be set and unset using the actionbar or by clicking in the line number column to the left of the selected line.
The Breakpoints grid shows the filename and line number for currently set breakpoints. Double-clicking on a grid row will clear that breakpoint.
Click Remove All Breakpoints in the actionbar to clear all current breakpoints.
Watches
Watches (or 'watchpoints') cause execution of the running program to pause after the value of a field or memory variable set as a watchpoint changes. Watches are set using the actionbar:
The Watches grid shows the name, data type and current value for currently set watchpoints. Double-clicking on a grid row will clear that watchpoint.
Click Remove All Watches in the actionbar to clear all current watchpoints.
Call Stack
The Call Stack grid shows the filename and line number for each program in the current stack.
Globals
The Globals grid shows details of global objects and variables.
Locals
Not currently used.
Actionbar
| Action | Description |
|---|---|
| Run/Continue | Run or continue running the program to the next breakpoint or watchpoint or to the end if no breakpoints or watchpoints are set. |
| Stop | Stop debugging. |
| Edit Code | Put the currently selected file into edit mode. |
| Save Code | Displayed when edit mode (Edit Code above) has been selected. Click to save any changes and exit edit mode. |
| Revert Code | Displayed when edit mode (Edit Code above) has been selected. Click to cancel any changes and exit edit mode. |
| Refresh all files | Refresh all files in the debugger. This will update them with any changes made using the Script Editor in the Apps Workspace. |
| Step Over | Move to the next line of code without running the current line. |
| Step Into | Run the current line of code then move to the next line. |
| Step Out | Run until returning to the calling program, then move to the next line. |
| Add Conditional Breakpoint | Not currently supported. |
| Toggle Breakpoint | Set a breakpoint on the current line, or unset the breakpoint if one already exists. |
| Toggle Watch | Set a watchpoint on the currently selected variable or field, or unset the watchpoint if one already exists. |
| Remove All Breakpoints | Remove all breakpoints. |
| Remove All Watches | Remove all watchpoints. |
| Clear | Clear the Output window. |
