Can't debug my microsoft teams tab using DevTools - microsoft-teams

I'm trying to get console logs from my tab using DevTools in Microsoft Teams. I can open the console, but my logs are not showed and I'm getting the following error instead:
The Content-Security-Policy directive 'prefetch-src' is implemented behind a flag which is currently disabled.
I tested my application in Chrome and I can see the logs properly.

If you mean in the desktop version of Teams, then when you access via DevTools (sounds like this is what you're doing), try choosing All WebContents. Remember, Teams is an electron app historically, so everything is a "web" content - you'll get multiple DevTools windows and you need to find which is the right one for your tab. Screenshot below shows this option.
But, a better tip, if you're actively developing your tab, is just to run Teams in a browser directly (browse to teams.microsoft.com) - then it's just a single DevTools option and easier to manage.

Related

Check developer console in MS teams Tab App

I have created a personal Tabs app and deployed the same on MS teams.
Things are working as expected, but at 1 stage of time, my application goes back to the original "contentUrl" page as defined in the manifest.json file.
This might be an issue with my frontend code, so i wanted to understand how can we debug the frontend developer console to check if there's any error being thrown from my application?
The only way to figure out what is going on is to use the DevTools. To use DevTools in the desktop client, you must:
Ensure you have enabled developer preview.
Open up a tab so you have something to inspect with the DevTools.
Open the DevTools one of the following ways:
On Windows, you open DevTools via the Microsoft Teams icon in the
desktop tray.
The following example shows DevTools open and inspecting a tab configuration dialog:
Ref Doc-https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/developer-tools

Firefox developer tools: restrict messages to current site

Is there any way of filtering out non-website warnings and errors?
I’m trying to use the console to troubleshot my JavaScript code, but the console is cluttered with messages from other sources such as Firefox addons. I some cases I can’t find my own console.log messages because of these messages.
Is there some sort of flag or setting to limit messages to the current site?
Only the Browser Console (available e.g. via Ctrl+Shift+J / Command+Shift+J or Firefox Menu > More Tools > Browser Console) shows messages coming from all different sources including add-ons.
The normal Web Console within the Firefox DevTools (available e.g. via Ctrl+Shift+K / Command+Option+K or F12 > Console) only contains messages from the current website.
So, you should ensure you're looking at the right console. If you're sure you are using the right console, then it's a bug and you should report it to Mozilla.

App runs inside Teams, but not on localhost

I've been trying to figure this out for a while and docs are unclear. I have used the MS Teams Toolkit for VSCode to generate the project. My ngrok tunnels are up and I can run my tabs and bot inside the Teams Client after adding the Development.zip file.
I have simple tabs, but now I need to call APIs, debug stuff, log info and actually see it, etc.
I've put a simple console.log() in my code to test it out...
The terminal for the tabs, launching react, gives me this:
but when I go to localhost:3000/search (search is my tab name), I get this...
I did go back to the client, opened the DevTools, looked at the console... no console.log
I've also tried to add a certificate as mentionned in the docs, but when I go to https//localhost:3000 the Certificate options they mentionned arent visible.
You'd think an extension by Microsoft for Microsoft would work out of the box and be well documented... Oh man. I need to be able to debug this, interact with the bot, etc. just as you'd do with a standard React app...
Any tips? Thank you!
Use the Web Client instead. Easy access to your console from there and opens just fine.

Firefox Dev tools: How to persist calls in network analysis

Since Firebug is outdated with a recent update of Firefox I'm trying to work with the Firefox dev tools. As far as I read these are supposed to replace Firebug.
However there is one option I used frequently in Firebug and haven't found yet in the Dev tools: The persist option in the network analysis.
Since I work on a project that uses AJAX Calls to send data and then redirect to another page, I need to persist the calls to analyze them after the redirect. Otherwise the time is far to short to have a look at the data that was send with this call. (This project is for work so this architecture is nothing I could change).
Is there a way to persist the network calls in the Firefox Dev tools?
(I use Firefox 56.0.1 by the way)
Open the Settings for the Developer Tools:
Then select "Enable persistent logs" under "Common Preferences."
Reference: https://developer.mozilla.org/en-US/docs/Tools/Settings
Starting from Firefox 57.0 the option got moved from the Settings to the Network panel:
On Firefox for Mac, in version 101.0.1, the "Persist Logs" option is now hidden behind the gear icon in the top right of dev tools box.

Cannot start web-simulator on google actions for API.AI project

I am working on Google Cloud Platform to develop a project in API.AI, I have an integration (in API.AI) with Google Actions (for Google Home or Google Assistant), they provide me to see my progress as real time in web-simulator, that you can find here:
https://developers.google.com/actions/tools/web-simulator
I am trying to START the web-simulator clicking on START button, then I get a window pop-up but after open, it closes, I try and try again but I obtain the same result, I cannot open the web-simulator. I have allowed the popup windows in my browser.
Of course I have completed all steps to start web-simulator...
I don't know what is happening. Someone can help me? Thank you, have a good day.
First, are you using a compatible browser? Try it in Chrome if you're
not already using it, as Chrome is a Google product, and so is the
web simulator.
Next, are you using any Ad-Blockers or
Script-Blockers like NoScript? If so, try disabling them, as they
could interfere with the operation of the tool.
If it still doesn't work, try going to an Incognito Windows by pressing the
three dots button and opening a New Incognito Window. Go to the page, and log
in. This will ensure that no cookies are interfering.
At this point, if you're still having issues, try a different browser.
(Either Firefox or Opera)

Resources