1 Preface About this Manual Intended Audience Revision History Document Conventions Version...

Transcription

1

2 Table of Contents 1 Preface About this Manual Intended Audience Revision History Document Conventions Version Introduction Overview Features System Requirements Configuration Client PC Configuration Debugger configuration UI Elements Menu bar Solution Explorer Editor Working with Debugger Loading scripts Debug scripts Last Revised: 09/02/16 Page 1 of 34

3 Table of Figures Figure 1: SAP GUI Properties... 8 Figure 3: WS Debugger Figure 4: Load Scripts Figure 5: Debug Scripts Figure 6: SAP GUI Figure 7: UI Figure 8: Menu bar Figure 9: File menu Figure 10: Home menu Figure 11: Edit menu Figure 12: View menu Figure 13: Toolbar Figure 14: Debug menu Figure 15: Solution Explorer Figure 16: Editor Window Figure 17: SAP Easy Access Figure 18: Waiting to Attach Figure 19: SAP Not Responding Figure 20: Script loaded in to Debugger Figure 21: Sequential debug Figure 22: Stop on Breakpoint Figure 23: SAPgui after script release Figure 24: Breakpoints window Figure 25: Watch variable Last Revised: 09/02/16 Page 2 of 34

4 1 Preface 1.1 About this Manual This manual describes the Liquid UI Debugger a.k.a. WS Debugger application and explains how to work and use its major features. It serves as a means to describe the application user interface, functionalities and step-by-step procedures to accomplish the tasks. 1.2 Intended Audience All the users who want to debug the scripts and examine the behavior of the script execution are the intended audience for this document. Users, who work on this Debugger application, will be provided with this document as a reference. 1.3 Revision History Date Comments Version 09/02/2016 Revised Document Conventions In this manual, certain words are represented in different fonts, typefaces, sizes, and weights. This highlighting is systematic; different words are represented in the same style to indicate their inclusion in a specific category. Additionally, this document has different strategies to draw user attention to certain pieces of information. In order of how critical the information is to your system, these items are marked as a note, caution, or warning. Last Revised: 09/02/16 Page 3 of 34

5 Icon Purpose Note Important Caution Bold indicates the name of the menu items, options, dialog boxes, windows and functions. The color blue with underline is used to indicate cross-references and hyperlinks. Numbered Paragraphs - Numbered paragraphs are used to indicate tasks that need to be carried out. Text in paragraphs without numbering represents ordinary information. 1.5 Version This version of the documentation is based on the release of the WS Debugger software. Earlier versions were: o WS Debugger o WS Debugger Last Revised: 09/02/16 Page 4 of 34

6 2 Introduction 2.1 Overview Liquid UI Debugger provides powerful environment for debugging web scripts. When developing a web script, we may often encounter an issue for which the solution is not obvious. In this case, it is useful to inspect the script code line by line to pinpoint the cause of the issue. Debugger diagnoses the cause of issues and is designed to edit, debug and monitor Liquid UI scripts with instant impact on the SAP. Debugger is designed to meet the following objectives to explore and understand the execution of the Liquid UI scripts: Fast, easy, and flexible way to execute Liquid UI scripts, by line or by section. Pinpoint a SAP element in a script with ease and precision. Step-by-step interactive debugging in a visual environment. Look at detailed measurements of your script logical flow. Measure script performance in the Console s Profiler. Send messages to the console directly from your script. Debugger provides you a simulation of execution of Liquid UI scripts with the valuable information about Flow of control during script execution Values in variables based on the script execution Live state of SAP elements Debugger s scripts attachment feature makes it simple to find Liquid UI scripts that are broken into different sessions. Debugger gives you the power of editing scripts in a live SAP environment for optimizing and simplifying SAP. Last Revised: 09/02/16 Page 5 of 34

7 2.2 Features Liquid UI Debugger is designed with an objective to view the behavior of Liquid UI scripts during runtime. The power of Debugger is the control given to the users to drive script execution and view the impact instantly. With the following features of Debugger, you can perform a thorough investigation of scripts: Watching variable values- Debugger enables you the option to view the values that a variable stores during the course of the script runtime. Bookmarks- Debugger allows to bookmark script lines for future reference. Stop on breakpoint- Breakpoints lets to group lines of script into small sections, and then debug one or more sections at a time. Sequential debug- Enables step-by-step debugging of the script code to check its behavior. Last Revised: 09/02/16 Page 6 of 34

8 2.3 System Requirements To install Debugger, it is first necessary to ensure that the target system can support the installation. The host system can be any of the following Microsoft operating systems. The links will take you to the individual system requirements for each operating system. Windows 10 Windows 8 Windows 7 Windows Vista Windows XP Windows Server 2012 Windows Server 2008 Windows 2003 Server (Standard Edition) For all systems, the install will require the following minimum system requirements: CPU A 1.5GHz single-core 64-bit CPU or a 1.3GHz dual-core CPU is required to run Debugger. RAM You must have a minimum of 512 megabytes of RAM on your target system. We recommend atleast 1 gigabyte. HDD You must have 2 gigabytes of free space on your hard drive to install Debugger. SAP GUI You need to have SAP GUI 3.0 or above installed and configured with GuiXT. Last Revised: 09/02/16 Page 7 of 34

9 3 Configuration This section covers the configuration of Debugger. It consists of the following elements: Client PC Configuration Debugger Configuration 3.1 Client PC Configuration Configuring SAP GUI on Client PC Users need an active connection to their SAP server to run SAP GUI and load the scripts in to debugger. To set the connection, open SAP GUI system properties wizard. The system properties box for SAP 7.10 looks as shown below: Figure 1: SAP GUI Properties Last Revised: 09/02/16 Page 8 of 34

10 This system properties dialog box contains the following information: Description The description specifies information about the server. Typically, this is either the name of the SAP server or the Liquid UI Server that the user will connect to. In our example, the description is Your SAP Server. Application Server The application server is the name of the application server the user will connect to. In our example, the application server is named sapserver.guixt.com. Instance Number Instance number specifies the target port that connects to either the SAP application server or the Liquid UI Server. In our example the instance number is 28. System ID The System ID is the SAP client ID to which the Server will be connecting. The System ID can be different depending on your corporate environment. Some examples might be DEV for development, QAS for regression testing or PRD for production. Each of these can have specific data and restrictions associated. For example, development might be prohibited in PRD so as not to risk damaging the production system or data. SAP Router String The SAP Router string contains router address if you are connecting to your SAP server using a router. However, you will only enter a SAP Router string if the Liquid UI Server will be used as a SAP Router. Using Liquid UI Server as a SAP Router is explained below. Leave this blank for a standard Liquid UI Server connection. Last Revised: 09/02/16 Page 9 of 34

11 3.2 Debugger configuration Debugger is an executable file and doesn t require additional installation process. Simply trail the following steps for configuring debugger, Step 1: Open WS Debugger.exe. The interface of Debugger appears as below screen Figure 2: WS Debugger Last Revised: 09/02/16 Page 10 of 34

12 Step 2: Navigate to guixt.sjs. This is located under C:\\Program Files (x86)\sap\frontend\sapgui. Open guixt.sjs and verify whether directory 1 statement/ instruction is pointing towards scripts folder. Then, set debug value to 1. Example: directory1 = 'C:\\scripts\\WSDebugger'; debug=1; The Location of the directory or path may vary depending on the OS. Step 3: Check for the compatibility of webscript.dll files. SAP GUI and Debugger folder contains webscript.dll file. This webscript.dll in both folders should match with the same versioning. To verify, right click on the webscript.dll >> properties >> details >> Product version. To locate webscript.dll: For SAP GUI C:\\Program Files (x86)\sap\frontend\sapgui For WS Debugger C:\\WSDebugger\ \Debug If both.dll files are of with different version, then copy webscript.dll file from SAP GUI to debug directory. Last Revised: 09/02/16 Page 11 of 34

13 Step 4: Open WSDebugger.exe. You will find File option on the main menu bar. Click on File, a context menu appears, then click Open. Navigate to guixt.sjs file and open it in debugger. C:\Program Files (x86)\sap\frontend\sapgui" (Location may vary depending up on Windows edition) This option will load scripts in to the debugger. Figure 3: Load Scripts Last Revised: 09/02/16 Page 12 of 34

14 Step 5: Once the scripts have been loaded in to the debugger, they are visible under solution explorer, which is on the left hand side of the debugger. Double click on the script to open it for debugging process. Figure 4: Debug Scripts Last Revised: 09/02/16 Page 13 of 34

15 Step 6: Open SAP GUI and make sure that "Activate GuiXT" is selected to run scripts. Figure 5: SAP GUI Last Revised: 09/02/16 Page 14 of 34

16 4 UI Elements Debugger interface is organized in to 5 sections: Menu bar Solution Explorer Editor Watch Breakpoints Figure 6: UI Last Revised: 09/02/16 Page 15 of 34

17 4.1 Menu bar The menu bar of the Debugger consists of the following three types of menus: Main Menu Toolbar Debug Menu Figure 7: Menu bar Main menu The main menu has the following sub menu items: File Home Edit View Build (upcoming feature) Window (upcoming feature) Help (upcoming feature) File: File menu helps in opening, saving, and printing the web scripts in debugger. It has following options; Last Revised: 09/02/16 Page 16 of 34

18 Figure 8: File menu Open To open an existing webscript Save To save a webscript that is open in WS Debugger Print To print a webscript Recent The list of scripts that you open in Debugger Home: The Home menu is useful for performing file related operations. The following menu items are present in the Home menu; Figure 9: Home menu Last Revised: 09/02/16 Page 17 of 34

19 o New To create a new webscript o Open To load a webscript into Debugger o Close To close a webscript o Save To save a webscript o Save As To save a webscript with a different name o Save All To save all the open webscripts o Print To print a webscript (Not implemented) o Print Preview To view a webscript print layout (Not implemented) o Exit To close the Home menu window Edit: The Edit menu has the following items; Figure 10: Edit menu o Undo To reverse your previous action on script o Redo To recover your previous action on script o Cut To delete script lines and paste to a different location (Ctrl+X) o Copy To copy script lines to clipboard (Ctrl+C) o Paste To paste in another location in the script (Ctrl+ V) o Select All To select all the lines of a script (Ctrl+A) o Find To find a specific text in the script (Ctrl+F) o Replace To replace text in a script with other text o Toggle Bookmark To add/remove bookmark at specific location in a webscript, as shown in Figure 10. o Next Bookmark To move pointer to next bookmark in the list bookmarks o Previous Bookmark To move pointer to previous bookmark in the list bookmarks Last Revised: 09/02/16 Page 18 of 34

20 o Add to Watch To view the value that populates in a variable o Insert/Remove Breakpoint To stop/continue the execution of scripts o List Members To list related variables o Go to Line To navigate to a specific line of a script View: View allows debugger to make the windows and tool bars in enable and disable mode. The following menu items appear in the View menu; Figure 11: View menu o Full Screen o Solution Explorer o Output o Watch o Breakpoints o Toolbar o Status Bar o Refresh Toolbar The tool bar is a set of shortcuts of text editing options, which includes copy, open, save, and toggle breakpoints. Last Revised: 09/02/16 Page 19 of 34

21 Figure 12: Toolbar Debug menu Debug menu also includes tool bar items and other debug related options as follows; Figure 13: Debug menu The above four buttons are for bookmarks. 1. Toggle bookmark: inserts and removes bookmark (Ctrl + F2) 2. Next bookmark: Go to the next temporary bookmark (F2) 3. Previous Bookmark: Go to the previous temporary bookmark (Shift + F2) 4. Clear all bookmarks: Clear all bookmarks in the window The above icons intends for following; 1. Find the specified text from the script (Ctrl + F) 2. Increase indent right one tab 3. Decrease indent left one tab Last Revised: 09/02/16 Page 20 of 34

22 The above option is for displaying session id of the script with respect to SAP GUI. If there is no script to debug, it shows No active WS session. This button is used to Refresh session. Waiting to attach: This button should be clicked after launching SAP GUI. It waits for the transaction to attach. Go (F5): Starts or continues the program Step over (F8): Step over function is used for debugging the code either sequential way or by stop on breakpoint. Stop the program manually Last Revised: 09/02/16 Page 21 of 34

23 Inserts or removes the single break point and multiple break points at single instance. 4.2 Solution Explorer Solution Explorer is one of the attributes of Debugger. It displays the list of webscripts that are available in your scripts folder. Figure 14: Solution Explorer Last Revised: 09/02/16 Page 22 of 34

24 Solution Explorer Window will also display the list of script files, which are currently in debug action. Scripts will be loaded when debugging activity is in execution state. 4.3 Editor Debugger editor plays an effective role in debugging. Editor manages scripts to modify and debug. It can have single or multiple script files. User can debug the script activity and measure the performance of the script accordingly. If a user inspects any logical error in the program, the user can examine the code line by line. If the error is caught in between the code, they can edit and modify the script. After making all the changes to the script, save the script and observe the changes on SAP GUI. User can perform various actions on editor like, applying breakpoints, watching variable values, and step over the function. Figure 15: Editor Window Last Revised: 09/02/16 Page 23 of 34

25 5 Working with Debugger 5.1 Loading scripts Launch SAP GUI prior to performing any action on the Debugger. Logon to your SAP Server with valid login credentials. You will get SAP Easy Access screen Figure 16: SAP Easy Access Activate GuiXT in SAP (if disable) and then launch Debugger. Last Revised: 09/02/16 Page 24 of 34

26 Step 1: To load a script into the Debugger, first, you need to set the Debugger in LISTENING mode. To set the Debugger in listening mode, Click Waiting to attach. Figure 17: Waiting to Attach Now the Debugger will be in listening state on the script transaction on SAP GUI. When you open a transaction on SAP, the Debugger picks the script. Make sure to check whether the session is in active state or not. If not click Session Refresh button on the build tool bar. Last Revised: 09/02/16 Page 25 of 34

27 Step 2: Open SAP GUI and load the transaction to perform debugging activity. Example: /nva03 Enter /nva03 transaction on SAP Easy Access screen. Now the SAP will stop responding as you have set WS Debugger in Waiting to Attach mode. Figure 18: SAP Not Responding WS Debugger will pick the script and debug only if the script is available in the specified local script file path location. This location would be the one which you have specified during the WS Debugger configuration. Last Revised: 09/02/16 Page 26 of 34

28 Step 3: Debugger will pick the script and would be in a ready state to start debugging activity. Figure 19: Script loaded in to Debugger The current line marker will point towards first valid statement of the script. If there is a breakpoint marked on script, debugger will hit first breakpoint of the script. Parallelly SAP GUI will be non-responsive state until Debugger releases the script. A script will get released after debugging the complete script or user can manually release the script by clicking on Stop button, which is on the build tool bar. Last Revised: 09/02/16 Page 27 of 34

29 5.2 Debug scripts Debugger allows two ways of performing debugging activity on the scripts. They are: 1. Sequential debug 2. Stop on breakpoint marked Sequential debug Sequential debug will be set in action by clicking step over (F8) button. This will move the current line marker to the next line. Continue to click step over (F8) to move position of the current line marker to next line until the script reaches the last line. Figure 20: Sequential debug Last Revised: 09/02/16 Page 28 of 34

30 In the Figure 14, the current line marker is pointing on line 19 as a result of sequential debug process. Initially the marker was at line 3 and by pressing step over (F8) button in a continuous stream, it moved to 19 and thereby reaches till end of the script after clicking multiple times. If you want to stop sequential debugging on a particular line, insert a breakpoint on the line you intended to stop. To know more about how to insert a break point click here. The current line marker will not point to the lines of script, which is been placed in comments (// //). It skips the commented lines and places the marker on an executing statement Stop on Breakpoint marked Go (F9) button will insert the breakpoint in Debugger. To stop executing debugging on a specified line, insert a breakpoint on the line where you need to stop. Once breakpoint is applied on a specified line by pressing F9, continue to click step over (F8). Then the current line marker will now jump to the breakpoint and then to the next breakpoint if any. If the script doesn t have any more breakpoints, the current line marker will complete executing the debugging activity. In the Figure 15, the debugging of the script got stopped at line number 95. The debugger will now release the script. Last Revised: 09/02/16 Page 29 of 34

31 Figure 21: Stop on Breakpoint User can apply breakpoint and sequential debug as per their requirement to understand the behavior of the script. As soon as the debugger releases the script, the SAP GUI would start to be in a responsive state as following figure. Last Revised: 09/02/16 Page 30 of 34

32 Inserting and Removing Breakpoint Inserting Breakpoints Figure 22: SAP GUI after script release Place the marker on the line where you want to insert the breakpoint and click, Insert/Remove Breakpoint (F9). This will enable the breakpoint by marking the line in to red color. Once a break point is applied, the line number along with the file name gets updated into the Breakpoints window. User can insert multiple breakpoints as per their requirement. Removing Breakpoints Place the marker on the line where you want to remove the breakpoint and click, Insert/Remove Breakpoint (F9). This will remove the breakpoint from that line and updates the Breakpoints window. Last Revised: 09/02/16 Page 31 of 34

33 To remove all breakpoints at a single instance click, Remove all Breakpoints button on the build tool bar. Figure 23: Breakpoints window User can also insert and remove the breakpoints by simply right clicking on the specified line Watch variables Debugger enables to watch variable values throughout the script execution. The value of the variable varies depending up on the script. The variable values can be inspected by adding them to watch window. To add a variable to watch window perform following steps: 1. Select the text on the script editor and apply right click. 2. Select "Add to Watch" option. This will add variable to watch window. Last Revised: 09/02/16 Page 32 of 34

34 Debugger will parse the script in background and retrieve current value of the variable in execution script and displays on the Watch window. The other way of adding variable to watch window is: 1. Right click on the watch window 2. Select Add Row. This will add new row in to the window. 3. Double click on the row, you will get an option to edit the row. 4. Add any variable manually into that row. Debugger will parse script in background and get latest value of the variable in execution script, displays on the Watch window. Figure 24: Watch variable To remove watched variable from watch window: 1. Select Row / Variable to be removed and apply right click. 2. Select Delete Watch. It will remove the variable from watch window. Last Revised: 09/02/16 Page 33 of 34

35 3. To remove all watched variables, right click on watch window and select Clear All. It will remove all the watched variables from the list. efficiently. Make sure to close all the instances from your target system to run the debugger more Last Revised: 09/02/16 Page 34 of 34