Debugging SUP/SMP Hybrid Web Container Workflows with WEINRE

[former_member199074]

Debugging SUP/SMP Hybrid Web Container Workflows with WEINRE

Debugging an SUP API Native Application layout and presentation is a matter of getting the code and analyzing the flow of the application and so on and in 99.99% of the time the visual layout of the application is not really a concern as developers know where and how to modify the application layout and make the necessary changes as required and this can be done on the development IDE.

But for an HWC Workflow Application, things are quite different as we don’t have the tools to know why a certain text area is not appearing, or why a certain CSS style has not been applied. For web developers, the first thing that they will think of is the likes of Firebug, Google Chrome Inspector that will basically allow them to debug, Monitor, and edit Javascript, DOM, HTML and CSS on any web page, introducing changes on the fly on their visual layout of their web pages to check if it fulfils the Visual requirements.

One way to debug the visual layout of a certain workflow is by using WEINRE Web Server.

WEINRE allows a remote interaction with Javascript, DOM, HTML, CSS on a target device (iOS,WM,BB,Android). Via its web console, WEINRE allows viewing web Elements, Resources, executing some Javascript on the devices using the console, modifying the DOM of a Workflow etc... The powerful thing about the usage of WEINRE is that it allows all this to be done remotely, as some devices have restrictions on using Web Debugging tools.

Requirements:

To debug a Web container application, the following components are needed:

• Node.js : for downloading and hosting the WEINRE web server
• Custom.js file to point it to our WEINRE web server script file.
• A Workflow application
• A browser that supports webkit (i.e. Firefox, Chrome, IE not supported)

Please note that WEINRE does not necessarily need to be installed on the machine hosting SUP server and can be installed on any machine as long as the device can communicate with the latter.

WEINRE installation:

WEINRE has 3 different components:

• The Debug Server: Runs as a simple HTTP server running by default on port 8080
• The Debug Client: This is the normal browser that supports webkit (i.e. Firefox, Chrome) that a developer can use to debug the visual layout of a hybrid web container
• The Debug Target: consisting of a Mobile device pointing to the Debug Server’s Javascript Library which will be run on the device allowing a remote interaction between the Debug Client  (your desktop browser) and the device.

1 - Installing and Running WEINRE Debug Server :

• Go to http://nodejs.org/ and click on INSTALL, the download of Node.js should  start
• Once download, proceed with the installation.
• Open a command prompt as Administrator, and issue the following command:

npm install weinre

• Change Directory to C:\Users\<user>\node_modules\.bin and issue the following command:

weinre --boundHost -all-

6.    

• The WEINRE Web Server should be listening on port 8080 by default as shown below:

2 - Running the Debug Client:

• Open a Chrome/Firefox instance on http://<Host_ip>:8080
• Click on the URL next to debug client user interface.
• You’ll see something similar to what’s illustrated in Figure 1:

Figure 1: Debug Client Web Interface

Debugging the workflow:

1 - Pointing the Workflow (Debug Target device) to the Debug Server script:

• Open Custom.js file in your Workflow project
• Go to the customBeforeWorkflowLoad() function and add the code in Figure 2:

Figure 2: Code to be added in Custom.js file in the workflow project

• Please note that in this example, the WEINRE server is on 10.65.10.215, so you should the WEINRE server hostname/ip/FQDN

2 - Debugging the Workflow layout on the device:

• Deploy the workflow to your SUP server
• Connect your Hybrid Web Container application to get the workflow on the device (iOS,BB,WM,Android)
• Run your Debug Client as mentioned previously.
• You should see your the Debug Target device under Targets shown in green as shown in Figure 3:

Figure 3: Connected device shown in green under Target

• Click on the shown target. Please note the ip address identifying the device ( i.e. 10.65.15.224)
• Go to the Elements tab on the top of your Debug Client.
• For the workflow shown on figure 5, you can see its code on your Debug Client (Figure 4)

Figure 4: Highlighted input text with its CSS and html attributes

• Highlighting the text input would automatically highlight the component on the device (i.e Figure 5), show its CSS style, Javascript etc. And also you can made changes on the fly on the shown code, and it will be immediately be applied on the device.

Figure 5: Highlighted input text with on the device when highlighting the code in the Debug Client