How to fix browser compatibility issues?

A normal developer never cares about the executing the application in different browsers while developing the application and he might doesn’t know that he will get lot of issues once the development is completed. This causes a big headache to him after completion of the application as he gets more number of cross browser compatibility issues and he can’t fix those instantly. 

Fixing the cross browser compatibility issues after completion of the project is night mare for the developer. He has to start fixing the issues from the starting stage of the application development.

Below is the small discussion to fix the browser compatibility issues for different browsers like Chrome, Internet Explorer and Mozilla Firefox.

Mozilla Firefox: 

The excellent feature that Firefox has is the add-ons. There are lot of add-ons you can add to Firefox in which Fire-Bug is the best add-on to fix the issues in applications while running in  the Firefox browser. When you install the fire bug add-on, one bug icon displayed on the right-bottom corner of the browser.

Once you open your application in firefox and click on the bug icon, you will see a window which contains html source code as shown in the below screenshot. The developer has to analyze the code which display on the firebug window and has to fix the issues.


The error console (Ctrl+sift+J gives the error console) of the firefox browser contains the java script errors in the site. Developer has to fix those errors by analyzing and debugging the JavaScript code.

Developer can fix the css related issues by modifying the css classes in the fire bug window.

You can view the fire bug window by just pressing the button F12.

You can read more about the Fire bug on http://getfirebug.com/whatisfirebug
 

Internet Explorer:

Microsoft is providing the developer tool along with the Internet explorer to analyze the issues in the IE. Once the proper analysis is done by the developer and he can fix the issues by updating the changes in javascript code or css classes.

Below screen shot shows the Internet Explorer developer tool. You can open this by going to Tools --> Developer Tools or by simple pressing the key F12.

You can read more on Internet Explorer developer tools on http://petelepage.com/blog/2010/06/internet-explorer-developer-tools/

Google Chrome:

By clicking on F12 button, you can open the Developer tool in the Chrome browser. Below screen shot shows the code analyzer of the Chrome browser.

You can read more on Chrome Developer tools on http://code.google.com/chrome/devtools/docs/overview.html 

I thought most of the cross browser issues comes with the javascript errors or javascript un supported methods in the browsers. If the developer cares about the javascript predefined functions while development, he can remove more number of cross browser issues.