How To Use Firebug (My Secret Tool) (23)
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 msnbc.com 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
.
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
Are you able to edit the page and then download the page's files (with edits)?
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.
awesome..i never thought about using firebug that way! great share!
Originally Posted by ubershawn
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.
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".
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
Polar just showed me Rainbow 1.1 (firebug plugin) it's a really slick tool for getting color hex codes fast!
Stop giving everything away dammit! =D
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.
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:
http://www.youtube.com/watch?v=N8SS-rUEZPg
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
Coding makes me puke, but I'm def going to check out chromes tools! Awesome post.
Hey, great tip thanks.
Is there a way to save the firebug-edited page and then port it over to bo.lt to make further changes ?
If you edited it in Firebug, why would you need to import it into Bo.lt? Bo.lt does the ripping and has less editing options than Firebug. I think you're working backwards, man.
Yeah no need for bo.lt firebug does 90% of the work for you..just do tweaks in Photoshop.
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 bo.lt
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
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...
Mr. Green, you are one smart motherfu&^er. Just sayin'
@chris_m hahah thats awesome 
I see the lead firebug developer has moved to the chrome team.
http://www.h-online.com/open/news/it...m-1281467.html
Thanks Mr Green. I'm going to have fun with this tool.
Home > Affiliate Marketing Forum >