Firebug. Mozilla Firefox plugin

Firebug is a Mozilla Firefox plugin that can be used to inspect the website source code, modify the CSS and trace the website errors.

It can be downloaded from the official website at http://getfirebug.com/. Click the button Install Firebug on the website to install the plugin.

After the installation you should see the bug icon in the bottom right corner of your browser.

In case you don’t see it make sure your Add-on bar is enabled. Go to View > Toolbars > Add-on bar or press CTRL+/

To open the Firebug window click on the bug icon. You should see the Firebug working area:

Inspecting the HTML markup

Inspecting the HTML markup helps you to locate where the elements you want to edit are located. It shows you the html tags, tag classes and content.

1. Click the Firebug icon in the bottom right corner of your browser window
2. Click the Inspect button
3. Hover the element you want to inspect.

Feel free to check the detailed video tutorial below:

Editing CSS styles

Editing CSS styles through Firebug allows you to see how your changes will affect your website, what style attributes are assigned to each element and how you can change them.

1. Click the Firebug icon in the bottom right corner of your browser window
2. Click the Inspect button
3. Hover the element you want to inspect.
4. In the right column of the Firebug working screen edit the CSS styles.

Note that Firebug also shows you the line in the CSS file where you can find the element class. Also hovering the CSS file name will show you the directory where it is located.

The changes made in Firebug won’t be saved. You can only see how your changes will affect your browser. To save the changes please edit the .HTML and .CSS files.

Feel free to check the detailed video tutorial below:

Tracing errors

Sometimes installing the template some features may not work. Without the developer tools it’s hard to find the reason of the issue. Firebug plugin will help you to find and resolve the issue. If there are any errors on your website – the plugin will show them in the right bottom corner.

Open the Firebug window and enable the console. Make sure you have Show JavaScript Errors and Show Network Errors features enabled. Then refresh the website page.

Firebug will show you all the website errors and some clues on how to solve them.

Most of the error has the error codes. At the above screenshots you can see the 404 errors. This means that the specified files are missing. Try to reupload them.

You can also use the Net tab to see the causing errors files. The errors are marked with red.

Feel free to check the detailed video tutorial below: