How to Download FireBug. FireBug is a plugin that comes with Firefox browser, hence it is easily downloadable from Firefox itself. 1) Go to Tools Web Developer Get More Tools. 2) It will open a Webpage and display all the plugins available for Firefox browser. As we need Firebug, just click on Add to Firefox button for Firebug. Firebug is a Firefox extension that puts a wealth of Web development tools at your fingertips while you browse. You can edit, debug, profile and monitor CSS. Firebug Will Be Integrated with Firefox's DevTools - Screenshot Tour, Download Firebug 1.12.1 for Mac OS X.
Freeware
Windows
2.5 MB
44,944
Always at your service
Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
Inspect and edit HTML
Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
Tweak CSS to perfection
Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.
Visualize CSS metrics
When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
Monitor network activity
Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.
What's New:
Added download to Firebug 3.0.0 Beta 2
Console Panel
- Added preference extensions.firebug.groupLogMessages to define whether to group console messages
- Clicking the bracket of a logged array shows it inside the DOM Panel
- Mutation Observers are listed when executing getEventListeners on an HTML element
- console.count(
- Added menu option to control log message grouping
- Console API is now also available in web workers
- Log message counter was moved to the left
Command Line
- The command history is now limited
- The Command Editor now has an auto-completion like the Command Line
- Switching to the Console panel now always focuses the Command Line
- Command Editor now has line numbers
- Added option to pretty-print the source
- Allowed to change the indention within the Command Editor
HTML Panel
- All classes of an element are listed inside the Element Path
- Added Ctrl + E as shortcut for editing the selected element
- Changed Alt + double-click to Alt + click for editing the selected element
- Unnecessary tooltips were removed
- Clicking > allows adding a new attribute to an element
- Added search by CSS selector and XPath
- Added auto-completion for HTML attributes and SVG attributes
- Added auto-completion for CSS styles within the style attribute
- Hovering cropped attributes now displays their full value
- XPath can now be copied as relative and absolute path
- Edit Mode now has line numbers and syntax highlighting
- Added regular expressions search
Events Side Panel * Integrated EventBug into Firebug by creating a new Events side panel within the HTML Panel
Inspector
- Quick Info Box can be pinned
![Firebug For Mac Firebug For Mac](/uploads/1/2/6/4/126461345/658681317.png)
CSS Panel
- Color values can now be displayed as authored
- Source Edit Mode now has line numbers and syntax highlighting
Script Panel
- Notification is shown when the source cache got exceeded
- Added an option to only stop the script execution on uncaught exceptions
- Added syntax highlighting for the code
- Breakpoint condition editor auto-completion uses variables in scope
- JSD2 got adopted
- Added button for pretty-printing
- Allowed to inspect selected expression
Watch Side Panel
- Added shortcut Alt + W for creating a watch expression from the current Script Panel selection
- Exceptions and return values of functions are shown and return values can even be modified
DOM Panel
- Added context menu option to set a breakpoint on a function
Net Panel
- Headers in net requests can be collapsed
- Improved JSON parsing
- It is now indicated that the panel is initially sorted by the timeline
Cookies Panel
- Added option to copy cookies to the clipboard as JSON (hidden behind preference extensions.firebug.cookies.jsonClipboardExport)
- Cookies are now sorted alphabetically
Search Field
- Current panel's name is displayed as placeholder
- Pressing the search field shortcut selects the previously entered text
- Search field and search options popup got redesigned
- Pressing Esc in search field clears it
Start Button
- Clicking and hovering the error badge have different actions than the toolbar button
API
- Added possibility to modify a panel's tab
- getContextMenuItems() now provides the mouse coordinates
Miscellaneous
- Clear Activation List confirmation can be bypassed
- monospace is now used also on Mac OS instead of Monaco
- Improved ancestor path design
You may also want to see the complete list of enhancements of Firebug 2.0.
Popular apps in Browsers
Let’s start to learn how can we install and use Firebug and FirePath, the two most used Firefox browser plugins for test automation developers.
In our last blog post, we’d explained various types of Selenium locators with useful examples. If you are just a beginner in test automation, then you must read this post.
Download Firebug For Mac
The next step for you is to learn about the tools that can help you in finding the locators.
In today’s post, first, we are sharing the step by step instructions to install the FireBug and FirePath add-ons for Firefox.
Secondly, we’ll give away some unique tricks to help you find locators on the web pages.
Here is the table of content which you can use to navigate throughout the post.
How to use FireBug and FirePath to find locators?
What is XPath?
XPath is a technique for uniquely identifying an element on a web page. It behaves like an address to an HTML element such as check boxes, text, images, links, and divs, etc. In Selenium, we treat XPath as one of the most trusted element locators. XPath is much more than an address as it not only points to the end point, it also contains the whole map to lead to a destination.
What is FireBug Add-on?
Firebug is the most famous add-on for the FireFox browser. It gels with FireFox so well to bring you plenty of tools for web development. It gives you control over the document object model of the web page so that you can modify, manage, and monitor the CSS, HTML, and JavaScript in real-time.
Why is the FireBug useful in Selenium automation?
Usually, there are four types of operations that you do with the FireBug add-on.
1- Display source – It gives you the ability to review the HTML of the web page after the JavaScript engine completes it processing.
2- Highlight changes – It allows to detect and highlight (in Yellow) any HTML changes as they appear on the web page. This feature would fetch your attention instantly to make sure nothing gets missed.
3- On the fly Inspection – FireBug has its “Inspect” option for quickly viewing the prospective locators as you exercise it on a web element.
4- Copy HTML – You can easily copy the HTML code of the page or part of a web page using the “innerHTML” property or the XPath expression for the element.
How to install FireBug in FireFox browser?
FireBug is an add-on which you can easily download from the FireFox plugin store.
1- Follow the menu option as Tools >> Web Developer >> Get More Tools.
![Firebug Firebug](/uploads/1/2/6/4/126461345/874107580.gif)
2- The above action will lead you to a web page as shown in the below image. There you will find an option to download/install the FireBug add-on. You should click the “Add to Firefox” button to begin the plugin installation.
3- Upon clicking the add link, you will see the below popup. Now, click the “Install” button to complete the installation.
4- After finishing the FireBug installation, you can use “F12” shortcut key to launch the Firebug add-on. Check out the below screenshot.
Learn how to use FireBug to find element locator?
It is easy to use FireBug, just follow the below steps.
1- Right click on any web object and press the “Inspect Element with Firebug” option. It’ll open up an HTML code window as shown in the below image.
2- From the code window, again right click and select the “Copy XPath” option to retrieve the element’s XPath locator or you can try other ones as well.
What is FirePath add-on?
This plugin extends the capability of the FireBug add-on. It brings the options to modify, inspect and produce XPath and the CSS Selector locators.
Why is the FirePath useful in Selenium automation?
1- You can supply custom XPath values and test their correctness by spotlighting the effects directly on the Webpage.
2- It returns the XPath of the element you’ve selected Like the Firebug add-on does.
Firebug For Microsoft Edge
How to install FirePath in FireFox browser?
We’ve told above that FirePath only extends the FireBug capabilities. So you should install it after adding the FireBug add-on.
1- It is the same process as we did for the FireBug add-on. Just go to Tools >> Web Developer >> Get More Tools.
2- Search for the FirePath plugin and click on the “Add to Firefox” button.
3- After clicking the add option, the FirePath installation dialog will open as shown below. You’ll have to press the “Install” button to finish the process.
4- Now, you can give the “F12” command and check the “FirePath” option got added in the Firebug’s toolbar.
Learn how to use FirePath to find element locator?
It is, even more, easier to use FirePath than FireBug. Check out the below steps for help.
1- Open FireBug and click on the “FirePath” tab. There you can find an XPath edit field which would point to the XPath of any selected web element. Here you can write a custom XPath and use the “Highlight” button to verify it.
2- The FirePath plugin makes the presentation of the XPath pretty straight. You can easily copy the XPath of the selected web element. And later use the saved XPath value in the test automation project.
Live Action – Installing and Using Both FireBug and FirePath in FireFox.
Now, it’s time to summarize what you’ve learned from this post. We’ve brought you the animated GIF, which contains the step-by-step process of the plugin installation and the usage flow as explained in the above sections.
Compare FireBug and FirePath.
Firebug Mac Os X
The fundamental difference between the two is that FireBug returns the Absolute XPath whereas the FirePath returns the relative path. Check out the below examples for more clarity on the difference between the FireBug and FirePath. Though you can also tune the FirePath setting to produce the absolute XPath as well.
Best,
TechBeamers.