Firebug. How to determine a file with needed code

In this tutorial we will learn the way to use Firebug tool to determine the file we need to update for specific styling. Firebug software make life much easier as it allows us editing website in web browser and a lot of other stuff.

1. To open Firebug panel we need to press F12 while we have browser opened or just right click the element we need to update and then press “Inspect Element with Firebug” button:
2. You will see similar panel, on the left you will see HTML structure and on the right – styles specific to elements selected:
3. To change style you just need to click the right panel style and update the value:
4. But you should always remember that you can’t use Firebug to change style or any other changes – it is used only to preview changes. However you can use it to see the file and the exact line to edit so you could alter source files and have the changes on life website. Before each css rule in the right panel you can see blue link on the right and when you hover it you will see full path to the file you need to edit to update website, also there is number showing the exact line on the file:

As you can see – editing website becomes much easier with this tool Thank you for watching our video tutorials. Please contact us if you have any issues in editing the template. Good Luck!!!

Feel free to check the detailed video tutorial below: