Debugging Teams applications on mobile devices

Some time ago when I was creating a Microsoft Teams application solution, I faced a problem with debugging it on a mobile device. So, in this article, I will explain my solution for this inconvenience.

Here is what we are going to need in order to debug Microsoft Teams App on mobile:

• SPFx in version 1.13 or higher,
• NGROK serve plugin or other tunnelling plugins,
• Fast-serve,
• Android mobile device.

At the start we have our webpart created and deployed on Microsoft Teams. Information on how to do it you can find in Microsoft tutorials.

First of all, we need to check the version of SPFx in our project. It needs to be 1.13 or higher. So go to package.json and check if every SPFX package is 1.13 or higher, if not you need to upgrade them.

Add fast-serve

The second step is to add fast-serve to our project to do this we go to the terminal and install it with the command:

Then, we run it in the project folder with spfx-fast-serve which will create a fast-serve folder and patch gulpfile.js

Now, we run npm install to install our project.

Tip: full guide how to migrate your project to fast-serve can be found on spblog.

Add Ngrok

The next step is to add NGROK to our project. So, to do this, we need to run:

Then, we need to register on the ngrok’s page and get Authtoken which will be needed in the next step.

After getting your Authtoken go back to the terminal and run.

Then run:

and you will see below window:

Now, you need to update configuration.

Go to config/serve.json and change hostname to your ngrok address:

“hostname”: ” YOUR_NGROK_ADDRESS”,

Whole configuration below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 443,
  "hostname": "0611-217-153-182-34.eu.ngrok.io",
  "https": true,
  "initialPage": "https://localhost:5432/workbench",
  "api": {
    "port": 5432,
    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
  }
}

Then, go to fast-serve/webpack.extend.js and add NgrokServePlugin plugin (with the same host as before for the “host” plugin parameter).

Whole configuration below:

const { NgrokServePlugin } = require("spfx-fast-serve-helpers");

const webpackConfig = {
  plugins: [new NgrokServePlugin({ host: "0611-217-153-182-34.eu.ngrok.io " })],
};

const transformConfig = function (initialWebpackConfig) {

  return initialWebpackConfig;
};

module.exports = {
  webpackConfig,
  transformConfig,
};

Assembly all together

Now, your application is ready to be served so you run:

You are going to receive information needed in later step: query string and ngrok address that your project is running at:

We can move to our mobile device. You need to have your Developer Options turned on and Enabled USB Debugging (here you can find the tutorial how to do it).

Then, you go to Microsoft Teams app > Tap on the icon with your photo or initials in the top left corner > Tap Settings > Tap About and Turn Developer preview on:

Now navigate to your app in Microsoft Teams and run to be mobile device screen is displaying it.

Go back to your PC, open Chrome and go to chrome://inspect/#devices in the address bar.

Now you should be able to see your device and WebView of your teams app

Click on Inspect and you will see this window:

Take received earlier query string: ?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

and change localhost with port part to your ngrok server.

Full query string should look like: ?debug=true&noredir=true&debugManifestsFile=https://0611-217-153-182-34.eu.ngrok.io/temp/manifests.js, where “0611-217-153-182-34.eu.ngrok.io” is your ngrok server address.

Paste it to the address bar of the widow with your application and agree to load debug scripts.

Summary

Your app will refresh and will be responding live for all changes run your local environment and what’s more important you have access to all dev tools from Chrome in your mobile app.