“don’t miss on this opportunity to get trained on the latest Microsoft technologies. You have the opportunity to learn and explore how Microsoft products and tools can help you quickly address your most time-consuming development challenges. Join fellow developers, architects, IT Professionals, designers and project managers at this online event to interact with the best-in-class technologists attending the event.”

Microsoft Virtual Techdays

So world class technologists dont miss opportunity, just register and join online and participate online you can learn some new features which has been introduced.

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.

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.

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.

Officials has announced that "test" or "beta" version can be downloaded for free in more than 100 countries and the awesome thing here is its code will be open source. Later today, the new browser will be available in more than 40 languages.

As we all know, recently we had a bash on the release of "Firefox 3 ", Mozilla has rocked the web world with the new version release of Firefox. According to the present statistics out of 100%, Internet Explorer is used by 74 percent of computer users worldwide compared with 18 percent for Firefox . If you would like to know about the usage of all the browsers in the present IT Market, then check out this article right here - Google Chrome: Browser competition back in high gear

For your information "Chrome" uses the Webkit engine to render Web Pages and adds a value for JavaScript execution.

If you want to view official Google Chrome Screenshots, then please do view the same at this location - Official Google Chrome Screenshots

If you want to know more about the best new features which has been introduced in "Chrome", there is Comic Book release which explains What Google Chrome is all about and why it was developed. Its worthy seeing…

Below links will take you to the respective websites were you guys can know more about Google Chrome and its awesome features:

1. Google challenges Microsoft with new browser

2. Google announces Google Chrome web browser

3. Kill the competition: Pound plunge … Browser war … Branson airport bid

4. Official Google Chrome Screenshots

5. Google Chrome update: First screenshot, and live-blog alert

6. The Chrome is out of the bag: Google’s browser arrives Tuesday

7. Google ’starting from scratch’ with own browser, Chrome

8. Mozilla CEO: Chrome was inevitable

9. Google steps on Firefox with new Zune…err, Chrome

10. Google Chrome: Browser competition back in high gear

Download: You can download the same from here - http://tools.google.com/chrome

I wondered why IE will raise an issue when I could not see any error in Firefox? annoying error right? Yes! same thing I feel.

After searching a lot in Google by this query “Error: Invalid source HTML for this operation“, I got the answer by seeing some forums. This Error might be because of “Inserting a block element inside a non-block element”

like for example: document.getElementById(’inserting’).innerHTML=”<span><div>Inserting a block element inside a non-block element</div></span>”

The above is strictly not allowed in IE6.0 browsers. When you render the same in IE browser will raise an error saying the same “Error: Invalid source HTML for this operation“, when you render the same in Firefox browsers then will render properly without any error

You can view the below links for reference:

innerHTML and non-block elements
http://xinha.webfactional.com/ticket/129

Related Topics which you would like to read:

1. System Error: -1072896658 in IE
2. Snippet Code for Simple Ajax Tabs with cool CSS Styles
3. Using XMLHttpRequest, reading XML data (Adobe AIR Application)
4. Remove special characters (like !, >, ?, ., # etc.,) from a string using JavaScript
5. 10 different styles of Accordions (Using Ajax, JavaScript, DHTML)