Tag Archives: Firebug

Make Firefox 4 Faster

FIRST THING’S FIRST.

*UPDATED 4TH OF JULY 2011.

Quick SuperMunk Update; V.2.8.1

So I was in the middle of writing a post about surfing the web privately when my computer decided to get menopause.

It got so bad, (how bad was it?)- so bad, that

  • I typed something in the address bar and waited, and waited, waited, waiting, waiting,…
  • I clicked on my browser to open it, and waited, waited, waited, ….
  • my browser kept crashing
  • my browser kept freezing
  • everything on my desktop developed a flickering tick of some sort
  • waiting, waiting, still waiting…
  • I had only enough juice to run ONE application at a time! (I either had to close out of Twitter or my web browser to use either one)
  • my CPU was maxed out and I couldn’t find which culprit it was

Happyguy kept insisting I reinstall Windows. Well gee, that would be nice, if I HAD the original disc it came off of! And to make a backup disc I have to back up ALL my files first lest they mysteriously disappear during reformatting, all 60GB of them. To give you a comparison, I only have an 80GB hardrive, with a DVD-rom  but no, it doesn’t BURN DVD’s like I need it to. Bonus yuks:  it also has a floppy drive. I mean, that is how old this damn thing is.

So I shelved the blogging for a very long while and began taking care of business from a maintenance point of view, with very much frustration. Here’s all the wonderful things I did:

  • Cleared registries
  • cleared empty folders
  • backed up file folders then removed them from computer
  • vacuumed inside my tower
  • defragged
  • optimized my memory
  • disabled useless programs upon bootup
  • set computer so it doesn’t save passwords or history or anything
  • uninstalled and removed old apps I would never use again
  • full scan on virus, malware, spyware
  • scanned for root kits
  • removed duplicate folders
  • removed corrupted or unusable .dll files
  • defragged again

And all this bullshit took 3months; I had no idea I had so much data in my computer. Yeah, you try backing up that shit on several 700MB discs, on a slowwww performing machine.  Again, this is an almost 10yr old computer and it moves slower than a- a fucked up PC. Yes it’s laughable, that even grandmothers have newer tech than I do. (seriously miss my Alienware  laptop 😦 ) But in the face of defeat, I grin and bear it and do my best. And though the rest of the computer seemed fine and performed much better after all that maintenance, my browser still kept having titty-attacks.

Then I realized why…

Welcome To Firefox 4

You see kids, Firefox recently upgraded their software. And it’s built for newer computers because they figure hey, what kind of an idiot keeps such an old computer anyway?

*cough

What’s New In Firefox 4:

  1. Status Bar is no longer called the Status Bar. Hereon in it shall be known as the Add-On Bar, which nestles itself comfortably at the bottom of screen and you can X it off if you like
  2. FF4 now comes with a Sync button for all your devices
  3. the Private Browsing feature you can choose to keep on automatically at all times now. In fact, Privacy gets it’s own tab under Options now
  4. You can’t right-click (PC users only) and bookmark a tab. BUT, you can get that tab to do all kinds of nifty things, except bookmark the damn thing (we are now relegated to CTRL+D to bookmark a tab)
  5. Add-Ons do not display in a floating window anymore. Instead, it opens up in it’s own tab where you can alternate Plugins and Themes and Extensions right from there
  6. Another thing to do within Addons: Look up newer addons instead of going thru the trouble of opening up the Firefox website in another window (see image below)
  7. *Updated: Bookmarks can’t dock to the left. All bookmarks can only be edited if you click Organize Bookmarks. Also, you cannot bookmarks a particular tab by right-clicking on it, but hey, you can do all sorts of other things on it. That is called useless.
  8. the browser’s memory cache is automatically set at 512,000MB

Firefox 4 Addons manager and Addons Bar

I like to see my extensions on my Add-Ons Bar simply because I like easy access. Like my No-Script extension, which I’m always customizing per website becaues I’m a neurotic girl. So I right-clicked between my icons on the Navigation Toolbar (the bar that holds the address bar where you type in website addresses) clicked on Customize, and dragged & dropped whatever extension icons I wanted right onto my Add-Ons Bar you see docked at the bottom of Firefox there.

Firefox 4 And Memory Leaks

Unfortunately memory leaks have long been a disputed issue in the Firefox web browser.  You should know that Firefox is awesome for it’s customizable ability, yet it’s the same reason it uses up so much memory.

Adding more shit slows it down. (duh!)

Notice the other web browsers are far more simple and have less addons to contend with.

Firefox 4 HAS been optimized since it’s predecessor, but some of the previous problems still persist. Here’s some things you need to know…

List of things that make Firefox leak memory:

  1. Plugins. Either you run into a webpage that asks you to install one just to see a video clip, or you install some new software that sneaks their own plugin onto your default web browser with/ without your consent. Like herpes, once you catch it, it’s in your system forever. You virtually cannot uninstall plugins; you would need to hack into the mainframe of the source code like some kind of hacker code monkey- and I don’t recommend this either. Sometimes a plugin has an Uninstall button, if you’re lucky. Most cases you can only click the Disable button on those plugins, but for others you are SOL! So adhere to my golden rule on plugins: DON’T NEED IT, DON’T INSTALL IT.
  2. You may have to delete addons one-by-one to see which is sucking up memory like crazy.
  3. Old Extensions/ old Themes/ old Plugins. In Firefox 4, you can set your AddOns to automatically update or search for newer versions. I highly recommend this as older versions may have bugs. Some of those bugs entail leaking memory and exhausting your CPU to the max.
  4. Keep Extensions Disabled until you actually use them. It’s like keeping your computer on all the time and wondering why your electric bill keeps rising. Duh! For example, I use the Firebug extension but keep it disabled until the moment I am ready to use it at all.
  5. Browser Memory Cache settings. I mentioned this above and this is actually what has been fucking up my computer for some time now. Firefox 4 has the memory value set real high by default because it assumes we all have fancy updated computers that will use up this much memory. Firefox is already an undisputed memory hog as is some of it’s addons.
  6. Delete Your Firefox Profile. This should be reserved as a last resort. You back up your bookmarks’ JSON file and also Export HTML of bookmarks. You remember which addons you had. You delete that Firefox profile and start with a fresh new one, then import everything back into it, one by one.

How To Fix the Memory In Firefox 4

DON’T PANIC. Ok.

And before we even think about making permanent changes, let’s make simple ones 1st, shall we?

Open Firefox In Safe Mode

  1. Open up Firefox in (Safe Mode) by > Help > Restart with Addons Disabled > and it gives you choice boxes. You can check these boxes then >Make Changes and Restart BUT, if you do this it becomes permanent.
  2. If instead you choose to > Continue In Safe Mode then you get Firefox with no activated addons and all user preferences will be set at default options. Once you exit Firefox it’s not a permanent change.
  3. Next time you open it up, it’ll be same way you left it. Unless it repeatedly opens up in Safe Mode, in which case Firefox could be stuck. But that’s a rarity.

You want to open in Safe Mode to see how smooth Firefox runs without all the addons activated, and that smoothness means your addons are most likely the root cause slowing down FF4. If while in Safe Mode and still experiencing memory drain and your CPU is overtaxed,

A) you may need to start removing some addons until you find the one causing the leak,

B) or  you may need to reset your Firefox memory cache.

OR, your settings are too high. In which case,

Clearing The Memory Cache In Firefox 4

I was gonna post this info, but fuck it cuz here’s the bestest shortest tutorial I’ve found on the subject. (super easy!) I actually set mine from 1024 (1024KB = 1MB) to something far less with improved results. It’s trial and error so you’ll have to tweak it to fit your particular computer’s needs.

After you make your changes and restart Firefox, it should run smoother. If not, then we need to make bigger changes.

So let’s change, shall we?

Change Settings In Firefox 4 To Optimize Memory

What you really need to know is this:

If your computer was built before 2006 there’s a good chance it has anywhere between 128-512MB of RAM  THEREFORE the value integer must be set to 5000. If it was built after 2006, most likely it has 512MB-1GB of RAM so you reset the integer value at 10,000 or 15,000. If you have 1GB-4GB of RAM or even more, you can set it at 15,000 or leave it at the default value of 512,000.* Scroll down to see how you can find info on your memory card.

*I believe this was the default value when I fist saw it; either 512 or 521.

Now this is gonna take some brainwork. Not too much though, so just keep your pants on sally!

Step 1: Ok, open up an blank tab by hitting that plus sign next to any current tab, then type about:config in the address bar.

Step 2: Click the button that says “I’ll be careful, I promise

Step 3:  See that list in front of you? We are gonna add another to that list. Right-click anywhere on that list > it’ll open a mini-menu asking New > Integer > Enter Preference Name  (type browser.cache.memory.capacity) and OK it> New Integer Value > and you type in -1 for the value and that’s it. Done.

Step 4: While we’re there, make sure that browser.cache.disk.enable is set to false by typing it into that search bar. It’ll appear on the list and just double click on it to change it.

Step 5: And that browser.cache.memory.enable is set to true.

Step 6: Close out all Firefox windows and tabs. Restart and it should now load much faster. To check current memory cache, open a new blank tab, type about:cache in the address bar and check it out.

Ok, all of this should’ve fixed the problems by now. Now it is entirely possible your computer never had enough RAM to begin with. To check your memory card requirements, download Speccy and use it, or refer to your owner’s manual or whatever manual contains your computer’s factory installation specs. Good luck and enjoy faster browsing!

*Updated: Apparently Firefox 5 came out a few days ago. I’ll keep you informed as to upgraded changes.

Also, check out this sweet screenshot of where this post ranks in Google’s index:

page 3 google rank for supermunk

page 3 google rank for supermunk

For Mozilla’s recommended settings, see http://kb.mozillazine.org/Browser.cache.memory.capacity

Check Edit HTML Code with Firebug

Are you an HTML moron like me? Read on!

I don’t have $$$ or TIME to sign up for 3 semesters of courses in HTML, CSS, C +++ (do they still teach that?), PHP, Pearl, Ruby On Rails, and all other shit most of you ain’t ever heard of!

I’m also  NOT a software developer, computer programmer, nor an I.T. geek or anything of the sort. I most certainly DO NOT HAVE TIME TO CODE FROM SCRATCH! I am, an artist. One who spends countless hours on just one drawing. I’d much rather put my focus on that than spend countless hours sitting on my fat ass figuring this crap out.

No smarts/no time to learn/ no time to create or install source code by hand/ no $$$ to hire a professional to edit my webpages. What is a broke-ass moron to do?

Answer: Firebug.

What is Firebug for $200.00? (no really, gimme the money- cuz I’m all gangsta!) (wait, no I’m not)

Firebug is anothe nifty downloadable Firefox extension.

So yes, you can only use Firebug within the Firefox web browser. And I will be using the full version for Firefox as I tell you all about it.

However, you can download Firebug Lite for Internet Explorer, Safari, Opera, or any other web browser.

How Complicated Is It To Use Firebug?

Can you modify your MySpace page? Can you cut & paste embedded codes for things like YouTube videos? Can you change your blog’s template? Do you know where CSS code and HTML starts and ends? If you said yes to any of them, then you will have very little difficulty using Firebug.

Where to get Firebug

Three trustworthy places:

  1. Firebug website
  2. Cnet downloads page and type in Firebug in the search bar; select Mac or Windows to the right of it
  3. Mozilla Firefox Add-Ons page and type Firebug in the search bar

I’m sure you can find it elsewhere but best to go to the source and not some shady spammy website whose servers are outside the country. If you don’t wanna listen to my sage advice, oh well, you’re on your own!

Install Firebug

So! Download it> Save To Computer when it asks you> run an anti-virus check on it’s folder before opening (for good measure) >  install it. Go ahead, I will patiently wait. On the ceramic throne, so TAKE YOUR TIME!

Welcome back! Ok, so now it’s on your Firefox. Good. It should look something like this:

See the Firebug Icon?
See the Firebug Icon?

The Firebug Icon looks like a little cucaracha and it’s placed on the Status Bar (along bottom of browser). In case you don’t have the Status Bar showing, go to the top of your Firefox browser, go into View and select Status Bar. Make sure it’s checked on.

You can also switch it on/ off by clicking on the Firebug icon:

This window shows up when you scroll over Firebug icon
This window shows up when you scroll over Firebug icon

Firebug Menu Options

And guess what? If you right-click over the icon and it will bring up a menu of the following options. (for Mac users: hold down Ctrl button and click) But please take your time and read it through first before jumping the gun…

  • Open Firebug in New Window
  • Clear Console
  • Enable All Panels
  • Disable All Panels
  • Off for All Web Pages
  • On for All Web Pages

This is what that menu looks like:

Things I should mention first before going ahead

Firebug has ‘options on top of options’ and endless features. So I’m gonna tell you what you need and where to look so you don’t get lost in the mix.

Now pay attention, son!

Firebug opens up into two panels that automatically docks itself onto the bottom of your browser’s screen- in this case it’s Firefox. (it’s what I’m using) Some people may not like this option because it splits your screen in two and that could be visually annoying.

You can actually pull off Firebug and let it float anywhere on your desktop by clicking on the red button on the top far right. Here is an example:

How to undock Firebug from Firefox
How to undock Firebug from Firefox

And you click on that red button I circled and voilá! Firebug is floating as it’s own window on your screen. To reset it, click on the Firebug icon twice from the Status Bar.

To Enable Firebug

Now the Firebug icon will be installed but may show up in black & white. To check, go into the browser’s Tools at the top and Firebug should be listed there on dropdown menu. A  B/W icon means that while Firebug is indeed loaded on your computer, that it has not yet been enabled for all the panels.

To enable, right-click on the Firebug icon and select Enable All Panels. After you’re done it should look like this:

The Firebug cucaracha is now in color!

You can choose only one panel too. It’s just preference.

Another thing I should mention is that you can set it so that Firebug doesn’t show up in all pages and just your own. This is because in Firefox, you can have multiple tabs open simultaneoulsy of diff. websites.

Right-click over the icon and select On for All Web Pages or Off for All Web Pages. And that’s it.

What does Firebug look like?

We gotta put it over a website first to try it out. Let’s use Google.com for this exercise. And for those who don’t know, this is what the  Google search engine looks like:

And Google with Firebug activated looks a  little something like this:

See what I mean about ‘docking itself to the bottom’ ? Booyah-shaka.

I don’t want to confuse you but I manually highlited that piece of code. (it turns grey) It doesn’t show up colored on it’s own.

Anyway, let’s survey all the bells & whistles on this thing shall we?

  • Top Navigation Bar: Has all Firebug options (like increasing text size), Inspect Elements icon, Console, HTML, CSS, Script, DOM,  Net and it’s very own search bar
  • Left pane: All source code is displayed here.
  • Righ pane: All the Style and Layout information. So you won’t have to scroll thru all that code jargon just to find the style font or text size, for example. Don’t ask me what DOM is, I have no freaking clue. 😛

What I Use Firebug For

To be honest, the most frequent features I use is the HTML inspector and the Layout to show me sizes & padding.

When I check out other people’s blogs, I sometimes see a cool script and wonder what the name of it is, and where I can grab it? Firebug helps me see the code for it, so sometimes the author’s name is listed in there and I can just look it up.

Before Firebug, I had to look at endless source code to know how to format my own sites (I have a few blogs, not just the SuperMunk). It hurts the eyes to scroll through all that jargon. The more flash/ widgets/ tables/ galleries on your site, the more jargon you will see. It’s especially worse to read when the author of that source code left it looking like a miserable mess.  The kind of HTML/ CSS mess you type up in Notepad in one long consecutive line, or several broken spaces so you can’t figure out what goes where! Frustrating to the hilt 😛

I mentioned before I’m not some I.T. geek, and never took classes for this. I’m also short on time. Honestly, I’d rather be painfully waxing my legs than sitting in front of my screen for several hours reading a big fat mess.

But I do understand the importance of having a fully functioning site with useful scripts, so getting my hands on good code is essential. And not just that, but Firebug helps me see where I screwed up my own code and how it’ll look in a preview before making permanent changes to my own site.  Super helpful tool, it is!

Using Firebug To Make Changes

I will show you how to do this. First, let’s bring up that Google image once again:

The grey code I highlighted  pertains to the Google logo. It’s embedded on as an image file called nav_logo6.png.

As an experiment, we’re gonna mess with this Google’s front page. I am gonna change the blah white background color to a cranberry color.

To change the background color we change the hexachromal values  from white (#ffffff) to our cranberry color.

But SuperMunk, how am I supposed to know what that means? WTH?

Ok you impatient-Ishmael! Pay attention now. In cyberspace, all colors are assigned number values called hexachrome values made up of multiple digits/ letters. The color white happens to be #ffffff , see? We can take shortcuts here because no one in their right mind has these color values memorized. Don’t worry, no one’s gonna judge you!

For my shortcut, I use a helpful website called ColorPicker and it looks a little like this:

And that’s the value we’re going to use. Good ol’ #DD4571 .

So we actually just click on the background value in Firebug. Yes, it lets you change it from there. Just click on it and you’ll see, like so!

From white to cranberry, we change #ffffff to #dd4571 . It’s not case sensitive so don’t worry.

And behold! Here’s how it looks afterwards!

Isn’t that all peaches or what!

Wanna try something else?

How about erasing that Google image? We just have to go into Firebug and delete that grey highlighted code:

For any images on a website, Firebug will display a bite-sized preview of that image along with it’s pixel size. You can see that for this Google image above overlapping the grey code. When you have Firebug activated and you scroll over any websites, elements get automatically highlighted in blue. I scrolled over the Google image and it turned blue as you can see.

So I right-clicked over the code and chose Delete Element, and guess what happened?

Something you need to know is that while you see changes occur in real-time, Firebug itself cannot actually change an actual website’s code. That’s something you need to log into the actual website’s template to do. Firebug can show you previews of changes in real-time you are able to make, but doesn’t keep them.

Don’t get discouraged though! Keep reading and I’ll show you how to get around this❁

Selecting Elements On A Website With Firebug

I refreshed the Google page so it didn’t save the cranberry color and went back to boring ol’ white. It also brought back the image. But we can change it to a chartreuse color! (yellow-greenish) The reason for this, is so you can see the blue outline of the elements stand out as we put our cursor over them.

To be able to select elements:

  1. Click on the Firebug cucaracha icon like the picture above. (the icon on the left-hand side on the Navigation Bar, not the icon on the Status Bar)
  2. Click on the Elements icon. It’s the rectangle with the blue arrow on it. It’s placed to the left of the cucaracha. Ok, I circled it in black, just like in the above picture!
  3. Now you can click on HTML or CSS or anything on the Navigation Bar. Personally I want to see the HTML code so that’s what I selected

See? I passed my cursor over the image and it highlighted in blue. Simultaneously, it’s source code also highlighted in blue as you can see in the left pane of Firebug.

But now, hold the phone…what if this was your site and you messed with it’s look and now you want to actually make permanent changes?

Editing With Firebug

Like I said, Firebug can only show you previews of changes. It can make actual changes for you but not save them. Any changes revert to previous state upon page refresh. Because Firebug works alongside web browsers, not websites. So to say Firebug edits is a sort of misnomer in itself.

So SuperMunk, how the hell am I gonna set my changes now? I just finished tweaking my page for the last hour or so!

Don’t cry! Dry your eyes! For SuperMunk has your solution…☻

All you have to do is export those changes into an editor program, and you can save changes there instead for uploading later to your site.

Such editing programs to use: Notepad, Wordpad, Microsoft Word, or any text editor. Personally I use Notepad ++. It’s freeware, and helpfully sets each line of code in it’s own line space, so you don’t end up with a big fat mess like I mentioned earlier.

So after all your tweaking…

Click on the Firebug icon on the Nav Bar > Open With Editor > Configure Editor.

Now Configure Editor is your only visible option if you haven’t already set which editor to use. So let’s configure right now, shall we?

  • Under Name: You can call it whatever you want. Even some silly sounding gibberish.
  • Under Executable: Click the Browse… button and pick an editing program from your computer.
  • Click the Ok button when you’re done. That’s it. You’re done with that.

Did it work? Let’s find out…

So if I click on Notepad ++ there, it automatically pulls all the source code from whatever website I’m looking at right into my Notepad ++ editor. It will look like this:

And that’s all she wrote! So go ahead and edit what you’ve got now. Save a copy to your computer and upload to your website or blog. Done.

So that’s pretty much it.

I should mention it’s in bad form to just swipe code that someone worked very hard to make from scratch. Some folks give their scripts away; some don’t. Permission sets are usually written into the codes so you will see it in Firebug. Always ask or only use what’s for free. There are ways to find out if someone ripped your code so I suggest you not become an asshat that steals. Remember that everything in cyberspace leaves a trail right back to you. Major search engines can penalize you for this (will talk about it in another post) so I wouldn’t try it for anything other than educational purposes.

Know right now that any template adjustments you will ever make all take their sweet time, but this tutorial I just gave only means to cut that time short for you. Also, even if you’re a N00B, don’t sweat it.  The beauty of it is that you can fuck up all the changes you make, see it in real-time and undo over & over by clicking on the icon. Amazing.

Play with all the features on Firebug all you want. There are video tutorials on YouTube also. Have fun and lemme know how it goes!