For anyone who has an online webpage; whether it be a blog, ecommerce store, etc... I would bet anything at some point you tried to code something yourself. Maybe it was just trying to add a search bar to a free theme. Possibly you attempted to add your business number to the header of your webpage. Whatever it may have been, like most of us newbies, I bet your first trip into coding failed miserably.

coding-quote

BUT... It does not have to be that way. An app on Firefox has been out for a while, but I wanted to make sure that novice coders (and expert coders alike) are aware of this app, and using it to its full potential.

Well what is it?

The app is called Firebug, and it is a plugin for all Firefox internet explorer users. In a nutshell what Firebug does, is it allows you to open any page, and begin editing the code on the page in real time. This allows you to test out any coding ideas you may have had for a specific webpage and be able to see the coding changes you are making right then and there.

No more logging into a program, typing in some random lines of code; saving the project and then opening a new window to see if what you did was right. Now with Firebug, you can make the changes BEFORE you have log into Wordpress or your Ecommerce store.

firebug-test

Simply open up the page you are looking to tweak in your Firefox browser. From here activate Firebug and click on the area you want to change. If you clicked on the header, it would show you the dimensions of the header, if there are images in the header, the size of the fonts, etc; anything you need to know is right there in front of you.

I don't just want to see the code, I want to change it!

You can do that too. Once you have located on your webpage the part you would like to change, you can simply start making the coding changes right there in the Firebug app. What basically happens is with every line of new code you add (or delete), this is instantly reflected in your Firefox browser that you have open.

So for example, if you want to see how your title of a blog post would look in bold, red letters, you could tweak it right there in Firebug. The beauty of this is, if the change just looks awful, you do not have to worry about a single visitor seeing it. Simply hit refresh on your webpage, and try again!

coding-wizard

I saved the best for last when regarding this app. Once you have the coding changes made in Firebug and you like how your site looks; you can copy that code in Firebug and paste it right into your programs template. It really is that simple! Just copy and paste the code from Firebug, in exactly the same spot you made the tweaks but this time in your template editor, and your site is will have the work done permanently.

Coding is difficult to pick up on your own, but so are a lot of things in life. Do you know how to swap out a 3m filtrete air filter for your home? Do you even know what a 3m filtrete air filter is? With Firebug you have the freedom to teach yourself how to code, without any irreparable damages being done to your sites.

Check out this app, it will change the way you code; I promise you that!

About the author

Alex Roman

Independent graphic artist and architect based in Bucharest. I really love what i do!

Follow me on Instagram and Facebook.

Post a comment

Comments

  • Andrew Maslow
    2014-06-20 09:29:07
    already using it, great add-on!