How to debug web apps with Firefox Developer Tools
A must know-how for advanced web development
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:
- debug mobile and tablet versions of your web application on your computer.
- connect the mobile Firefox application to your computer and debug web applications there.
- find the fonts and styles that best fit your website without having to build your CSS and JS code again-and-again.
- find problems in your CSS layout.
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:
- Press the F12 key
- Go to the hamburger menu on the far-right of the URL-bar and click it. At the bottom, find the option above “Help” that says “Web Developer”. Open any nine options.
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.
- The pointer option will help you find a DOM element in your webpage by simply hovering on it in the UI.
- Page Inspector: The page inspector allows you to view your webpage’s HTML code at runtime. It also allows you to view CSS properties and configure fonts and animations.
- Web Console: The web console is the most well-known tool among front-end developers. It is where your
console.log("...");statements get printed.
- Style Editor: You can view and edit the individual stylesheets used in your webpage, including inlined CSS in style tags. In addition, you can write addition CSS code or import another stylesheet from your computer.
- Performance Tools: This allows you to view how long certain events take and how many FPS your webpage is able to do. (The FPS, or frames-per-second, is the number of times the browser is able to update the display. Optimally, it should be 60 FPS depending on your OS and monitor hardware.) You will have to start monitoring your performance which is loaded into a buffer in memory. You can only view the results after stopping the monitoring; otherwise, the performance would degrade due to the load of displaying real-time performance data itself.
- Network Monitor: This tool allows you to view all of your network requests.
- Storage: You can view and edit your site’s cache, cookies, indexed database, local and session storage.
- Accessibility Tools: You can view how accessibility features interpret your webpage. This is crucial if you want your website to get the maximum audience possible.
- Responsive Design Mode: You can test how your website will work on mobile and tablet devices. It works much better than downsizing the browser window on your laptop. In addition, you can test the website’s response to device rotation, network throttling, device pixel ratios, and touch-event simulation.
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.
In addition to editing fonts, you can edit animations. I have yet to test that feature out!
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:
- If you ever love the color scheme of a website, open it in Firefox and inspect each pixel and copy off the colors you like.
- You can see how anti-aliasing works by viewing individual shades being displayed in fonts.
- You can debug your HTML5 canvas. For example, check out how PixiJS’s anti-alias option changes rendering.
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
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.
- Open 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 Android
- Firefox debugging with iOS and Chrome for Android
- USB debugging with Firefox
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-makeumake 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:
Name[en_IN]=Firefox Developer Edition
Name=Firefox Developer Edition
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.
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!!!