What is Firebug?

-

Firebug is a free web development tool.


In this tutorial we are going to discuss following -

  • How to install Firebug.

  • Inspect and edit HTML with Firebug.

  • Inspect and edit CSS with Firebug.

  • Debug and profile JavaScript with Firebug.

  • Execute JavaScript on the fly with Firebug.

  • Logging for JavaScript with Firebug.

  • Monitor network activity with Firebug.


Installing Firebug




You can download and install Firebug from https://addons.mozilla.org/en-US/firefox/addon/1843/.

After visiting the page referenced above, click on the Download button, it shows a window to and click on the Install button there. It takes a while and asks you to restart the Firefox browser. Once rebooted, click on Firebug under Firefox(top left corner of your Firefox browser) > Web developer.

At this stage firebug is not activated. If you click that icon, Firebug will get activated.

Components of Firebug


Firebug Options


firebug options

Click an element in the page to inspect


Click-an-element-in-the-page-to-inspect

Go back and forward


go back and forward

Show command line


show-command-line

Panel selector


panel-selector

Console


console

HTML Panel


HTML-panel

CSS Panel


CSS-panel

Script Panel


Script-panel

DOM Panel


DOM-panel

Net Panel (used for profiling so useful for page speed measuring and optimization)


Net-panel

Buttons for other activities


other buttons

1 - Minimize Firebug.

2 - Attach Firebug to the browser window.

3 - Deactivate Firebug for this site.

Video Tutorial

Comments

Post a Comment

Popular posts from this blog

Robot Framework vs Cucumber

-
Image
robotframework-extendedselenium2library 0.9.1 Downloads ↓ Extended Selenium2 web testing library for Robot Framework with AngularJS support Introduction ExtendedSelenium2Library is web testing library for Robot Framework that uses the Selenium 2 (WebDriver) libraries from the Selenium project, to control the web browser with AngularJS support. It leverages Selenium2Library internally to provide AngularJS synchronization support, to provide AngularJS locators support, to deliver keywords enhancement, and strive for a seamless migration from Selenium2Library . ExtendedSelenium2Library runs tests in a real browser instance. It should work in most modern browsers and can be used with both Python and Jython interpreters. More information about this library can be found in the Keyword Documentation . Robot Framework and Cucumber Similarities  ...
Read more

Performance Testing of RESTful APIs Using JMeter

-
Image
What is a RESTful API? REST (Representational State Transfer) is a simple stateless architecture that uses HTTP protocol. In a Client-Server Application most of the web services use REST API so that clients, third party applications can access its resources using URI (Uniform Resource Identifier) How do we do the Performance testing of RESTful API’s?
Read more

Verification displayed number of rows inside table by Robot Framework

-
I got task for verification number of rows per page after switch "Show" filter.  *** Variables ** ${full_xpath}         xpath=//div[@id=\'rso\']/div/div/div[ x ]/div/h3/a     # not usable ${xpath_part1}     xpath=//div[@id=\'rso\']/div/div/div[ ${xpath_part2}    ]/div/h3/a *** Keywords *** # Format Method ----------------------------------------------------- Format - Looking by number     [Arguments]       ${locator1}    ${num}    ${locator2}     wait until elemet dispayed         ${locator1}${number}${locator2} *** Test Cases *** # Row x  ----------------------------------------------------------------- Verify number of raws by "Show" filter All     Format - Looking by number   ${ xpath_part1 } @{ num }[ x ] ${ xpath_part2 }  
Read more