If you want to debug the same in IE or Opera or Safari browsers then you have to go for Firebug Lite. Firebug Lite is a JavaScript file can be inserted into your pages to stimulate some firebug features in browsers. Firebug Lite creates the variables “firebug” and “pi” and doesn’t affect or interfere with HTML elements that aren’t created by itself.

By looking at this you might be having a query like how to install the same in-order to utilize the features, below code depicts on how to install.

Installing Firebug Lite:
Just insert below line of code into any page that you want to contain Firebug Lite

1

<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

If you want to use Firebug Lite offline, then just download the source files from here and import the respective files into your site’s directory. Find “firebug-lite.css” URL on the javascript file which you imported and replace this with offline address of firebug-lite.css file.

1

<script language="javascript" type="text/javascript" src="/repectivepath/firebug/pi.js"></script>

1

<script language="javascript" type="text/javascript" src="/repectivepath/firebug/firebug-lite.js"></script>

And if you want to write messages to console you can do the same, eagerly want to know more about this add-on to IE, Opera and Safari, then please do have a look at this page and download the respective files and have a safe debug.

I would like to recommend this extension, since this going to help developers a lot in debugging their pages accordingly before delivering the same to respective clients.

If you want to prepare any video presentation, this add-on will create the same for you in minutes and can be presented accordingly in respective websites. This add-on extension is for Windows XP and Vista as well. After installing Capture Fox, you will find a button in the Firefox Status bar as usual to the right of the bar and while when you are recording you can check the duration of the screencast accordingly in the status bar.

Capture Fox Icon on Status Bar

Capture Fox Settings Window

Capture Fox Options Window

I would like to recommend the same to be installed and can be used as an alternative instead of opening another software’s or tools, you can view and record there itself, work will be simple and easy enough.

Just download, save to your hard disk and install the same, and start troubleshooting the web pages. With this Developer Toolbar, you can explore and modify the DOM (Document Object Model) of a respective web page, you can view HTML object class names, ID’s, and several details such as link path, tab index values, and access keys. You can easily identify the Table structure like respective table cells, images or selected tags. More features are depicted below:

• Explore and Modify the DOM (Document Object Model)
• We can locate specific elements
• We can view HTML object Class Names and ID’s
• Validate HTML, CSS, WAI and RSS web feed links
• Display Image dimensions, file sizes etc.,
• We can View the formatted and syntax colored source of HTML and CSS
• Display a fully featured design ruler to help accurately align and measure objects on our pages. And many more features can be found at this location - Internet Explorer Developer Toolbar

System Requirements:

This Developer Toolbar is supported only these operating systems like Windows Server 2003, Windows Vista, Windows XP and for your information this Toolbar is not compatible with Internet Explorer 8, for Internet Explorer 8 we have another version, to know more about the same click here, this toolbar is more compatible with IE 6 and IE 7.

Screen Grab:

If you would like to know more information on IE Developer Toolbar, please do visit here

It has got the elegant search pane at the bottom of the page to an information hiding popup. It can be integrated into IE of lower version like IE 5.5 and can be utilized for higher versions as well.

Note that you can still use the default IE Search option by selecting the Find item of the Edit menu. This inline search only hijacks the shortcut key.

You can get this add-on from this site - http://www.ieforge.com and the same can be downloaded from this location - http://www.ieforge.com/uploads/InlineSearch/install.exe

Shortcuts for this add-on:

• CTRL-F or F3 to open/refresh the search pane
• ESC to close the search pane when in focus
• F3 or ENTER find the next occurrence
• SHIFT-F3 find the previous occurrence (Shift-Enter works too)

I would like to recommend this add-on for better search in IE browsers, rock it guys!

The JavaScript Navigator object does the same; it contains the information about your visitor’s browser. When you are working on any project related to web browsers, in some scenarios you would like to know the visitors browser version, by this you would like to make sure that the code or your application should not popup any errors or especially this will helps in your presentation of the page, like for example: height and width of the page. If you see the height and width may differ based on the browser which user is viewing your application.

Navigator Object (navigator object) of JavaScript contains many core properties like appCodeName , appName , appVersion , cookieEnabled , language , mimeTypes[] , platform[] , plugins , systemLanguage , userAgent , userLangauge .

The core properties of ‘navigator ‘ object and there description is depicted below:

1. appCodeName: (navigator.appCodeName) holds Code Name of the browser.
2. appName: (navigator.appName) holds the name of the browser.
3. appVersion: (navigator.appVersion) holds the version of the browser.
4. cookieEnabled: (navigator.cookieEnabled) returns Boolean that indicates whether the browser has cookie enabled or not.
5. language: (navigator.language) returns the default language of the browser which user is using.
6. mimeTypes[]: (navigator.mimeTypes) It returns the array of all MIME types supported by the user.
7. platform[]: (navigator.platform) The platform of the user’s computer. For Example: Win32
8. plugins: (navigator.plugins) It returns array of all plug-ins currently installed on user’s browser.
9. systemLanguage: (navigator.systemLanguage) Which returns the default language of the user’s operating system. Works for only IE (Internet Explorer).
10. userAgent: (navigator.userAgent) returns the value of the user-agent header sent by the client to the server.

If you want to see, how to we can use navigator object to detect the browser type of your visitors. Then you guys! Need to look at the program which is depicted below, the below program utilizes all the respective properties of navigator object.

Below is the simple function, which shows different properties which comes under navigator object:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function browserDetection()
{
	var str;
	str='navigator.appCodeName: '+navigator.appCodeName;
	str+='navigator.appName: '+navigator.appName;
	str+='navigator.appVersion: '+navigator.appVersion;
	str+='navigator.cookieEnabled: '+navigator.cookieEnabled;
	str+='navigator.language: '+navigator.language;
	str+='navigator.mimeTypes: '+navigator.mimeTypes;
	str+='navigator.platform: '+navigator.platform;
	str+='navigator.plugins: '+navigator.plugins;
	str+='navigator.systemLanguage: '+navigator.systemLanguage;
	str+='navigator.userAgent: '+navigator.userAgent;
 
	document.getElementById('description').innerHTML=str;
}

And below is the HTML code, which needs to be placed in the body of the HTML page:

1
2

<div>
<input id="browserDetection" onclick="browserDetection()" name="browserDetection" type="button" value="Browser Detection" /></div>

As of now I have tested in only three browsers that is Mozilla Firefox ,
Internet Explorer and Google Chrome :

Output in Firefox:
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows; en-US)
navigator.cookieEnabled: true
navigator.language: en-US
navigator.mimeTypes: [object MimeTypeArray]
navigator.platform: Win32
navigator.plugins: [object PluginArray]
navigator.systemLanguage: undefined
navigator.userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Output in InternetExplorer:
navigator.appCodeName: Mozilla
navigator.appName: Microsoft Internet Explorer
navigator.appVersion: 4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)
navigator.cookieEnabled: true
navigator.language: undefined
navigator.mimeTypes:
navigator.platform: Win32
navigator.plugins:
navigator.systemLanguage: en-us
navigator.userAgent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322)

Output in Google Chrome:
navigator.appCodeName: Mozilla
navigator.appName: Netscape
navigator.appVersion: 5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.30 Safari/525.13
navigator.cookieEnabled: true
navigator.language: en-US
navigator.mimeTypes: [object MimeTypeArray]
navigator.platform: Win32
navigator.plugins: [object PluginArray]
navigator.systemLanguage: undefined
navigator.userAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.30 Safari/525.13

If you look at the above output’s you can observe that some of the properties is returning “undefined” since some properties will work only in some browsers.

If you would like to know the answer, here it is - Just run the below JavaScript code in the new Google Chrome browser, you will know the answer:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var browserName=navigator.appName;
if (browserName=="Netscape")
{
 alert("Hi Netscape User!");
}
else
{
 if (browserName=="Microsoft Internet Explorer")
 {
  alert("Hi, Explorer User!");
 }
 else
  {
    alert("Check out the browser which you are using, or upgrade your browser with the new one?");
   }
}

So, Guys! what answer you got, Yes! the navigator.appName returns "Netscape ". As we all know "appName " of navigator holds the name of the browser. Similarly we have so many properties of navigator object like for example: navigator.appVersion, here "appVersion " holds the version of the browser.

Related Articles which you would like to read:

1. Google Chrome Browser on your personal USB Drives

2. Twinkling hidden features of Google Chrome

3. Download Google Chrome Browser, its awesome

4. Error: Invalid source HTML for this operation

5. System Error: -1072896658 in IE

6. Snippet Code for Simple Ajax Tabs with cool CSS Styles

7. Remove special characters (like !, >, ?, ., # etc.,) from a string using JavaScript

8. Using XMLHttpRequest, reading XML data (Adobe AIR Application)

If you would like to see the demo, you can view the same at this location - Google Contacts Demo , once you click on the link, it will open up an application, and when you click on the "Login", which is towards your left - it will ask for your login information of your GMail account, after filling in your username and passwords it asks for approval about the application. If you grant access it will display all your GMail contact lists into the grid provided. Amazing application!

Great job! done by Jamie Avins, Jamie you really rocks!

After the release of the Google Chrome, there were lots lots of feedback from the people who has the features and who has downloded the software. Here is a good news for the people who stores all the respective softwares in their USB Sticks, Google Browser can run directly from the USB Stick and even you can browser your favorite websites and the history and cookies will be stored in USB drive itself, isn’t it awesome enough.This requires no installation at all, this will run in a single click of a respective file. This has been created by Carsten, just download the file from here - Download Portable Chrome 0.2.151.0 (This will be downloaded from Carsten’s Web Blog). So what are you waiting for, just download the respective file and store the same on to your USB Drives, and unzip accordinlgy and start chroming and rocking as well in the World of web.

My favorite all time feature is "Task Manager ", "JavaScript Debugger " this is what I am looking for in the other browsers. In one of the blog, I have noticed a good article related to "Tabs" in a browser, the title of the article is "Does tab features in browser helps the developer? ", I think the article which has posted might be a developer, here in this article he has explained his handson experience about the "Tabs" when debugging a code or while writing a code in any language. His concern is, "when I am testing my code in tabbed browsers if at all that code has got any errors and or problem might occur during running the code, or if any loop is running continuously (infinite loop) in order to overcome the issue we need to close entire browser window no matter how many tabs you have opened, using Windows Task Manager if developer is using Windows Operating System ". Here in this Google "Chrome" browser, we are not having any problem, we can overcome the above problem as here they have introduced "Task Manager" feature, its awesome right? Yeah! its really awesome.

1. Task Manager (Shift+Esc): Crash Control

Below is the screen shot of this awesome feature, Task Manager (Shift+Esc) :

From the above feature, you can easily stop/End process of the Tabs which you have opened, I think this feature help developer a lot in debugging and running the code successfully without disturbing other tabs which are opened. Not only that you can view the memory of how much each tab is taking and the CPU effort has well. And more interestingly, if you click on "Stats for nerds" it will show consolidated stats of the same, this is really awesome and unique feature I have ever seen before.

2. New incognito Window (Ctrl+Shift+N):

Here "incognito" means without revealing one’s identity. This is a new feature which we will not see much handy in any other browsers. The websites which you see in this window will not appear in history that is website links or other instances like cookies won’t appear in your browser history or search history. This feature will not affect the behavior of other people, servers, or software. If you would like to know more info about this feature, then just press Ctrl+Shift+N on your keyword

3. Gather Multiple tabs into one window:

As we all know Google takes more care about the users usability, they have introduced one awesome features like you can drag out the tabs to create a new window, and you can gather multiple tabs into one window and can arrange them as you need depending on your priority.

4. Safe Browsing:

Google automatically warns you if you are about to visit any malware or any other unsafe websites. Check out this feature, this is not new but good enough feature we can say. This feature will warns you by flashing an alert message like "Error Messages and Alerts: ‘This is probably not the site you are looking for!’ ".

5. Instant Bookmarking:

As we know bookmarking places a vital role in storing your favorite website address, and I would like to give one suggestion to Google that, right now bookmarks are stored locally (In the system’s memory) this feature only will be seen in this system only, if a user bookmarks any favorite website, it should open up a window of GMail or so asking for username and password and can save the same bookmark online. If you guy’s introduce this feature, it will helps developers and users a lot in saving some time. I think you might be introducing this in next coming releasing.

6. Import Bookmarks and Settings:

You can import your bookmarks from your other browsers very easily like from Internet Explorer or Mozilla etc., not only importing bookmarks, we can also import Browsing history, Saved passwords and even Search engines. You can import all these in a single click…..

7. Downloads:

Again I can this very awesome enough, when you want to download a file / zip file / lets say if you want to save an image from a web page, it will show up an download icon towards your chrome browsers left bottom and towards your right you can see a link called "Show all downloads…" and when we click on this link it will open a new tab with all the respective downloads which you have downloaded. If you want to view the destination of the file then in download tab window click on "Show in folder" it will take you to the destination folder.

8. Create application shortcuts…

You can create a shortcut of your favorite website page and can save the same to your Desktop / Start Menu / Quick Launch Bar for your future reference, I think this is a new feature which Google has introduced, when we click on the respective shortcut icon which you have saved it will open that application in a separate new window with awesome features… Amazing!

9. Find option:

If you want to find any word in your respective webpage, press Ctrl+F then towards your top right corner one find text box will scrolls down and also this provides us to see the previous and next options which has been shown using up and down arrows.

10. Developer Options:

This feature is also awesome enough in Chrome, if a user / developer wants to debug or view his code he can do the same, when user want to view the source of a web page, can do the same by Ctrl+U and the source window has got line numbers as well, this is something new and which helps us in debugging as well. Google has introduced a nice feature of debugging the code like a "Firebug " addon in "Firefox ", this will help developers a lot especially for JavaScript developers.

I think, I have covered most of the awesome enough features which Google has introduced in New Chrome Browser, download the same at this location - http://www.google.com/chrome/?hl=en and if you have any valuable feedback on the Google Chrome Browser let the Google Team know the same - http://www.google.com/support/chrome/bin/request.py?contact_type=feedback

And if I have missed any new features, please do post a comment to this article.