Wiki source code of The Debugger
Last modified by Pierre Dubois on 2012/03/26 12:15
- Manage
Copy- Actions
Export
Print preview
View Source- Viewers
Siblings
Content
Comments- Annotations
Attachments (10)
History
Information
Show last authors
| 1 | The Requea platform embeds a step by step debugger (the new debugger) to analyze problems in JavaScript or operations and user actions flow. |
| 2 | |
| 3 | The debugger is available on platforms: |
| 4 | |
| 5 | 2.2.655 and above |
| 6 | 3.0.78 and above |
| 7 | |
| 8 | Note that previous platforms use the previous version of the debugger which is no more supported. |
| 9 | |
| 10 | = Access to the debugger = |
| 11 | |
| 12 | The debugger is available if your are logged as RequeaDev (sysDesignExpert). The "debug" link appears on the top right of the screen: |
| 13 | |
| 14 | |
| 15 | [[image:open.png]] |
| 16 | |
| 17 | |
| 18 | |
| 19 | |
| 20 | = Setting up breakpoints = |
| 21 | |
| 22 | When you view a script (in an operation step for example), you can setup or remove breakpoints by clicking on the gutter on the left of the screen: |
| 23 | (not available during script edit) |
| 24 | |
| 25 | |
| 26 | |
| 27 | |
| 28 | |
| 29 | [[image:setbk.png]] |
| 30 | |
| 31 | |
| 32 | You can list your breakpoints by clicking the "breakpoints" link in the debugger section |
| 33 | |
| 34 | |
| 35 | = Start debugging = |
| 36 | |
| 37 | To start a debugging section, click on the "open" link. This will bring a browser window where you can log with a user name (it may be different than the RequeaDev that you have on the main window). |
| 38 | Note the "DEV" in the title of the window to distinguish with the main (the debugger) window. |
| 39 | |
| 40 | |
| 41 | |
| 42 | [[image:devlogin.png]] |
| 43 | |
| 44 | |
| 45 | Note that if you log gout in the main window, both users will be disconnected. |
| 46 | |
| 47 | Start using the functionality where you have setup a breakpoint (to get your operation script called for example). When the platform encounters a breakpoint, it will be suspended: |
| 48 | |
| 49 | |
| 50 | |
| 51 | [[image:stopped.png]]Go back to the main window, and with your mouse, roll over the "debug" link. You will see the suspended thread with the corresponding stack (script code, operations and user actions). |
| 52 | You can click on the script to see the line in the corresponding script |
| 53 | |
| 54 | [[image:stack.png]] |
| 55 | |
| 56 | |
| 57 | |
| 58 | = Step by step debugging = |
| 59 | |
| 60 | The debugger has a floating control panel on the right of the screen: |
| 61 | |
| 62 | |
| 63 | |
| 64 | You can: |
| 65 | - "continue" (F8) to go o the new breakpoint (or the next step that requires user input like a form) |
| 66 | - "step into" (F11) will drill into the code |
| 67 | - "step over" (F10) will get over an interaction |
| 68 | - "step return" (F7) will get back to one level in the stack |
| 69 | |
| 70 | |
| 71 | [[image:line.png]] |
| 72 | |
| 73 | |
| 74 | = Local variables and inspecting variables = |
| 75 | |
| 76 | Bellow the control panel you have an updated list of local variables and their value. |
| 77 | |
| 78 | You may also inspect variables in the inspector field. |
| 79 | |
| 80 | Note: |
| 81 | For collections (arrays), use the .length and the bracket ([0]) notation to inspect array items: |
| 82 | |
| 83 | [[image:inspect1.png]] |
| 84 | |
| 85 | [[image:inspect2.png]] |
| 86 | |
| 87 | [[image:inspect3.png]] |
| 88 | |
| 89 | [[image:inspect4.png]] |