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
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.
I am trying to learn WebExtension development for Firefox. I find the window debugging tools EXTREMELY useful as I can interactively evaluate javascript code in the window context.
For the Webextension APIs at the browser level, I have been totally unsuccessful when trying to similarly use the browser console. For example trying to use the tabs API
Click on menu->developer->browser console
In the console command line enter any expression beginning with browser and I get
"ReferenceError: browser not defined"
I have tried in chrome and got same error (read article about chrome.* vs browser.*)
For example trying to find all tabs:
var querying=browser.tabs.query(queryInfo)
or
chrome.tabs.query()
Returns browser or chrome as not defined
Please help
As described at [1] WebExtension APIs are present in pages contained inside a WebExtension. The browser console gives you access to the javascript environment used to implement the main browser user interface which is a very different environment.
To experiment with the WebExtensions APIs interactively, your best bet is probably to create a very simple WebExtension with an empty background page, then attach to it with the debugger [2]
[1] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API
[2] https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging
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.
I am using Firefox 50.0. After auto update of Firefox to version 50.0, Firebug has stopped working and attempting to use it is showing an inbuilt Firefox console while inspecting any DOM element.
Is there any patch to use Firebug on Firefox 50.0 version?
Solve The problem by Changing Mozilla Browser Configuration Settings.
Open A Blank Tab
type about:config in address bar then press enter (click on I accept the risk!)
find browser.tabs.remote.autostart
select the option then click the mouse right side
Turn The Option As False
Close the browser for restart browser
open browser again, inspect the element. I hope It Works Properly.
I manage to get Firebug work again, so here is what I done.
Everyone knows that Firebug isn't being developed or maintained any longer because it can't work with e10s, so here is my workaround:
Download Firefox Developer edition so you can allow XPI installation.
firefox-53.0a2.en-US.win64.installer.exe or
firefox-53.0a2.en-US.win32.installer.exe
Run Firefox developer edition after installing and go to the about:config (type in url bar)
Find xpinstall.signatures.required (set to false)
Find browser.tabs.remote.autostart (set all to false: browser.tabs.remote.autostart.1 and browser.tabs.remote.autostart.2)
NOTE: The Multi-process architecture improves the browser's stability, performance and security by separating tasks into processes, you disabling it at own responsibility.
After that you need to restart the browser.
Now you can go at the Firebug repository and install desired version
Here you can find all Firebug installations
I chose latest firebug-2.0b8.xpi and it forking fine.
P.S. You can disable updates for Firefox Developer edition.
Hope it helps.
Head over to Firebug website, you can see following message:
The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.
Also Sebastianz told me,
Firebug is discontinued. The team has split up, the former team leader Jan "Honza" Odvarko is working on the Firefox DevTools now.
As #Makyen said in his answer, Firebug does not work with multiprocess Firefox, so remove Firebug right now and try Firefox DevTools instead, it's not optional (sadly), unless you don't update Firefox :)
Update 1
Take a look # Why got Firebug removed after updating Firefox to version 50?
Update 2
Take a look # my answer here: how to revert firebug to old version
Firebug does not work with multiprocess Firefox
The Firebug site claims that:
Firebug 2.0.18 is compatible with Firefox 30 – 52
However, it also explains that [emphasis mine]:
Firebug 2.0.18 fixes issue 8030. The extension is marked as multi-process (e10s) compatible so, it isn’t blacklisted and users can continue installing it. This way Firebug can help users to easily migrate into built-in Firefox developer tools – in case it’s running in multi-process enabled browser. When opened in a multi-process Firefox, Firebug’s tools cannot be used. Firebug will then only assist the user with migration to Firefox’s built-in tools.
They also direct you to read: Unifying Firebug & Firefox DevTools
That page says that [emphasis mine]:
Firebug 2 doesn’t work in multi-process browsers (i.e. e10s) and converting it is too complex, so it will stop working when e10s is activated in Firefox. You will be able to disable e10s for a while to keep using Firebug 2, but this won’t last forever.
The fact that Firebug does not actually work in multiprocess Firefox will account for different people having different experiences with Firebug working or not working in a particular version of Firefox. Firefox automatically enabling multiprocess mode will depend on multiple factors, including what other add-ons are installed in the profile.
Using Firebug in newer versions of Firefox
Thus, to use Firebug in newer versions of Firefox, you will need to disable Firefox from entering multiprocess mode. This can be done from the about:preferences page (also available from Tools➞Options). This an option which is under the "General" tab as "Enable multi-process Firefox ...". If multiprocess is not available, this option will not be shown. This option can also be changed by adjusting the preference browser.tabs.remote.autostart from about:config. [Note: browser.tabs.remote.autostart.2 and browser.tabs.remote.autostart.1 also appear to be used to indicate default states, thus I suggest using the about:preferences page to change this option.]
You can determine if your Firefox is currently running in multiprocess mode by looking in about:support. The line "Multiprocess Windows" under "Application Basics" will state if multiprocess is enabled or disabled.
Set up profiles explicitly for testing
Personally, I have different profiles set up for each of multiprocess explicitly disabled and multiprocess explicitly enabled (set browser.tabs.remote.force-enable to true), so I can perform testing under both conditions, with the state of multiprocess being enabled/disabled being known in advance.
I had the same problem when I updated Firefox. I was so addicted to firebug but I moved on to Firefox developer edition - https://www.mozilla.org/en-US/firefox/developer/
It also comes with the firebug theme which resembles firebug UI and its efficient.Just install FDE and activate the firebug theme as shown in the image below :
I had the same unexpected surprise when ubuntu updated FFX and suddenly things like the script panel stopped working. Since I was in the middle of working on something with a short deadline, I was not going to have the luxury of learning the firefox developer toolset and desperately needed to get firebug working. The fix that finally worked for me was to set Firefox preferences not to update. Then download v 49.0.2
https://support.mozilla.org/en-US/kb/install-older-version-of-firefox
I also had to tell Ubuntu not to include firefox in it's upgrades.
It looks like firebug will no longer be maintained as a seperate project, so you will want to get familiar w/ the built in dev tools, but hopefully this buys you some time. Worth mentioning (if I'm reading this right, it sounds like it will be integrated into the native tools:
https://blog.getfirebug.com/2016/06/07/unifying-firebug-firefox-devtools/
https://github.com/firebug/firebug.next
Its working. You need to install one more add-on "Firepicker" and restart the Firefox.
https://addons.mozilla.org/en-US/firefox/addon/firepicker/
I managed to resolve this issue by simply downgrading to mozilla old version using this url:
open https://ftp.mozilla.org/pub/firefox/releases/50.0/win64/en-US/
download and run the .exe setup
Go to Settings - > Add Ons
Click on extensions and search for firebug and firepath and then add those extensions
Hope this should resolve the issue. For those using Windows 32 machine can use the url
https://ftp.mozilla.org/pub/firefox/releases/50.0/win32/en-US/
http://toolsqa.com/selenium-webdriver/xpath-helper/
Open a new tab and navigate to any webpage. I have used www.DemoQA.com for demo.
Hit Ctrl-Shift-X (or Command-Shift-X on OS X), or click the XPath Helper button in the toolbar, to open the XPath Helper console.
Hold down Shift as you mouse over elements on the page. The query box will continuously update to show the XPath query for the element below the mouse pointer, and the results box will show the results for the current query.
If desired, edit the XPath query directly in the console. The results box will immediately reflect your changes.
Repeat step (2) to close the console.