If you would like to edit your WordPress theme, FireBug is definitely one of the tools to use.
This FireBug tutorial (7-minute video) will help you understand the basics of this awesome tool.
What is FireBug? FireBug is a browser extension available for Firefox, Chrome and many more. The add-on lets you edit HTML or CSS code live on any site in your browser.
Why use FireBug? Once you understand how FireBug works it easy extremely easy to navigate through source code, but also for tweaking and editing it is very efficient. But probably the best thing about FireBug is that it let’s you view your changes live your browser. So trying out different fonts, colors, margins, paddings or even images can easily be done with FireBug.
How to use FireBug? There are many functions within this tool. To have a basic understanding check out this video below.
Before refreshing you need to export/copy the code. You can easily insert it into your theme or child theme files.