How to debug web apps with Firefox Developer Tools

A must know-how for advanced web development

Shukant Pal
Apr 24 · 6 min read
Photo by Charles 🇵🇭 on Unsplash

By knowing how to debug your web app, you can leverage developer tools to hack your productivity. After reading this article, you’ll be able to:

Finally, at the end — I am going to tell you how to install the powerful Firefox Developer Edition.

Opening developer tools

Most of us know how to open the developer tools either by mistake or by experience.

Here are a few ways to open the developer toolbox:

Brief overview of the UI

At the very top of the toolbox, you will find that there are many “tools” that have very different uses.

Toolbar

The last menu in the toolbar will allow you to dock the developer toolbox on the left, bottom or right side of the browser. In addition, you can separate the toolbox into a totally different window.

Important features that you should make use of

Testing out new fonts

In the page inspector, find the third panel (it may be hidden, click the arrow on the second panel’s top-left corner). It has a tab called “Fonts”.

After selecting an HTML element using the pointer option, you can start manipulating the font size, weight, style and find the best-looking combination. You can even change the font family by editing the HTML style attribute directly in the HTML editor.

Editing the “Hello word” font using developer tools

In addition to editing fonts, you can edit animations. I have yet to test that feature out!

Eyedropper

This is one of those features that everyone overlooks because it is so small. If you look carefully, next to the “Search HTML” text box in the HTML editor, there is a dropper symbol on the right.

The eye dropper can be used to select a color from the webpage. I wasn’t able to screenshot it because it takes the focus automatically. I’ll explain it in words — no problem!

The eyedropper follows your pointer. It will expand into a 7x7 square of pixels and display them expanded individually so you can inspect each color. It will tell you the color hex of the center pixel.

You will find it useful in many cases:

Screenshot

Firefox’s screenshot tool is so useful, not only for developers, but for everyone. It is something that Google Chrome is yet to implement! 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 device

Prerequisites

You 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 debugging

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 Developer Edition

Finally, 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 Linux

You 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-make
sudo apt-get update
sudo apt-get install ubuntu-make
umake web firefox-dev -r # installs firefox dev edition

To 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.0
Type=Application
Terminal=false
Name[en_IN]=Firefox Developer Edition
Exec=/home/shukant/.local/share/umake/web/firefox-dev/firefox
Name=Firefox Developer Edition
Icon=/home/shukant/.local/share/umake/web/firefox-dev/browser/chrome/icons/default/default128.png

Be sure to change the file paths to the ones on your system. Specifically, change the “/home/shukant/” part to “/home/your-username”.

Windows and macOS

You 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:


Be 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 Pal

Written by

Professional student freelancer