At the Forge

For someone who works with, writes about and teaches cutting-edge technologies, I tend to be a bit of a laggard when adopting new ones. I upgrade my laptop and servers very conservatively. I got my first smartphone just earlier this year. I still use the Apache HTTP server, even though I know that nginx is a bit faster. And until recently, Mozilla's Firefox was my default browser.

Firefox is a remarkable piece of software, and it has been a massive success by any measure. It was around before and during Netscape's IPO, which marked the start of the IPO-crazy dot-com era. I then watched as it declined as a company, turning its flagship product (Firefox) into an open-source project before disappearing.

I used Firefox from its first pre-release versions and have been a loyal user ever since. This was not only because Firefox generally adhered to and promoted standards, but also because of the wide variety of plugins and extensions available for it. As a Web developer, I found that a combination of plugins—from Firebug to the aptly named Web developer to Tamper Data—gave me enormous power and flexibility when developing, debugging and working on Web applications.

During the past year, I've discovered that a very large number of non-techies have switched browsers. But, they haven't been switching to Firefox. Rather, they've been switching to Chrome, a relatively new browser whose development is sponsored by Google. I've certainly used Chrome through the years, and I've generally been impressed by its abilities. But for a long time, some combination of nostalgia and comfort with Firefox's tools kept me from switching.

Well, no more. As of recently, Google Chrome has become my browser of choice. In this article, I describe a bit about Chrome and why I've switched, both for personal use and browsing, and in my Web development work. In a future article, I'll explain how to write extensions for Chrome. One of the nice things about Chrome is that writing extensions is extremely easy and exclusively uses Web technologies (for example HTML, CSS and JavaScript).

I should make it clear before I continue that Chrome is not an open-source product. It is free-as-in-beer, but it isn't released under an open-source license. That said, there are several reasons why open-source advocates should take a look at Chrome. First, it is rapidly growing in popularity, with many developers and users alike adopting it. Just as my clients expect that I'll test Web applications against IE, they now expect that I'll test applications against Chrome. If you aren't including Chrome in your testing, you might be missing some issues in your site's design or functionality.

A second reason to look at Chrome is that although you might prefer open-source solutions, there are (as you know) many commercial solutions for Linux, and some of them are even of high quality. Ignoring these products doesn't make them go away, and it even can do a disservice to people who are more interested in having a computer “that just works” than one that is fully open source.

A third reason to look at Chrome is the level of sophisticated development tools it brings to the table. Web developers suffered for a long time with a lack of serious tools. Fortunately, Firebug came along and brought us to the next level. Chrome similarly has raised the bar for Web development tools, making it easier and faster to test and experiment with HTML, JavaScript and CSS. Google has its flaws as a company, but when it comes to development tools in general (and Web development tools in particular), you can be sure that Google is “eating its own dog food”, as the saying goes.

The final reason is that Chrome can be thought of as a mostly open-source product. I realize this might sound similar to saying that a woman is only partly pregnant, but hear me out. From the beginning, Google has sponsored an open-source browser called Chromium that uses the same JavaScript and rendering engine. Most or all of Chrome's capabilities are in Chromium as well. From what I can tell, the main things you don't get in Chromium are automatic updates and access to the Chrome Web store for extensions.

Given my increasing misgivings about the amount of personal data that Google is collecting, I certainly can understand why someone would prefer Chromium to Chrome, or prefer to use a browser (such as Firefox) sponsored by a nonprofit, rather than a commercial company. That said, Google has used Chrome (among other things) to promote modern Web standards, which is good for all developers, regardless of what browser they use.

Google Chrome isn't a new browser, even though I only recently switched to using it on a full-time basis. It first was released in 2008, and since then, it has been available on Windows, Macintosh and Linux systems, generally at the same time. Firefox users recently were surprised to find that their version numbers jumped significantly, and that new versions were being released on a rapid schedule. This happened in no small part thanks to Chrome, which is updated automatically on a regular basis by Google. These regular updates come with new version numbers, meaning that although Chrome has been out only for several years, version numbers already are in the 20s, with new versions pushed out every six weeks or so.

There are actually three different versions of Chrome: the standard production release is what the general public uses and is meant for non-developers. A “dev” release is for developers, and it has more functionality and features, at the price of being slightly less stable.

Another version of Chrome, namely Chrome Canary, includes a huge number of new features, but it isn't at all guaranteed to be stable. That said, when working on my Mac, I find that Chrome Canary certainly is stable enough for day-to-day use. It's unfortunate that Chrome Canary isn't yet available for Linux. Given the large number of Web developers using Linux, I would have expected Google to provide such a version, and hope it does so in the near future.

At a basic level, Chrome offers the same sorts of features you would expect from any Web browser. It lets you enter URLs, search on the Web with your favorite search engine, interact with forms, watch videos, execute programs written in JavaScript, handle CSS markup and identify pages encrypted with SSL. But if it didn't do those things, as well as many other basics that everyone now associates with a Web browser, Chrome wouldn't even be a contender.

On the user interface front, it's true that Chrome is slightly cleaner than Firefox, with a window that appears to contain only tabs, and with tabs that can be moved from one window to another. Again, that's now the norm among Web browsers, and no one would use a browser that did anything differently.

So, why would someone like me switch to Chrome? First, I find that it runs faster than Firefox. The difference is no longer as pronounced as it once was, when Google set the standard with its V8 JavaScript execution environment. Firefox has caught up with Chrome's execution, and I say this not as someone who runs benchmarks, but who interacts with a Web browser on a very regular basis and who is sensitive to the speed with which Web applications execute.

A second reason to switch is, sadly, site compatibility. In Israel, for reasons that drive me mad, there still are some sites—including government and bank sites—that give preference to IE and that refuse to work with Firefox. When I call their support lines and ask for help with Firefox, I'm told that the site won't ever work with it. But Chrome is popular enough that they are (usually) willing to consider making it work better, or to adhere to standards.

Finally, as I mentioned above, the developer tools in Chrome are already excellent, and they are getting better with each release. Firebug continues to be a great tool, but I increasingly have found that Chrome does everything Firebug does, and often better and more intuitively.

If you just want to install Chromium, the open-source version of Chrome, you can do so with apt-get on Debian/Ubuntu or with yum on RPM-based machines. You also can download the source and compile it (although I haven't done so) from chromium.org. If you are comfortable with the proprietary version of Chrome, you can go to google.com/chrome, and download an appropriate .deb or .rpm file that will let you install Chrome on your machine. In the case of Chrome itself, you can choose from the stable or development branches, but you will need to install updates yourself manually. By contrast, because Chromium is an open-source project, it can be included in the standard Linux distribution channels and will be updated every time you do an apt-get upgrade.

Chrome (as opposed to Chromium) tries hard to get you to sign in with your Google account—the same one you would use with Gmail, Google Calendar and every other Google service. The good news with signing in with Google is that Chrome synchronizes your bookmarks and other settings across every copy of Chrome you're running. The bad news is that not everyone wants Google to have access to such information, of course.

Perhaps the most common task for which I need developer tools when working on Web applications is the ability to change HTML and CSS. That is, I see a page, and I wonder what would happen if I were to modify the tag, add a new tag or even add a new style to the tag via CSS. For example, if I were working on the Linux Journal home page, I might go to the “Trending Topics” headline and want to see how I could change it in a number of ways. With Chrome, I don't need to install a plugin; I always can right-click to get a menu over some text. One of the options is “inspect element”. This divides my browser window in half, letting me see the HTML source on the bottom and the original site on the top.

If I want to change the text, I can just double-click on it within the lower (inspection) window and type what I want. Obviously, the changes I make aren't saved back to the server, but that's usually not what I want. Changing things within the browser gives me a laboratory within which I can experiment without having to change or modify my server program.

That's not all, of course. I also can change the tags or any of the tags' attributes. So where “Trending Topics” has a class of “title”, I was able to change it to “awesome”, which, of course, immediately reverted the style to have the page defaults, because no such class previously existed. I can see that right away on the right-hand side of the inspection window, which gives me a live view of the CSS styles that have been applied to the tag in question (“matched CSS rules”). If I change the class back to “title”, the matches change accordingly.

Now, the “matched CSS rules” show me all of the rules that have been applied to a particular element, and that's really useful—especially since this list shows me each rule that has been applied and the file in which it was defined. But because of the cascading nature of CSS, multiple rules can apply to an element, and it can sometimes be hard to keep track of which rule was defined where. For this reason, Chrome provides a “computed style” section in that same area of the screen, allowing you to see the final list of styles that apply to a tag and text. You even can ask to see all of the inherited styles, which can sometimes provide additional insight.

The bottom part of the screen isn't just a tag-and-style inspection screen, but the initial tab of the “Chrome developer tools”. These tools are constantly under development, and it's a bit of a challenge just to know what has been updated and improved in each version. (Although to be fair, the folks at Google do provide a changelog for each version they release.)

The second tab, after the initial “elements” tab, is marked “resources”, and that refers to just about everything you can imagine. Through the list in the left frame, you can get to every HTML element on the page, including images, movies and stylesheets. But if you have been following the development and release of the HTML5 standard, you know that there have been multiple proposed standards for a number of features, including client-side storage. Well, the “resources” tab gives you access to some of these under the “Web SQL” and “local storage” lists. If your application uses these features, you can poke around inside their contents using this tab.

The other tabs are quite useful as well: “network” lets you see Ajax calls, and “sources” shows you which files have been loaded by the browser.

The final tabs are where Chrome really starts to show its stuff. The “timeline” functionality isn't on by default, but rather requires you to press the round “record” button, so that Chrome will keep track of when different parts of the browser are being used, and how much time they're taking. I have often used this sort of functionality on other browsers to keep track of how long pages take to download, but to get a graph of the browser's memory consumption at each point during the rendering of a page is extremely useful. It becomes even more useful if you keep the timeline recording on and then have a browser-heavy application that uses lots of JavaScript, because it can show you when your memory consumption is rising.

The “profiles” tab does two things. It checks the efficiency and speed of your CSS selectors, and it also checks memory use. The first can be quite useful when you have an extremely complex set of stylesheets, which can take a long time to render. You can optimize your style selectors and also concentrate on creating styles only for those elements that actually need them and which appear on the page.

The “Audit” tab is similar to the famous YSlow tool for Firefox, in that it checks a number of common problems that can lead to slow loading and delivery. Your page will be ranked on a number of different criteria, getting a score, detailed results and a handy red-yellow-green indicator showing how well you're doing on each of these criteria. If you're not sure whether your site is slow, or what you can do to speed it up, this tool can provide some quick fixes or at least advise you as to where you need to concentrate your efforts.

Finally, Chrome offers a JavaScript console, much like the one I've grown to know and love in Firebug. This has become an essential tool for my work in JavaScript, letting me query and modify the page, as well as check my work and test snippets of code before committing them.

Now, none of these things are unique to Chrome. With the right combination of plugins, I can get all this, and more, with Firefox. But the level of polish, the rate at which these capabilities are expanding, and the fact that they're included by default with every copy of the browser has proven to be very useful in my day-to-day work.

But, that's not the full story. Chrome offers developers the chance to extend the browser in numerous ways, including by adding new developer tools and functionality. For example, I've been using the “Ghostery” extension to show me which external services (from advertising to auditing) are included when I load a page. This is less useful on my own pages than on others, but I actually have learned of several interesting third-party extensions in this way. The Google Chrome store, which is available to Chrome users (and less easily for Chromium users) offers a huge number of extensions—some are aimed at developers, and others are aimed more at end users.

Indeed, the true power of Chrome is in its openness to extensions, which are surprisingly easy to write and which offer a great deal of power to Web developers—either to add new developer capabilities or even to add specialized functionality for clients and users. In my next article, I'll show how to create such extensions and ways you might want to use them.

During the past year, I've found myself drawn more and more to Google Chrome. I finally took the plunge, making it my default browser, and I haven't been disappointed—as a developer or as a user. There are things that I miss, such as Firefox's ability to sync tabs between my Android phone and my laptop, but I can get over that. For the most part, I've found the transition to Chrome to be smooth and easy, and a very worthwhile one at that.