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.
One way to debug the visual layout of a certain workflow is by using WEINRE Web Server.
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 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
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-
- 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:
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
Figure 5: Highlighted input text with on the device when highlighting the code in the Debug Client