Serve and debug Teams SPFx app from localhost

Developing SPFx web parts for Microsoft Teams is a great way to extend usability of the tool. From developer perspective it also brings a lot of new features one can use, such as deep linking, native app navigation events and of course using teams context. The only problem is development process which leaves very little place for debugging. There is however a way, to bring familiar debug experience to the Teams web app context.

Existing app

If You already followed the official docs https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/using-web-part-as-ms-teams-tab the problem becomes quite easy.

Navigate to Your web part in teams and inspect the tab. You should find an iFrame inside embedded-page-container. You can use this css selector to find it:

embedded-page-container iframe[name='embedded-page-container']

Now we have to append debug parameters to the url of this iFrame. You can notice that the src of this iFrame begins with TeamsLogon.aspx page and what’s finally rendered is the value of dest query parameter. This is why we have to append encoded debug parameters

%26debug%3Dtrue%26noredir%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js

You can use following script (just paste it to Your browser console and execute)

function debugTab(){
  let tabFrame = document.querySelector("embedded-page-container iframe[name='embedded-page-container']")
  let tabSrc = tabFrame.src;
  tabFrame.src += encodeURIComponent("&debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js");
}

New app

If You just started developing and You don’t want to You can create Your own personal app using App Studio (You can add it as Your personal app in Teams) and in tabs section add proper url

https://your-tenant.sharepoint.com/_layouts/15/TeamsLogon.aspx?SPFX=true&dest=/_layouts/15/teamshostedapp.aspx%3Fteams%26personal%26componentId=<your-web-part-id>%26debug%3Dtrue%26noredir%3Dtrue%26debugManifestsFile%3Dhttps%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js;

You will find Your web part id in the manifest of Your SPFx web part.

If You cannot use app studio we would have to get a little bit more creative. Go to any team You are a member of then add any SharePoint related tab (SharePoint Page of SharePoint List). Once it loads You can use the selector

embedded-page-container iframe[name='embedded-page-container']

to replace the src tag to our web part debug.

Hope this will help, have a great weekend!