liquid ui debuggermailguixt.actonsoftware.com/acton/attachment/4953/f-01a5... · for sap gui –...

$: LIQUID UI DEBUGGERmailguixt.actonsoftware.com/acton/attachment/4953/f-01a5... · For SAP GUI – “C:\\Program Files (x86)\SAP\FrontEnd\SAPgui” For WS Debugger – “C: \WSDebugger$

LIQUID UI DEBUGGER

www.guixt.com ©2016 Synactive Inc. All Rights Reserved Last Revised: 09/02/16 Page 1 of 34

Table of Contents

1 Preface.......................................................................................................................................... 3

1.1 About this Manual................................................................................................................. 3

1.2 Intended Audience ................................................................................................................ 3

1.3 Revision History ................................................................................................................... 3

1.4 Document Conventions ......................................................................................................... 3

1.5 Version .................................................................................................................................. 4

2 Introduction .................................................................................................................................. 5

2.1 Overview ............................................................................................................................... 5

2.2 Features ................................................................................................................................. 6

2.3 System Requirements............................................................................................................ 7

3 Configuration ............................................................................................................................... 8

3.1 Client PC Configuration ........................................................................................................ 8

3.2 Debugger configuration ...................................................................................................... 10

4 UI Elements ............................................................................................................................... 15

4.1 Menu bar ............................................................................................................................. 16

4.2 Solution Explorer ................................................................................................................ 22

4.3 Editor................................................................................................................................... 23

5 Working with Debugger ............................................................................................................ 24

5.1 Loading scripts .................................................................................................................... 24

5.2 Debug scripts ...................................................................................................................... 28

LIQUID UI DEBUGGER


Table of Figures

Figure 1: SAP GUI Properties ........................................................................................................ 8

Figure 3: WS Debugger ................................................................................................................ 10

Figure 4: Load Scripts ................................................................................................................... 12

Figure 5: Debug Scripts ................................................................................................................ 13

Figure 6: SAP GUI........................................................................................................................ 14

Figure 7: UI ................................................................................................................................... 15

Figure 8: Menu bar........................................................................................................................ 16

Figure 9: File menu ....................................................................................................................... 17

Figure 10: Home menu ................................................................................................................. 17

Figure 11: Edit menu .................................................................................................................... 18

Figure 12: View menu .................................................................................................................. 19

Figure 13: Toolbar ........................................................................................................................ 20

Figure 14: Debug menu ................................................................................................................ 20

Figure 15: Solution Explorer ........................................................................................................ 22

Figure 16: Editor Window ............................................................................................................ 23

Figure 17: SAP Easy Access......................................................................................................... 24

Figure 18: Waiting to Attach ........................................................................................................ 25

Figure 19: SAP Not Responding................................................................................................... 26

Figure 20: Script loaded in to Debugger ....................................................................................... 27

Figure 21: Sequential debug ......................................................................................................... 28

Figure 22: Stop on Breakpoint ...................................................................................................... 30

Figure 23: SAPgui after script release .......................................................................................... 31

Figure 24: Breakpoints window .................................................................................................... 32

Figure 25: Watch variable ............................................................................................................. 33

LIQUID UI DEBUGGER


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 1.0.3.0

1.4 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.

LIQUID UI DEBUGGER


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 1.0.3.0 release of the WS Debugger software.

Earlier versions were:

o WS Debugger 1.0.2.0

o WS Debugger 1.0.1.0

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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 at-

least 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.

https://www.microsoft.com/en-us/windows/windows-10-specifications#sysreqs

http://windows.microsoft.com/en-us/windows-8/system-requirements

http://windows.microsoft.com/en-us/windows7/products/system-requirements

http://support.microsoft.com/kb/919183

http://support.microsoft.com/kb/314865

https://technet.microsoft.com/en-us/library/dn303418.aspx

http://msdn.microsoft.com/en-us/windowsserver/cc196364.aspx

http://technet.microsoft.com/en-us/library/cc738496%28v=ws.10%29.aspx

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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\1.0.3.0\Debug”

If both .dll files are of with different version, then copy webscript.dll file from SAP GUI to

debug directory.

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


Step 6: Open SAP GUI and make sure that "Activate GuiXT" is selected to run scripts.

Figure 5: SAP GUI

LIQUID UI DEBUGGER


4 UI Elements

Debugger interface is organized in to 5 sections:

Menu bar

Solution Explorer

Editor

Watch

Breakpoints

Figure 6: UI

LIQUID UI DEBUGGER


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

4.1.1 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;

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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

4.1.2 Toolbar

The tool bar is a set of shortcuts of text editing options, which includes copy, open, save, and

toggle breakpoints.

LIQUID UI DEBUGGER


Figure 12: Toolbar

4.1.3 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

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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

5.2.1 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

LIQUID UI DEBUGGER


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.

5.2.2 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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


Figure 22: SAP GUI after script release

Inserting and Removing Breakpoint

Inserting Breakpoints

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.

LIQUID UI DEBUGGER


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.

5.2.3 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.

LIQUID UI DEBUGGER


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.

LIQUID UI DEBUGGER


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.

Make sure to close all the instances from your target system to run the debugger more

efficiently.

liquid ui debuggermailguixt.actonsoftware.com/acton/attachment/4953/f-01a5... · for sap gui –...

Documents