I am not required to make our intranet application Chrome-compliant; however, several other developers prefer to roll in Chrome, and I prefer the browser myself. It is fast and lightweight. I prefer all the development tool add-ons in Firefox when I need to do some deep troubleshooting, like Web Developer and Firebug, but they weigh the browser down on initial load. Chrome, on the other hand, just pops right up and I can jump right into surfing; however, Chrome, I am learning, is a very different animal in some ways for surfing and developing for the Web.
View Source
|

Google Chrome “View Source”
|
When you right-click on a web page and select “View Source” in IE or Firefox, you recieve a snapshot of the HTML script behind the page you are currently viewing. Not so with Chrome, which, it took me some time to figure out, submits an HTTP request to the host for the source code. I’m not sure why this is neccessary, as the source code is already loaded, right there behind the page currently being viewed, but that’s how it works.
I found this comment on a post about Chrome’s seemingly stunted “View Source” functionality:
The way chrome behaves when clicking “View page Source” is strange. Let’s say you issue a POST request to one index.php page, on that page want to see the source code. Chrome starts another request to retrieve the document search using GET; with absolutely no regards to the current posted data. Basically you simply get another document from the one you want. Weird to say the least!
Weird to say the least, outright FAIL from a web development standpoint. How am I to see how my dynamically-built web page is writing out source script, if I can’t see what the source looks like built with the submitted POST variables? I have JavaScript compatibility issues in my site that are specific to Chrome, and it’d be nice to see that chrome is getting the HTML I think I’m writing without having to view source in FF or IE.
Well, it turns out that Chrome goes one better than “View Source,” incorporating functionality I could previously only get in FF with add-ons.
Inspect Element
Right-clicking within a web page in Chrome and selecting “Inspect Element” will open the Inspector console, a traversable tree representation of the document object model focused on the selected node:
|

Google Chrome Inspector
|
Why put this functionality behind “Inspect Element” and not “View Source?” Because “View Source” presents the source code that Google Chrome recieved from the host, while “Inspect Element” shows what the DOM looks like at the present moment. This is an important distinction, because Chrome, like most browsers, attempts to correct malformed XHTML. So when you view source, you are seeing the HTML as it was sent, when you Inspect Element, you are seeing the HTML as Google Chrome has reformated it.
For instance, the following XHTML in “View Source:”
<table>
<tr>
Hello
<td>World!</td>
</tr>
</table>
Is rendered in “Inspector” as:
Hello
<table>
<tr>
<td>World!</td>
</tr>
</table>
This is a huge feature for a baseline web browser. It appears to be just as sophisticated as Web Developer for Firefox too, highlighting objects on the page as I hover over their source code in the Inspector, and providing the ability to expand and collapse node trees as I need to navigate the DOM. It also has an error log which handles malformed XHTML as well as JavaScript errors. It’s especially useful for troubleshooting HTML dynamically modified with JavaScript, since you can modify an element with JavaScript, such as by cloning it or with an AJAX response, and then see the resulting HTML.
|

Error Console
|
What a comprehensive solution, and the browser still opens with a snap of my fingers! Suddenly I am in love with Google Chrome again!
Additional Notes:
I still have no idea why Chrome has to make an HTTP request to get the XHTML source. It could be argued that this functionality is a “feature,” protecting the page source from prying eyes that haven’t submitted the proper POST variables to access it. Of course, those variables are available on the preceeding web page, and may be submitted through other means… and the source is available with Inspect Element–Oh, I dunno. I’ll stop thinking out loud now.
One additional quibble with Chrome’s “View Source:” Firefox presents the HTML in a nifty syntax-highlighted format for easy reading in its custom viewer, while IE opens the file in whatever prefered text-editor you have installed. I like IE’s strategy, since I can open the HTML in UltraEdit and go to town with that software’s arsenal of editing features, but Firefox’s built-in text-editor has lots of sweet features too, like reloading, syntax highlighting, and being able to save the source off to your local drive. Chrome’s “View Source” is view-only, so I have to CTRL-A, CTRL-C, and CTRL-P it into UltraEdit.
Okay, I’m done whining now.