Thursday, September 27, 2007

debugging,developping and loving it.. perhaps...

When you browse the Internet, you are using a... browser.
Not really surprising to know that browsers are the most used software nowadays.
But I guess there's nothing new there.
When you browse the web as a user, that's find.
You don't think about how the page is rendered, how this element is placed here or how this flying ufo goes thru the window, making you feel nervous....
Well, if you develop for the web, the browser is going to be your best friend....
or your best enemy !.
There are different browsers, different way of interpreting the code that says this ufo goes from here to there and this text is placed here with this color...
If you are using Windows, you are certainly using the default browser shipped with it:.
Internet Explorer or IE..
If you are using a Macintosh, you are probably using Safari....
There are other browsers: Firefox, Opera...
The 4 browsers listed so far are the main browsers you will perhaps need to watch carefully !
We are in 2007 and IE 7 is out but hey, almost 80% of people are still using IE 6, helas !
Why is it not a good news ?
Well, they are rules that say the text of an internet page should be blue, aligned right with a border on the left...
You know for sure that pages are created using different languages such as (X)HTML,CSS, Javascript, Flash, Java and the list goes on that specify the above rules.

(X)HTML,CSS, Javascript directly depends on how the browser has implemented their behavior.
And here start the fun !
At the beginning, when browser vendors started to appear, they weren't any rules defining the way each language should be interpreted and the chaos took place.
Think of it : you want to have your text in blue but you need to write the rules 3 times for 3 different browsers ! Fun hey ?
That's why a consortium, the W3C, stands up to define some standards, rules that browser vendors should follow to put some order in there.
Well, browser vendors doesn't have to follow these standards, they can implement them the way they like...
That's why you can find some convergence and differences between how IE 6 and Firefox will render exactly the same page !
You can find many differences between IE 6 and IE 7 too !
(if you are using IE 6, it's time to update !)
IE was one of the first and pride or what, IE staffs are a kind of reluctant to follow the W3C standards whereas other browsers try to converge as possible to these standards.
Browsers converging to standards is beneficial for the programmer : .
if everyone follow the same rules,follow the same way to render a page, you will not have to waste your time checking them on different browsers,learn different ways of doing things and try to find some hacks to make everything works !

But to tell the truth, that's find ! The difference is not too huge and some good functionalities can exist in some browsers. If they are good, they will be copied, enhanced for the joy of everyone !
Still, differences exists and this can be a real pain to deal with.

So here we are, with different browsers, different rules but one programmer..
You need to check your pages in different browsers to be sure they will render the same.
And here comes some tools to help you develop your page (xhtml,css and javascript essentially).

They are not going to help you make your code working for all of the browsers though.
These tools will just help you spouting out places where the browser bugs with a particular code.
We will start by my favorite browser :

Firefox !
You can plug some new tools too it very easily in 2 clicks !
As an open source project, there is a huge community that enhance the browser continuously and that's why you can find thousands of plugins !
Below is the page that list the plugins related to development :
https://addons.mozilla.org/en-US/firefox/browse/type:1/cat:4
Then I will list my favorite tools;
- html validator
https://addons.mozilla.org/en-US/firefox/addon/249
This plugin will tell you if there is something wrong with your xhtml page !
-web developer
https://addons.mozilla.org/en-US/firefox/addon/60
I just cannot live without !
You can edit in place the css, html, cookies,
see the page structure, change the window size and so on and so forth !
- Fire bug
https://addons.mozilla.org/en-US/firefox/addon/1843
Well, this one rules too ! very powerful with some features like the one of web developer plus some others very nice and helpful !

As for Javascript, Firefox is shipped with a debugger that is very helpfull and can allow you to track down bugs efficiently !
You can look for Venkman plugin if you need something even more powerfull.

IE...
- script debugger
http://www.microsoft.com/downloads/details.aspx?familyid=2F465BE0-94FD-4569-B3C4-DFFDF19CCD99&displaylang=en
Well, the javascript debugger in IE... sucks !
This tool will allow you to get a clearer error message and will go directly to the line making the program stop.
You need to do some settings to be able to use it:
tools->internet options->advanced. “Disable Script Debugging (other)” and “Disable Script Debugging (Internet Explorer) must NOT BE CHECKED.
Then, in View->Script Debugger->Break at next statement. The debugger will pop up when an error occurs.
- developer toolbar
http://www.microsoft.com/downloads/details.aspx?familyid=E59C3964-672D-4511-BB3E-2D5E1DB91038&displaylang=en
This tool looks like, smell like web developer/fire bug !
That's eventually a tool to help people develop with IE, so let's appreciate it
Safari...
Don't debug in Safari !!
Use Firefox and check Safari. It should not change that much.
Opera...
Don't know exactly as I am not a user but Javascript debugger seems ok...

So hope these tools will help you develop your pages and make your life a little bit easier !

No comments: