WebDev3000 » Debugging

GTmetrix

Codrut Nistor — Tue, 11 May 2010 07:49:55 +0000

Remember Load Impact? It doesn’t really matter if you don’t, but if you do, you can forget about it! The reason is today’s topic, another free Web-based speed analyzer for your site. As you probably know, it’s official – Google is taking speed into account when awarding search rankings, so… you must know where’s your site spinning, right?

GTMetrix uses two analyzing engines from the big ones in the industry, namely Google Page Speed and Yahoo YSlow, providing enough information to know how’s your site moving when compared to the average values. All you have to do is enter the name of your site and press the “Go” button, but…

… only after you’ll get a free account you’ll gain access to all the goodies, including scheduling of daily/weekly/monthly automated checks, reporting capabilities, tests history and more. These being said… I have nothing more to add but the usual compatibility check part.

Comparability: all major browsers, including Chrome, Opera, IE8 and Firefox (please drop a comment below if you face any kind of problems with any Web browser, no matter how exotic it may be)

Load Impact

Codrut Nistor — Wed, 21 Apr 2010 18:55:05 +0000

As far as I can remember, we never talked about Load Impact and, to be honest, I can’t recall ever seeing this excellent resource… until now. Since I happened to bump into such a useful tool, I thought you also have to know a few things about it, because every site owner or Web developer working on a site dream about huge amounts of traffic, but I am also sure they have nightmares about too much of it!

More than just a website testing tool, Load Impact is a whole package of tools, with a pretty solid set of them freely available. The main test, available right from the home page of the site, allows you to test how well the server hosting your site can handle large amounts of traffic. After all, it’s better to find this way that 10k visitors in 15 minutes can kill your server, instead of doing it the hard way… Just think about the frustration of finally making it to Digg’s front page and seeing your server “go down in flames” 3 minutes later!

My final hint for you is this – check the Page Analyzer section, there are plenty of goodies to be had for free there, including emulation of most popular browsers for page loading tests, without leaving Chrome 1/2/3/4 or Safari 3/4 and other smaller players aside. Sweet!

Oh, yeah – you can only simulate the activity of up to 50 concurrent users on your site for free, but if you pay… you can break all the limits! It only remains to be seen if your server can do that, too…

CSS Formatter and Optimiser

Codrut Nistor — Wed, 17 Jun 2009 08:11:54 +0000

No matter how good a programmer may be, his code will always allow a little bit of tweaking, and if we talk about CSS, things should be pretty clear – since CSS is not C/C++, a lot of people without any special programming skills can easily use it. The result? Code that works, but can be heavily optimized!

CSS Formatter and Optimiser is a tool based on csstidy, and its purpose is to turn your frog-like code into a beautiful princess. Oh, yeah, and no kisses needed!

All you need to do is input your CSS code into the “CSS Input” box, choose your preferences (when talking about code layout, you can even use custom templates), and then press the Process CSS button. One interesting feature of this Web-based tool allows you to grab a CSS file by entering its URL, so you won’t have to manually paste the code into the code box, as I mentioned above. Pretty cool!

Other than the above, there’s not much left to be said… oh, I nearly forgot a very important part – unlike most similar tools, only available in English, CSS Formatter and Optimiser is also available in German, French, as well as Chinese, making it accessible to a whole army of developers who may not be really happy at all using English. Anyway, sooner or later, they’ll have to…

Compatibility: I tried this tool with Internet Explorer 8, Firefox, Safari, Google Chrome, and everything worked fine; if you run into any kind of trouble with it, be sure to drop a comment below!

Firebug

Codrut Nistor — Mon, 15 Jun 2009 12:05:17 +0000

Back in the days when I was a kid, it was nothing out of ordinary to stare with my friends at some firebugs for hours. While the firebug, or “Pyrrhocoris apterus,” for the scientists, is one ubiquitous insect that eats seeds from lime trees and mallows, there’s also one firebug that’s eating code for breakfast… and the same goes for his other meals!

Firebug allows developers to forget about having to use a bunch of different tools for fine tuning and troubleshooting their code. With this Firefox plugin, you can easily edit, debug, and watch your CSS, HTML and JavaScript code without breaking a sweat!

Various features allow you to monitor network activity, so you can easily find which one of your pages is taking too long to load, explore DOM objects, use the command line to quickly run JavaScript code, as well as accurately log all debug info you need to find the problems hidden deep inside your code.

Oh, yeah, something you also need to know if Firebug sounds like something new – while you can run it in a window of its own, as you can see in my screenshot above, Firebug can also appear as a bar located at the bottom of your browser, so it won’t ever get in your way. Is this sweet, or what?

Compatibility: Firebug 1.3 only works with Firefox, while the adventurous ones using Firefox 3.5 Beta should use Firebug 1.4 Beta, but if you want Internet Explorer, Opera or Safari support, you should try Firebug Lite