Hasta La Gadget!

This article was written on January 26, 2007 by CyberNet.

My oh my how the time flies. It seems like only yesterday I was writing about the Firebug extension for Firefox and singing its praises about how much it helps out when working on websites. The time has come to move it out of Beta and into the hands of millions of people…watch out because Firebug 1.0 has been unleashed!

If you don’t design websites then this probably won’t be the most useful tool for you, but even if you just do some casual HTML coding here and there I am sure that you would find a use for it. It can do everything from monitor network activity to figure out what elements are taking forever and a day to load, as well as tweaking the layout so that everything looks exactly how you want it to…without even having to refresh the page after making a change.

Take a look at all the features it has to offer (click on any of the links for more information on that topic).

• Just the way you like it – Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.
• Inspect and edit HTML – Firebug makes it simple to find HTML elements buried deep in the page. Once you’ve found what you’re looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.
• Tweak CSS to perfection – Firebug’s CSS tabs tell you everything you need to know about the styles in your web pages, and if you don’t like what it’s telling you, you can make changes and see them take effect instantly.
• Visualize CSS metrics – When your CSS boxes aren’t lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.
• Monitor network activity – Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner’s servers taking a siesta? Firebug breaks it all down for you file-by-file.
• Debug and profile JavaScript – Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.
• Quickly find errors – When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.
• Explore the DOM – The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.
• Execute JavaScript on the fly – The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol’ fashioned command line for JavaScript complete with very modern amenities.
• Logging for JavaScript – Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

This isn’t exactly an extension that I use all of the time so I have placed it in a separate profile that I run Firefox with when testing out websites. I’ve got a few different extensions in that profile like ColorZilla for matching colors, MeasureIt to know exactly how big something is, and View Source Chart to make looking at source code a little easier. I never felt it necessary to install these extensions in my primary profile because I only used them once in awhile, so I created a separate profile and threw Firebug in there as well.

One of the things I use the most in Firebug is modifying the CSS file to get things to line up correctly. After you change something in the CSS file it will instantly be adjusted on the screen, which means debugging layout problems is a million times easier.

I can say from experience that doing any kind of Web development work without the right tools is like cutting a steak with a spoon…sure it can be done but it takes longer than it should.

Thanks to Natmaster for the tip!

Copyright © 2010 CyberNet | CyberNet Forum | Learn Firefox

Related Posts:

Opera 9.20 Sporting Some Developer Tools, TooFirebug: The Most Useful Firefox Extension For Web Developers!Firebug 1.5 Web Development Tool for Firefox ReleasedOpera Dragonfly Developer ToolsGoogle Finally Reaches Number 2 According To Alexa

This article was written on July 17, 2007 by CyberNet.

One feature that Firefox users typically miss when transitioning over to Opera is the "View Selection Source" option. In Firefox this is used to view the HTML source code of a specific area on the page. For example, let’s say that you are visiting our site and see a Google Video that you want to embed on your own site. In Firefox you could highlight that video (and maybe some of the surrounding text), right click on the area, and choose the View Selection Source option. Firefox would then display the source code of the page and highlight the code corresponding to the text/video you highlighted.

This is extremely useful to both developers and casual users because it can save you from sifting through thousands of lines of HTML code looking for one specific part. At times it can be like trying to find a needle in a haystack.

If you’re using Opera you’ve probably noticed that this feature doesn’t exist in the right-click menu. That doesn’t mean it can’t be done though! Web Kitchen put together a bookmarklet that you can use to display the source code of a selected area. All you have to do is open this page, copy the text, and paste it into the address field of a new bookmark. It should look like this:

Then anytime you want to use it just highlight some text on the page and click the bookmark. Alternatively you can place this in the right-click menu, but it will take a few additional steps. Information on doing that can be found here.

I was rather surprised at how well this worked, and it filled one of the few empty voids that Opera has. There are also some things that you can configure, such as the window height or width, since the source code opens in a popup window. Heck, you can even choose the color schemes that are used for the syntax highlighting!

Copyright © 2010 CyberNet | CyberNet Forum | Learn Firefox

Related Posts:

Opera Dragonfly = Developer Tools?Helpful Tip: How to Select Text Vertically in MS WordOpera Takes Home The Gold In The Browser Speed WarOpera Mini 4 – Free Mobile BrowserBuilt-In Opera Features That Firefox Needs Extensions For

This article was written on August 16, 2006 by CyberNet.

I forgot to mention a few weeks ago that John Haller from PortableApps.com had updated the Firefox Portable (that is the new name, it’s no longer known as Portable Firefox) to version 1.5.0.6. The update fixed the Windows Media Player bug that many people were experiencing troubles with.

If you are already running Firefox Portable 1.5.0.5 you are able to utilize the partial update system. You can initiate the update by going to the Help menu and selecting “Check For Updates.”

For a whole list of new features that Firefox Portable 1.5.0.5 brought checkout this post.

Copyright © 2010 CyberNet | CyberNet Forum | Learn Firefox

Related Posts:

Firefox 1.5.0.6 Release Candidates AvailableDownload Portable Firefox 1.5.0.5Download Portable Firefox 1.5.0.4Firefox 1.5.0.6 Will Be Released Sooner Than ExpectedDownload Portable Firefox 2.0 Beta 1

A wordy headline, to be sure, but a pleasing one nonetheless. We came across HTC’s Chinese web portal listing the Desire as coming with Android 2.2 (with Sense!) and simply had to ping the official source for confirmation. It turns out the info up there is no mistake: all HTC Android handsets shipping to China — which includes the Wildfire and Tianyi — will do so with Froyo preloaded, cutting down on your upgrade angst at least until the Gingerbread man comes a’knocking. HTC has also reiterated that a 2.2 update for its phones already on the market will be delivered “very soon,” so if all goes well, we should be looking at a Froyo-dominated August in the land of High Tech Computers.

[Thanks, Christian]

HTC will ship all Android phones in China with Froyo on board, fuels fire for immediate update closer to home originally appeared on Engadget on Thu, 29 Jul 2010 03:09:00 EDT. Please see our terms for use of feeds.

Permalink   |  HTC China  | Email this | Comments

LG’s official Application Store — not to be confused with an App Store, App World, or App Catalog — just went beta is 23 countries with the aim of serving up 4,000 apps to 33 countries (including the UK, Germany, France, Italy, and Spain) by the end of the year. Sorry US netizens, you’re seemingly out of luck for 2010. It launches with significantly less than 4,000 apps today (about 3,000) targeting LG feature and smartphones in countries that you, dear reader, likely don’t care about. Oh, did we tell you that it’s launching without any Android apps? Those won’t arrive until sometime later this year.

Continue reading LG’s Application Store launches in places you don’t live for devices you don’t care about

LG’s Application Store launches in places you don’t live for devices you don’t care about originally appeared on Engadget on Wed, 28 Jul 2010 05:10:00 EDT. Please see our terms for use of feeds.

Permalink   |   | Email this | Comments