How to debug web apps with Firefox Developer Tools

Right click on a web page and select the “Take a Screenshot” option.

You can select part of a webpage by dragging or even click a HTML element to save.

Connecting Firefox to your Android devicePrerequisitesYou must have Firefox for Android and the Barcode scanner by ZXKing to start with.

In addition, you must have a WiFi network over which remote debugging will occur.

Go to options > settings > advanced in Firefox (mobile) and enable Remote debugging via WiFi.

Enabling debuggingOpen WebIDE on your desktop (WebDeveloper > WebIDE on your laptop) and click refresh devices.

Scan the QR code shown using your mobile phone’s barcode scanner app.

Your mobile device should be listed in WebIDE now.

Select it.

Now you can connect to any tabs open in Firefox for Android and attach the developer tools to it.

You can now harness the power of your computer to debug your web application on mobile phones.

MDN docs here:Firefox debugging with AndroidFirefox debugging with iOS and Chrome for AndroidUSB debugging with FirefoxFirefox Developer EditionFinally, my favorite part of this story — introducing Firefox Developer Edition.

This is a little-known edition of Firefox focused on web developers.

It includes a few add-ons (like Valence) for web developing and includes future technologies that aren’t included in regular Firefox Quantum.

It is delivered from nightly builds.

It gets features that have stabilized over the last six weeks.

Installation on LinuxYou can install Firefox Developer Edition via the UMake project.

For that you will have to add the PPA for UMake manually:sudo add-apt-repository ppa:ubuntu-desktop/ubuntu-makesudo apt-get updatesudo apt-get install ubuntu-makeumake web firefox-dev -r # installs firefox dev editionTo add the application in a GNOME desktop, you need to make a desktop entry as follows:#!/usr/bin/env xdg-open[Desktop Entry]Version=1.

0Type=ApplicationTerminal=falseName[en_IN]=Firefox Developer EditionExec=/home/shukant/.

local/share/umake/web/firefox-dev/firefoxName=Firefox Developer EditionIcon=/home/shukant/.

local/share/umake/web/firefox-dev/browser/chrome/icons/default/default128.

pngBe sure to change the file paths to the ones on your system.

Specifically, change the “/home/shukant/” part to “/home/your-username”.

Windows and macOSYou can use the Firefox installer directly: https://www.

mozilla.

org/en-US/firefox/developer/.

NOTE: Linux users can use the link too — although it will be more complicated to install the .

deb package directly using your package manager.

Further reading:A full overview of the HTML CanvasHow non-integer values are stored in a float (and why it floats)Removing circular dependencies in JavaScriptHow to synchronize your app across multiple devices (Android)How to use Firebase for building multiplayer Android gamesBe sure to tell me how you like the Firefox Developer Edition on Twitter.

In addition, explain whether you might switch from Chrome to Firefox for debugging your web applications!!!Shukant Kumar Pal (@ShukantP) | TwitterThe latest Tweets from Shukant Kumar Pal (@ShukantP).

OSS High Schoolertwitter.

com.

. More details

Leave a Reply