Web Rendering & Hunting UI Bugs

Web Rendering & Hunting UI Bugs

This blog was originally published at ulogx.com

Every developer would agree to the fact that, your code is Incomplete if you never encountered bugs. Irrespective of when it would’ve arised, the satisfaction you get after resolving them is unbeatable, as it helps you move towards “Perfection” or atleast help you get better and design an experience for your user.

It’s important that we celebrate these bugs and embrace the positive change they bring in us eventually. In this work, we would focus on UI bugs and the methodology which you could use to do your part of contribution. Before we go ahead, you’d require to understand what is Rendering Engine.

What is rendering engine?

It takes HTML code and interprets it into what you see visually. For instance, a tag would be interpreted by the rendering engine as a set of instructions to make the text inside of the element bold

The rendering engine has a very important job as it displays what you see on your screen. It communicates with the networking layer of the browser to grab HTML code and other items passed from a remote server.

While Google, Opera and their variants use blink as their rendering engine which accounts 43% of usage, whilst Internet explorer uses Trident(25.8%>, Firefox and it’s variants uses Gecko(18.22%), whereas Safari uses Webkit. source

Here are steps below following which you could contribute:

Event recording link HERE

  • Initially you would have to decide the website in which you’ll perform the test. Here is a list of websites where you can find bugs or else you can find it on any website of your choice.

  • The next step is to create a fresh profile with no add-ons installed before you begin your testing. You can learn how to create a fresh profile here. It would be suggestive to use Nightly or Firefox Beta in order to carry out bug hunting.

  • Let’s get started with finding bugs, for that open the website of your choice from step 1 and start looking for a bug. What is the bug that we’re looking for you may ask. It could be anything like a button that’s not working, an image is not loading, a video doesn’t play or a desktop page appears as a mobile page.

  • If you come across a bug or an issue you need to test whether the same bug appears in another non-Firefox browser. If you do not encounter with the same problem in any other browser you’ve found a bug that can be reported. Well done!

  • Lastly you need to report the bug by filling out this form. You need to be elaborative about the bug you’ve discovered including all the necessary steps to demonstrate the bug. If you’re having a Github account you can report issues with that so that you can answer the follow-up questions just in case. Happy hunting!

This post was authored by Ujwal Kumar and Shresth Singh . For any queries you can also contact Ravi Jain.

Ujwal Kumar
Ujwal Kumar Developer | Web, Mobile & API Security | Mentor
comments powered by Disqus