Guide to: Installing Firebug in Major Browsers and iOS Devices

Firebug

Firebug is a Firefox add-on with cool tools to inspect web page element, debug and develop web pages. There is however no way you can have these tools on other web browsers apart from Firefox.

Firebug

Development of a similar tool for other browsers may take hard work, but it will be of great help if you could get Firebug to work on other browsers too, considering that everyone has their preferred browsers.

Well, here is where Firebug Lite comes in to solve your needs. Firebug Lite is a simpler version of Firebug but it can be used on IE, Opera, Chrome, Safari, iPad and iPhone while retaining similar options and features.

Installing Firebug Lite on Opera, Safari & Chrome

With Firebug Lite, there isn’t any installation necessary. Written in Java Script, you can bookmark a Firebug Lite link and it will be ready for page inspection. So what you need to do is to simply bookmark the link below (you can also drag the link to your browser’s bookmark bar).

Firebug Lite

If you are using Chrome browser, the bookmark should appear as below, if your bookmark bar is visible.

Firebug Bookmark

That’s it, your Firebug Lite should now work when you need to use it.

Using Firebug Lite on Opera, Safari & Chrome

Now you can use Firebug Lite to inspect practically any web page. For this example, we will use Wikipedia.org.

When the web page is loaded, click on the Firebug Lite bookmark you saved earlier and you will see a consol box appear at the bottom of the web page.

Firebug Consol

If we close up, this is what you will see on the bottom left of the page.

Firebug Consol Closeup

Now you can see the (+) and the (-) at the starting point of many lines. The (+) means there are more lines closed under the one-liner of html, and if you highlight the line, you will see which part of the page it represents.

Highlighted lines

But if you want to make it easier to spot the lines represented by any text, photo, link or any other elements on the web page itself, click on the ‘Inspect’ button.

Inspect

Now you can hover your mouse cursor to any part of the elements available on the web page, and you will see the html line highlighted. This makes it easier for you to do some inspection.

Inspect Highlighted

Installing Firebug Lite on iPad & iPhone

Bookmarklets doesn’t really go well with iPad and iPhone. To have Firebug Lite installed on iPad and iPhone, here’s how:

  1. Bookmark this page on your iPad or iPhone.

    Firebug Bookmark iPad

  2. Rename the bookmark to “Firebug”.

    Firebug Bookmark Rename

  3. Select and copy all the script below.

    javascript:(function(F,i,r,e,b,u,g,L,I,T,E){if(F.getElementById(b))return;E=F[i+'NS']&&F.documentElement.namespaceURI;E=E?F[i+'NS'](E,'script'):F[i]('script');E[r]('id',b);E[r]('src',I+g+T);E[r](b,u);(F[e]('head')[0]||F[e]('body')[0]).appendChild(E);E=new%20Image;E[r]('src',I+L);})(document,'createElement','setAttribute','getElementsByTagName','FirebugLite','4','firebug-lite.js','releases/lite/latest/skin/xp/sprite.png','https://getfirebug.com/','#startOpened');
  4. Go to bookmark option and press “Edit”. Then select “Firebug” bookmark.

    Firebug Bookmark Edit

  5. Remove the original URL and paste the bookmarklet.

    Firebug Bookmark Paste

  6. Choose “Done” on your keyboard.

Now, try to open any website and select “Firebug” bookmark and you’ll see a functioning Firebug at the bottom of your iPad screen.

Firebug Bookmark Paste

Conclusion

Firebug Lite is by far good enough to do quick page inspection. You can view html, css and any script used to build the webpage. Although Chrome has its own Web Developer extension, Firebug Lite does not disappoint by a mile.

Chrome on iOS is sluggish, but at least it syncs

Chrome for iOS - icon

Chrome for iOS - icon

During day two of the Google I/O conference the company moved away from the topics of Google Glass and Android to talk about its Chrome web browser and related web technologies. The Chrome web browser stole the show with the announcement that an iOS version would be available for the iPhone and iPad. There were also smaller reveals, such as the fact that Chromebooks would be sold at Best Buy, but those released much less fanfare than the notion of the speedy Chrome browser on Apple’s mobile hardware.

Chrome on landing in the App Store is a big deal. Unfortunately, Apple has instituted some restrictions that handily prevent mobile Safari from being dethroned

With that said, Chrome on iOS is an interesting development and it does bring several neat features to Apple’s mobile users. The most noticeable benefit is gaining access to Google’s Chrome interface. The user interface features a single text input bar for URL and search entries, and tabs listed above the URL bar (with gesture support for tab switching). The Google browser also includes a private browsing mode — called Incognito — that is much easier to find (and use) versus Safari which hides the feature in the Settings application.

Google's Chrome web browser running on an Apple iPhone.Being Chrome, it is able to access and sync browser bookmarks and saved passwords from Chrome browsers on other systems when logged in with your Google ID. Another new feature allows you to see the websites open on your other Chrome instances — on desktop or other mobile platforms — and open them in the Chrome browser on your iPhone or iPad (or the other way around). Users are also reporting that Chrome is able to open more tabs at a time than Safari, which limits you to 8 open browser tabs.

Although Chrome on iOS has several useful features, in the end it is mostly mobile Safari with a new skin. The back-end and underlying web page rendering code is the same WebKit libraries that Safari uses. You will not find Google’s customized “V8” rendering engine — which the desktop version of the browser uses to improve JavaScript performance. To make matters worse, while Safari is allowed to use Apple’s “Nitro” JavaScript engine to speed up page load times and web application performance, Chrome is prohibited from accessing the Nitro libraries (as are all third party browsers).

This means that Apple’s Safari browser will have a large advantage when it comes to performance. Initial benchmarks comparing performance (JavaScript and page load times) between the two browsers do seem to support that statement — with Safari displaying significantly better benchmark results and, in some cases, slightly decreased page load times. Taking away the tweaked V8 JavaScript engine and Google’s other WebKit touchups is a big disadvantage. Granted, this may be somewhat mitigated by Chrome’s ability to pre-fetch web pages, but it is still not good news for the iOS version.

The other major barrier to Chrome overtaking Safari on iOS is that Apple does not allow the competition to be set as the default browser. Any web links given to you in email, messaging, or other applications will continue to open with the native Safari browser.

Chrome on iOS does start to seem like a fruitless venture (pun intended) when presented with the disadvantages (and once the glamor and allure of a new browser wears off). At the same time, Chrome does have an edge in usability — especially if you use Chrome exclusively on your other systems — and it is a foothold into the Apple customer base. It may not win any performance awards (yet), but it does get the Google Chrome name out there in front of potentially millions of people as an alternative to Safari. It will likely be downloaded by quite a few people (at least 2,980 people have rated it so far), who might then check out Chrome on the desktop, on their MacBook, and so on.

Is Chrome on iOS a “Safari Killer?” Probably not, but it will be a successful product all the same.

Chrome for iOS (App Store)

How to Read .ePub Ebooks on Firefox and Chrome [Quicktip]

ePub Firefox

ePub is an open standard format for ebooks, a format used to publish electronic books, magazines and newspapers. The difference between an ePub format file with a normal doc file is its reflowability to suit the many display dimensions of mobile devices i.e. tablets, smartphones etc. It was created to be flexible with font size and text layout, allowing you to read the same material on any mobile device that you may own.

However, it is not possible to open files with *.ePub extensions on your browsers, even though you can do that with *.pdf and *.doc (opened with Google Docs) files. To open *.ePub formatted files, you need an ebook-reader application like those available on tablets like the iPad, or e-readers like the Kindle or Nook. With more and more publishers switching to producing their ebooks in .ePub versions, you may think that the only way you can keep your reading habits up is to get yourself an e-reader or tablet. Hold that thought.

In this quick tip, we are going to share with you how you can open *.ePub files on your browser with EPUBReader on Firefox and MagicScroll on Chrome. These extensions are made as a minimalist ebook reader that will allow you to browse through ebooks directly from these two browsers.

EPUBReader for Firefox

if you are using Firefox, get to the EPUBReader extension page and click the green button ‘Add to Firefox’ to install EPUBReader.

ePub Firefox

When installation is complete, you will see an additional button appear at the top right corner of your Firefox browser, click the button to launch EPUBReader.

FireFox epub reader

You will then be redirected to your reader page where you will find lots of ebook collections that are available from archive.org and feedbook.com for free.

epub firefox

If you want to download an ebook with an .epub extension from the Internet, EPUBReader will automatically load the ebook for you.

fireforx ebook reader

MagicScroll For Chrome

To start reading ebook from your Chrome browser, go to the MagicScroll extension page and click on ‘Add to Chrome’ to install.

epub chrome

Once installed, you can open a new tab and go to this web address:

MagicScroll.net

When the page is loaded, you will see your ebook library. To add new ebook to your library, click on ‘Add a Book to Your Library’.

magicscroll chrome

Now you will be given options to import the ebook from your computer, or provide the link to an ebook source if you want to add them from the Internet.

chrome add ebook

Once added, all ebooks will be accessible from your library.

chrome ebook library

To read an ebook, click on any available ebook cover from your library.

chrome ebook reader

Using MagicScroll on Chrome makes you feel like you are reading on an e-reader. There are 4 menu buttons available at the top left corner of each book page. They will bring you to the library main page, table of contents, options to change font size and theme colors as well as option to download the ebook locally onto your computer.

Conclusion

With these two extensions for FireFox and Chrome, you can now read ebooks from the convenience of your browsers even when you are offline, and there is no need to get an e-reader or tablet, or install external applications for ebook.

20 Awesome “Battle of the Browsers” Artworks

web browser artworks

There was a time when Internet Explorer defeated Netscape and became the most famous (or most used) Internet browser in the world. Well, you know what happened next, basically IE screwed up, letting righteous Mozilla Firefox take over (easily) as reigning champ. Then, Google Chrome joined the war, became a tough contender and swiftly dethroned Firefox.

web browser artworks
(Image Source: foice)

The war amongst the browsers is so famous that, users, who evidently have their own favorite browser in mind, have translated their thoughts about this epic war of the browsers into artforms. Here, we are showcasing 20 creative (and some amusing) artworks that depict the never-ending battle between the mighty browsers. Note: All of the artworks below do not express or represent any viewpoint or favouritism of any particular Internet browser.

Browseristas. Each browser has its own beautiful aura. Note the use of the colors to represent the browsers. (Image Source: eskimoie)

browseristas

Browser Battle. Only one will walk out the arena! And its the users who will decide the battle result. (Image Source: Konayashi)

browser battle

Browsers’ Battle. Google Chrome basically shocked the world when it slammed into the browser war so suddenly, just like what this artwork is trying to show. (Image Source: NYTimes)

browsers battle

Browser Trio. Long long time ago, there were 3 legendary browser dragons named Firefox, Internet Explorer and Chrome, who fought against each other to bring balance to the online realm. Genuine one, DragonarySilver. (Image Source: DragonarySilver)

browser trio

Browser Wars. Shoze is drawing what I currently see. I was once an Internet Explorer’s fan, you know. (Image Source: shoze)

browser wars

Firefox Fights Internet Explorer. If IE’s icon is as cool as what Derlaine8 drew below, it would have gained back some of its lost users! (Image Source: Derlaine8)

firefox fights internet explorer

Firefox vs Internet Explorer. With the rise of Internet Explorer 10, the winner of the battle is yet to be seen. But let’s not forget Google Chrome. (Image Source: Greg Bakes)

firefox vs internet explorer

Firefox vs Chrome. Painted by foice, this awesome artwork showed the truth – for now it’s really just a war between the firey fox and A.I. Chrome. (Image Source: foice)

firefox vs chrome

Firefox vs Google Chrome. Each has their own advantages, but only the one who focuses the most on users will win! (Image Source: crazyrems)

firefox vs google chrome

Fssss. Cool and expressive! Google Chrome is a ticking timebomb that makes IE look over its shoulders all the time. (Image Source: oneblog)

fssss

IE6 Denial Message. The odd one out. Every web designer knows that IE6 is such a bad boy, but for me IE7 somehow inherited its problematic genes. (Image Source: John Martz)

ie6 denial message

If Browsers Were Guns. Hey, I wonder which gun represents Internet Explorer? (Image Source: 9GAG)

if browsers were guns

If Browsers were Cats with Guns. When all else fails, use cats to deliver your message. (Image Source: Hill Top IT)

if browsers were cats with guns

If Browsers Were Celebrities. I agree with the opinion regarding Chrome, although Chrome’s more like Morgan Freeman to me! (Image Source: Walyou)

if browsers were celebrities

If Browsers Were Superheroes. Firefox is strong, Chrome is fast, don’t you agree? (Image Source: C-Section Comics)

if browsers were superheroes

If Browsers Were Transports. An honest review by CollegeHumor, ’nuff said! (Image Source: CollegeHumor)

if browsers were transports

Internet. This was what every web designer said to me, until Google Chrome joined the race. (Image Source: Haikera-Baiketsu)

internet

Internet Explorer’s 15th Birthday. Am I the only one who thought the HTML 5 gift is little bit sarcastic? (Image Source: Gizmodo)

internet explorer's 15th birthday

Mobile Browser Wars. How about a game of mobile browser wars! Judging by the interface, it should be fun! (Image Source: MobilityWire)

mobile browser wars

Which Web Browser Do You Like. I think I like all browsers then. (Image Source: You-Ta)

which web browser do you like

Reflection

Just like the mobile war between iOS, Android and Windows OS, the browser war would not yield a clear winner for as long as their creators continue to forge improvements for their users. I think this competition is really healthy, as in the end it’s the users who get to enjoy all the benefits. This is also a good lesson for designers and developers, that user-focused features and user experience are what truly matters.

I personally favor Google Chrome for its speed and clean interface! What’s your current favorite browser? Sound off at the comments section below.

How to Optimize Firefox for Better Performance

firefox optimization

Your web browser of choice is truly the gateway into accessing the global Internet. The web has been growing exponentially, and we have seen tremendous changes to browsing software as well. Mozilla has been keeping up well considering the recent release of Firefox 10 which has seen mostly positive review.

firefox optimization

But as we all know, your web browser tends to slow down over time with repeated use. Firefox is not immune to this, but there are some tweaks you can use to optimize the browsing experience. The key values we’re looking for include startup speed, reduced load times, and accessible web pages. Check out some of my tips in the guide below if you’re looking to enhance the Firefox experience!

Quick Shortcut Commands

A good place to start is with a few handy keyboard shortcuts. These can be difficult to memorize at first, but over repeated use you’ll begin to adopt the routine. And I feel there’s no better way to speed up your web browsing experience than mastering a few shortcut keys.

Only a couple examples may seem relevant to your needs. We don’t all require the same knowledge and so one command may be totally pointless to somebody else. If you check through Google you’ll likely find very helpful articles for the more common shortcuts.

1. Clear Private Data

Security is of the utmost importance to consider whenever you’re surfing the web. Even by today’s standards things are a lot less risky than 5 or 10 years ago. But you should understand how private browsing data is stored and what you can do to clear your info.

Firefox shortcut command for clearing history and private data

This short menu which pops up is a condensed version of the settings panel. You can choose how far back in time to clear out along with specific types of data such as cookies, cached pages, active login sessions, etc. I recommend that you clear everything within the list every time you close down the browser window. This is only my personal preference to keep my data secure – but of course you should adopt some form of routine cleanup which works best for you.

Shortcut – Ctrl + Shift + Delete

2. Add-Ons Toolbar

The Firefox add-ons menu is a small toolbar which appears at the bottom of your Firefox window. From here you can access add-on commands and menus which are normally reserved from within the regular plug-ins area.

This may be one of the lesser-known shortcuts but does come in handy frequently. If you like to keep your browser slim with reduced add-ons then this may pose as a bit uninteresting. And I have to agree that fewer 3rd-party extensions means much quicker browser performance. Just keep this in mind as you’re testing out new add-ons from time to time.

Shortcut – Ctrl + /

3. Open Downloads Window

There have been numerous instances using Firefox where I’ve been downloading files and accidentally clicked out of the downloads window. It’s a harmless gesture, though it can be a pain to find your menu again. This command brings up not just your active downloads but also recent history of previous files – very handy when you forget which folder you saved into!

Shortcut – Ctrl+J

Note: For Mac users, replace Ctrl with Command.

Increase Local Cache Storage

When Firefox saves a cached version of website content it reduces any future requests needed for re-downloading code. By default you can only max out to 1GB of saved cache from the web. But this is likely such a small amount compared to your overall disk space, it’s well worth the effort to update your cache sizes.

I recall Firefox 8.0 had local cache storage at 256MB by default. Honestly this is a fair amount of room, especially if you’re clearing out private data at the end of each session. Yet if you browse for hours at a time each repeat website visit will accumulate possibly 10-15 minutes of saved load screens.

Mac OSX Firefox preferences menu

In the top menu open Tools -> Options or Firefox -> Preferences... on Mac and click on the Advanced Tab. Somewhere in the middle of this menu you’ll see “Limit cache to” along with a number input. I’ve chosen 1024MB which happens to be the maximum allowed. Simply hit OK and restart the browser for this to take effect.

Popular yet Minimalist Add-Ons

It’s a good idea to keep wary of installing too many extensions into Firefox. The browser will begin to lag fairly quickly if you neglect to disable unused add-ons, but luckily it’s also an easy process to remove them. Below are a couple of the most popular user-voted add-ons which won’t interfere with your speed or page performance.

1. Download Status Bar

In particular this is a very helpful addon I’ve come to love since first installing. The download statusbar is not obtrusive or even displayed in any way until you download a file. Instead of having a new window appear you get a neat toolbar at the very bottom of your browser window.

Download Statusbar Firefox add-on screenshot

From this you can check the total file size and amount remaining, along with an estimate of time remaining for the download to complete. You can single-click on a file to pause and even remove items from the queue. My process of downloading files has become more streamlined than ever now that I’m not dealing with a new window for my items list. If you haven’t tried this out yet I highly recommend giving it a shot!

2. WOT – Check Trustworthy Websites

The funky plug-in with a weird name actually has taken me by surprise! As the title says: WOT – Know Which Websites to Trust provides a rating for every website you visit. These are backed by users of the software who have given rankings to sites all over the Internet.

WOT menu screenshot from Mozilla's home page

Many users feel this has little-to-no purpose since you can gauge the legitimacy of a website within the first few seconds of landing. Definitely true, but I do frequently cycle through random websites found in social network communities like StumbleUpon. In this scenario I feel WOT hasn’t provided any first step security, but it does help me build credibility and trust for domains I run into through differing sources.

3. Element Hiding Helper for ABP

Most Firefox users are familiar with Adblock Plus which has proven time and again as a sure-fire ads remover. From this core a developer Wladimir Palant from ABP released an extension called Element Hiding Helper. Now you can target any specific page element and choose to block it regardless of the internal content.

This is perfect for when you don’t want to block all advertisements on a website but you need to remove 1 or 2 of them for whatever reason. Often times video websites will have loud audio ads start playing out of nowhere – and this plug-in is the perfect remedy. You can choose to remove things other than advertisements, such as annoying JavaScript apps or specific HTML blocks within the page layout.

4. Speed Dial

This feature has become standard to users of the Opera browser and more recently has been picked up by Google Chrome. Yet the speed dial home page setup was never implemented into Firefox in any majorly functional way.

Firefox plug-in Speed Dial - official website

This plug-in gives you total control over which links appear where in the 9-box grid system. You have easy access to manipulate settings as well, such as default thumbnail height/width and a few keyboard shortcuts. Overall the software has a lot of support from the Mozilla userbase. If you want to learn more check out the official website for detailed features and release notes.

System Edits in about:config

Firefox users have the ability to edit internal variables within the software from the configuration area. Simply open a new tab, type about:config and hit enter. You’ll come to a warning page mentioning the dangers of blindly changing these settings. But we know what we’re doing, so just hit “I’ll be careful” and you’ll be directed to sorted table of values.

Firefox 8 about:config warning menu

Each of the values in the far left column are associated with a type of variable name. These control instances of how the software runs and performs in the background. I have just a few suggestions for reliable edits.

1. Increase pipelining

In the filter box at the top type in network.http.pipelining.maxrequests. This should limit your field to a single value row set at 4. We can increase this number to 8, which means Firefox can request data through 8 different channels rather than 4 – greatly decreasing your waiting time!

Once you edit this value above you’ll need to enable pipelining to see any major effects. Do a search for network.http.pipelining and the first value should be set to false by default. You want to change this to true by double-clicking on the table row.

2. Disable placeholder images

Sometimes when Firefox realizes a page is going to take a while to download it will apply placeholder images. This is to prevent page content from rendering improperly while waiting for the image data. It seems like a good idea in concept, and it does have value but I feel disabling this feature will keep the requested content organized.

In the filter box do a search for browser.display.show_image_placeholders which should be set as true. Double-click to change this to false and we should be all set.

3. Disable interface animations

While we’re removing unnecessary features let’s turn our attention to the browser UI. By default Firefox uses a small animation effect whenever you open or switch onto a new tab. It seems small at a glance but once you disable this you’ll be shocked at how much quicker you can move and create tabs. Just do a search for browser.tabs.animate and change the value to false.

4. Increase persistent connections

This variable is similar to pipelining except now we’re looking to open more connections on the server end. This is set much lower at first to keep Firefox downloading at a steady pace. But if you are downloading larger content such as streaming audio or video more persistent connections will mean more data collected at once.

In the filter box enter network.http.max-persistent-connections-per-server and you should find only one result. By default the value should be 6, but double-click and change to 8. Then hit okay and restart your browser for these effects to kick in!

Conclusion

With so many options in today’s browser market Firefox appears to be holding a steady place. Their engineers know how to build stable software as it has been a reliable brand for years.

With the endless number of plugins and extensions free to download there are solutions for practically any problem. I hope these tips can provide a solid foundation for optimizing your web browsing experience. If you have any other great ideas for speeding up Firefox please let us know in the discussion area.