This chapter is from the book
This chapter is from the book
This chapter is from the book
Debugging Mobile XPages
When something goes wrong with your mobile XPages, you need to debug them to diagnose the problem and figure out how to resolve the problem. For client debugging you will likely have used a browser debugging tool like Firebug for Firefox or Web Inspector for Safari. In this section, you learn about two techniques you can use to debug Mobile XPages. There are other options, for example, there is a recently released Firebug Lite Bookmarklet for iPad, but these techniques described here are the ones favored by the book authors when debugging their Mobile XPages. There are two approaches described in the following sections, both of which rely on viewing the DOM hierarchy for your mobile XPage in real time on another device. The first approach is targeted at iOS mobile development, and the second approach is a more generic solution, which works irrespective of the mobile device you target.
Debugging XPages on iOS
If you have a Mac, you can use it to debug your Mobile XPages. The procedure is straightforward using the following steps:
- Enable the Develop menu in the Advanced preferences.
- Connect your mobile device to the Mac with a USB cable.
- A new menu item appears in the Develop menu that enables you to inspect a page on your mobile device.
Figure 14.17 shows an example of the type of menu item that displays if you had an iPhone connected to your Mac.
)
Figure 14.17 Develop menu item
When you select the menu item, the Web Inspector opens. The Web Inspector can be used to view the DOM of the page, which displays within the browser on the iPhone. Figure 14.18 shows the DOM for the m_Debug.xsp page.
)
Figure 14.18 Web Inspector
As you select elements from within the DOM in Web Inspector, the equivalent element within the browser is highlighted. For example, if you select the span element that corresponds to the Toolbar button, the button is highlighted on the device, as shown in Figure 14.19.
)
Figure 14.19 Selected element
In addition to viewing the DOM, you can also display a JavaScript console. Any logging statements that are output using the console JavaScript class can be viewed within Web Inspector. Figure 14.20 shows the JavaScript console with some text that was output when the Toolbar Button in the m_Debug.xsp XPage was clicked.
)
Figure 14.20 JavaScript console
For more information on the Web Inspector, visit the iOS Developer Library at https://developer.apple.com/library/ios/navigation/.
Debugging XPages with Web Inspector Remote (aka weinre)
If you don’t have a Mac or if you need to debug XPages on an Android or other non-iOS-based device, you can use weinre. The weinre debugger is run as a node.js application, so you need to download and install node.js first. To get the setup to start debugging with weinre, follow these steps:
- Download and install node (see http://nodejs.org/download/).
- Install the weinre npm package (use npm -g install weinre).
- Execute the following command to run weinre: weinre --httpPort <port> --boundHost -all-
- Add a client-side script tag to each XPage you want to debug; the script tag must load the weinre target script from the server where weinre is running (see Listing 14.22 where weinre is running on a server with ip address 192.168.1.11).
- Open the weinre client from your desktop browser using the url: http://<host>: <port>/client/.
- Open the XPage that includes the weinre target script in your mobile browser.
Now refresh the weinre client in your desktop browser, and you should see the mobile target listed (as shown in Figure 14.21).
Figure 14.21 weinre client
)
Listing 14.22 Script Tag for weinre Target Script
<xp:script type="test/javascript"
src="https://192.168.1.11:8090/target/target-script-min.js"
clientSide="true">
</xp:script>
Figure 14.22 shows the DOM for the m_Weinre.xsp page.
)
Figure 14.22 Web Inspector
The Element tab in the weinre client enables you to view the DOM of the page you are debugging. As you select elements from within the DOM in the weinre client, the equivalent element within the browser is highlighted. For example, if you select the span element that corresponds to the Toolbar button, the button itself is highlighted on the device, as shown in Figure 14.23.
)
Figure 14.23 Selected element
In addition to viewing the DOM, you can also display a JavaScript console. So any logging statements that are output using the console JavaScript class can be viewed within Web Inspector. Figure 14.24 shows the JavaScript console with some text that was output when the Toolbar button in the m_Weinre.xsp XPage was clicked.
)
Figure 14.24 JavaScript console
For more information on weinre, visit the documentation pages at http://people.apache.org/~pmuellr/weinre/docs/latest/.