When developing a SAPUI5 (or any other) mobile application, it could be handy to be able to see the HTTP requests the application triggers (debugging, performance, caching,...). I had this issue myself and after some googling and fiddling around (pun intended), I managed to monitor the HTTP traffic through Fiddler on a laptop. These are the steps I did to make it work.
- Install and configure Fiddler
- Set Fiddler as Proxy on your mobile device
- Install Fiddler certificate on mobile device
- Start monitoring your application!
1. install and configure Fiddler
Fiddler is a great, free tool to log your HTTP traffic. You can download it via http://www.telerik.com/fiddler . Download and install the executable and you’re good to go. There are also a number of interesting add-ons available for Fiddler but you don’t need them in this case.
Some tips:
- Fiddler captures all HTTP traffic on your machine so the log can grow very fast. You can limit the HTTP calls Fiddler should log by using the ‘Any process’ button in the toolbar. Just drag-and-drop to a specific program (ie. Browser window) to limit the logging to the specific process.
- If you don’t need logging at a specific time, click on the capturing button on the bottom left of the window to stop/start monitoring.
Next you’ll have to configure Fiddler to do 2 things:
- Decrypt HTTPS traffic
- Set Fiddler as a proxy for external connections
Naturally without specifically configuring HTTPS traffic should be decrypted, there wouldn’t be much to see about these requests. The first thing you’ll have to do is configure Fiddler to decrypt HTTPS traffic.
Go to ‘Tools’ – ‘Fiddler options’ – tab ‘HTTPS’ and select the checkbox ‘Decrypt HTTPS traffic’
The moment you select this option, Fiddler will prompt you with a dialog to ask if you want to install a Fiddler generated root certificate.
Some short info about how Fiddler works to help you make the right decision: Fiddler basically acts as a web browser the moment it starts logging your HTTP traffic and sends the HTTP traffic through to the appropriate process. However when you want to capture and analyze HTTPS traffic, Fiddler will have to decrypt these requests (as a normal browser will do). When forwarding these requests, your browser will detect the traffic has been decrypted (and encrypted again) by Fiddler and will give you a security warning. Basically Fiddler performs a Man-In-The-Middle to analyze your traffic. To avoid this warning, Fiddler generates its own (not trusted) certificate and asks you if you want to install the certificate (pfew… finally we arrived at the dialog above)
If you select ‘Yes’ the Fiddler certificate will be installed on your local machine and you won’t receive these warnings again. If selecting ‘No’ the certificate won’t be installed, so you’ll have to accept it in every browser manually.
The second configuration you’ll have to do is allow Fiddler to act as a proxy to receive traffic from other processes. This can be done in the tab ‘Connections’ by checking ‘Act as system proxy on startup’ and ‘Allow remote computers to connect’. As long as you don’t have another process running on port 8888, you can leave this default.
After restarting Fiddler, you are ready to start capturing traffic!
2. Set Fiddler as Proxy on your mobile device
Next you’ll need to configure the device to send its network traffic via Fiddler. This is done by configuring a manual proxy in your wireless settings. To see which are the settings of the proxy server, you can simply hover over the status icon/text on the top right op the Fiddler window and you’ll get a popover like this:
Below you’ll see the IP address of your proxy and the port will be 8888 (if you didn’t changed it). The IP address will probably be in the 192.168.x.x, 172.16.x.x or 10.x.x.x ranges. Make sure to connect to a network before configuring the proxy.
Android:
- go to your Wi-Fi overview
- long tab the active network
- ‘modify network configuration’
- checkbox ‘Show advanced options’
- proxy hostname = <IP> & port = 8888
IOS:
- ‘settings’
- 'general'
- 'Network'
- 'Wi-Fi'
- under 'HTTP Proxy' select manual
- server = <IP>, port = 8888 and Authentication = OFF
Windows:
- Go to your Wi-Fi overview
- tab the connected network
- you’ll see a proxy option with a switch turned off
- after turning this switch on, enter server/URL = <IP> and port = 8888
- don’t forget tapping 'done' when finished
3. Install Fiddler certificate on mobile device
At this point, you should be able to see the HTTP requests from your device appear in Fiddler, but the HTTPS requests will be grayed out… To check if your mobile device is correctly routed through Fiddler, go to your browser and enter ‘http://<ip>:8888’. You should get the Fiddler echo service, roughly looking like this:
Here you have the option to download the Fiddler Root certificate (this is the same principle as explained when we enabled Fiddler to decrypt HTTPS). Click this link and install the certificate.
(Android asks to give the certificate a name. I would suggest giving it a clear name like ‘Fiddler Root’ and use it only for Wi-Fi.)
4. Start monitoring your application
All done! Now you should see the HTTP(S) requests from your mobile device being captured in Fiddler!
I hope you find this blog useful! Please let me know if certain steps are unclear, contain errors, typos,… or if you have ideas to make it better.
Happy debugging!
- SAP Managed Tags:
