Now that we have downloaded and installed firebug, let’s move ahead with the types of locators that we would be creating using firebug. Step-8: Now the firebug can be seen at the bottom of the Firefox window.

Click on Firefox menu bar -> Web Developer -> firebug -> Open Firebug.

Click on the Firebug icon present in the extreme top-right corner of the Firefox window.

Step-7: Now to launch firebug, we can opt either of the following ways: Note: Unlike Selenium IDE, we are not required to restart the Firefox to reflect the firebug installation, rather it comes readily. Step-6: As soon as the installation completes, a pop up appears saying that the firebug has been installed successfully. Step-5: As soon as the process completes, software installation window appears. Step-4: Now Firefox downloads the add-on in the backdrop and a progress bar is displayed. Step-3: As soon as we click on the “Add to Firefox” button, a security alert box would appear, click on the “Allow” button now. Step -2: Click on the “Add to Firefox” button present on the webpage.

The URL takes us to Firefox add-ons section. Step -1: Launch the Mozilla Firefox browser and navigate to this Firebug add-on download page. How to Install Firebug?įor the ease of understanding, we would bifurcate the installation process into the following steps. The elements can be found uniquely based on their locator types which we would be discussing later in this tutorial. It helps us identify the elements uniquely on a webpage. This tool helps us in identifying or to be more particular inspecting HTML, CSS and JavaScript elements on a web page. Unblock bottlenecks, streamline processes, optimize assets.įind memory leaks and make your application zippy.Įdit and manage all your CSS stylesheets in your browser.Firebug is a Mozilla Firefox add-on. Test sites on emulated devices in your browser.įine-tune animations, alignment and padding. Monitor network requests that can slow or block your site.Īdd, modify and remove cache, cookies, databases and session data. Powerful JavaScript debugger with support for your framework. Track CSS, JavaScript, security and network issues. Inspect and refine code to build pixel-perfect layouts.

It also includes valuable information such as the font source, weight, style and more. The new fonts panel in Firefox DevTools gives developers quick access to all of the information they need about the fonts being used in an element.

Firebug download for firefox 30