Search code examples
microsoft-teamsteams-toolkit

Cannot view mobile app for tab development


I am trying to create a layout for our teams channel tab app but when running the app locally and inspecting it as a mobile device, teams throws an error that the browser is not supported.

Can anyone point me in the correct direction to develop my app for mobile use or how I can view the mobile app from the VS Code Teams Toolkit debugging tools?

Chrome Error

I have tried to run the app in chrome and in MS Edge browsers and use the inspector device emulators in both but get the same error. I have also tried connecting via my local machine's IP /the FE port 53000 and also have had no luck there.


Solution

  • I used directly my mobile device (android) with Teams App installed for debugging teams custom tab (both phone and tablet worked fine). Connect your android device to your laptop/desktop (using USB), and then on the phone:

    • Enable USB debugging
    • Enable "Developer Preview" in Teams options

    In the desktop chrome, navigate to chrome://inspect/devices and you should see your device there in the list available for inspection/debugging. You could probably also connect using local WIFI (?), but I have not tried that. Also never tried that with Edge, so not sure if it works.

    https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools#access-devtools-from-an-android-device