Tip How To Use Firebug (My Secret Tool)

What is firebug you ask? It’s a firefox plug in you can download from hurr.

A lot of people use this for programming related things, well Mr Green has got more interesting uses for it!

Have you ever wanted to mimic websites or offer pages, and spent ages running around downloading fonts, messing around with colors, and going crazy trying to get the right sizes and spacings?

Feast your eyes on this image:

It shows with a little tweak made from firebug.

Can you spot the tweak? I’m sure you can!

Yes Mr Green I see the tweak, but what is the point of this??

Well in media buying, creatives that match the sites css usually have a wicked CTR. Usually to match a sites css you have to download new fonts, take note of spacing, sizing, the works! It’s a lot of effort.

You can use firebug to create your ads on the fly, then just take a screenshot and do finishing tweaks on Photoshop.

Step 1. Click on the firebug icon.

Step 2. Click on the select tool.

Step 3. Click on the section of text on the website you want to edit.

Step 4. Replace the text that is shown in the firebug viewing panel.

Here is an example creative I made in under 60 seconds. The only things I did in photoshop were duplicate the text and add the pic of that new reporter.

Now let’s say you are doing PPV…and you want to make a FB looking alert lander.

Just edit some sections on FB using firebug, screenshot then photoshop…there’s tonnes of sections you can mess with example…

Firebug is a very powerful tool that is a must for any affiliate! It’s free!

Hope that helps some of you who struggle with the design part of AM .

User Comment:
I have firebug but was only using it to mess around with/test changes to some of my sites. Def an eye opener on $$$ making ways to use it. great post

User Comment:
Are you able to edit the page and then download the page’s files (with edits)?

User Comment:
Fuckin awesome! I used Firebug in a class before in college and also to fuck around with friend’s Facebook’s in class. Some really thought I hacked their account or something. I’ll definitely give this a shot for banners.

User Comment:
awesome..i never thought about using firebug that way! great share!

User Comment:

Originally Posted by ubershawn

Are you able to edit the page and then download the page’s files (with edits)?

Yep you just edit, then copy paste the code from the firebug panel.

User Comment:
firebug is sooooo very useful. i also use it to copy a lot of javascript functions or to figure out how certain tricky things are working such as on email submits. also, you can see anything that the load pages. ive used it many times to grab certain media files too.

User Comment:
Great tip.

I’d add that you can do the same thing in the Chrome browser (without firebug). Just right click on what you want to change, and click "inspect element".

User Comment:
couple cool add-ons for fire bug too….like fire picker shows the color when you roll over the css…..I started playing with it more when Dr. Green mentioned it earlier this week….powerful shit it can do

User Comment:
Polar just showed me Rainbow 1.1 (firebug plugin) it’s a really slick tool for getting color hex codes fast!

User Comment:
Stop giving everything away dammit! =D

User Comment:
I’ve been doing stuff like this with firebug for awhile. On some sites you can even change timers so that you don’t have to wait hah.

User Comment:
Firebug is awesome and got me started with html & css editing.

As @inversion suggests, Chrome has got the same functionality build in, so if thats your favourite browser you dont need to switch to Firefox, you can stick with Chrome.

hover over code to see section of page it relates to, with css selector, and element dimensions:

its got some really helpful features like the Resources view where you all see all ‘iframed’ content as folders, and all files are categorised.

or the network view to see which elements of your page take a long time to load.

for you JS peeps – the javascript debugger is exceptional.

And to see where you need to optimize your page load time, use the Audits function. Heres the output from auditing the STM forum homepage:

Heres a great (but long) video from the recent google dev conf:

Healthwarnining: dont watch this video if coding makes you puke

And some super awesome tips from the video:

Google Chrome Dev Tools now keeps a revision history of the changes you make in the code. You can then switch to the Resources view and the changes are highlighted. You can switch back to previous revisions, and save the stylesheet.

Track redirects in your browser. Great for checking offer redirects

User Comment:
Coding makes me puke, but I’m def going to check out chromes tools! Awesome post.

User Comment:
Hey, great tip thanks.

Is there a way to save the firebug-edited page and then port it over to to make further changes ?

User Comment:
If you edited it in Firebug, why would you need to import it into does the ripping and has less editing options than Firebug. I think you’re working backwards, man.

User Comment:
Yeah no need for firebug does 90% of the work for you..just do tweaks in Photoshop.

User Comment:
fiebug or chrome dev tools are not a website ripper. so although you can save changes you make to files, it doesnt download all files to your local machine for uploading to your server.

If your ripping webpages (or landing pages), what I would do is:

1) open it in

2) do some of the obvious edits

3) save the zip file with all the images/js to your local drive

4) open it in your browser

5) edit with firebug/chrome

User Comment:
LOVE Firebug – it’s the one and only reason I can actually get by doing some coding… Plus it’s how those ‘Get Rich Quick’ maggots can do screenshots of their bank accounts showing zillions of dollars in… Make the changes in Firebug then screenshot their online bank statement…. I also freaked out my AM recently as he was unaware of Firebug – so I sent him over my Reports page from my account showing how he was now paying me $500 a lead with a side note saying he authorized it..!!! – his coding guy thought it was hilarious as my AM couldn’t fathom out what had caused the glitch in the system…

User Comment:
Mr. Green, you are one smart motherfu&^er. Just sayin’

User Comment:
@chris_m hahah thats awesome

User Comment:
I see the lead firebug developer has moved to the chrome team.…m-1281467.html

User Comment:
Thanks Mr Green. I’m going to have fun with this tool.

The Article Published IN 07-19-2011 03:34 AM

Share To More ()