Test Universal Windows Platform Apps using Windows Device Portal

Universal Windows Platform Apps enable you as a developer to build an app that works on many different devices.  Since you might be developing you app for a device type other than Windows Desktop, you need to be able to easily deploy and test your UWP app across these other device types.  That's where Windows Device Portal helps out!

What's Windows Device Portal (WDP)?   WDP is a developer feature that is included in Windows 10 to assist in the development of UWP apps.  It is a web server that allows you to configure and manage Windows 10 devices that are connected to the same network. WDP lets you view access and control your device from your browser.

In this blog post, I will be talking about how you can test your Windows Apps on your devices using your browser. Device Portal is web server that you can run when you enable Developer Mode. By default, Device Portal provides a set of diagnostic tools like app management, system performance, logging etc. We will be focusing on App Management in this post. If you interested in the other diagnostic tools that Device Portal offers, click here.

I would like to introduce two terms that I will refer to in this post: Host device – Device where the browser is run; Target device – Windows 10 device where the app will be deployed

Setup for Device Portal:

1. Enable Developer Mode, Device Portal and Device Discovery on Target device

go to Settings -> Update & security -> For Developers

2. Pair by launching browser on Host device – go to https://<YOUR_DEVICE_IP_ADDRESS> On first access, get the 6-character PIN from Target device by click on “Pair”.  OK, now you are setup!

Using Developer Portal:

Once paired successfully, you will be taken to Device Portal. The diagnostic tools that are available will depend on the target device type (Phone, HoloLens, Xbox, IOT etc.)

To test apps we want to go to the Apps manager tab which can be found to the left in the browser window. In the screenshot below you can see there are three sections – Install app, Installed apps and Running apps.

• Install app – browse to the location of the app package to install the app on the target device
• Installed apps – use the drop-down menu to select an installed app; you have options to either start or remove the app
• Running apps – shows the current list of running apps. This view also shows important diagnostics about the app

[caption id="attachment_735" align="aligncenter" width="850"] Fig 4: Device Portal's Apps Manager view[/caption]

Device Portal is great to test your app on a remote device like a Phone, Xbox, IOT Device and HoloLens! From the install app section, click on browser and navigate to your app package. If you created the app package using Visual Studio, your output folder would something like this:

[caption id="attachment_655" align="aligncenter" width="551"] Fig 5: Visual Studio app package folder structure[/caption]

Once you have selected the app package and the appropriate dependency packages for your device, click on Go to start deployment. After the ‘Go’ button is clicked, the app package will be copied to the target device and then installed. After successful installation, you will see the ‘Done!’ message. In case of the failure, it will provide you with you an error message.

[caption id="attachment_705" align="aligncenter" width="210"] Fig 6: Install app section[/caption]

You can launch the newly installed app by selecting it from the dropdown menu and clicking on ‘Start’. It will automatically launch the app on your target device.

[caption id="attachment_715" align="aligncenter" width="626"] Fig 7: Installed apps section[/caption]

Once running, you can view the app’s diagnostic information in the running apps section.

[caption id="attachment_725" align="aligncenter" width="978"] Fig 8: View running apps and their diagnostic info[/caption]

WDP is built on top of REST APIs so you can also access the data and control your device programmatically. Stay tuned for my next blog where I will talk about how you can use WDP REST APIs to programmatically deploy your apps remotely to your Windows 10 devices.

Any Questions? Leave them in the comments.

Thanks,

Chaitanya Donthini, Program Manager - Windows Developer Platform