Switching to Chrom(ium)
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.
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.
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.
Installing and Using Chrome
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.
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.
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 http://chromium.org. If you are
comfortable with the proprietary version of Chrome, you can go to
http://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
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 "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.
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.
Some basic information about the developer tools is at https://developers.google.com/chrome-developer-tools.
Limited Time Offer
Take Linux Journal for a test drive. Download our September issue for FREE.
Topic of the Week
The cloud has become synonymous with all things data storage. It additionally equates to the many web-centric services accessing that same back-end data storage, but the term also has evolved to mean so much more.