Switching to Chrom(ium)

Developer Tools

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.

Conclusion

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.

Resources

Information about Google Chrome is at http://google.com/chrome.The Chromium open-source project is at http://chromium.org.

Some basic information about the developer tools is at https://developers.google.com/chrome-developer-tools.

______________________

Reuven M. Lerner, Linux Journal Senior Columnist, a longtime Web developer, consultant and trainer, is completing his PhD in learning sciences at Northwestern University.

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

This is very much great!

Krishna Free Downloads's picture

I must say using Chrome iOS and its browser too is just wonderful and it really gives the sense of relief with speed as well as security!

Nice article

Downloads on Soft's picture

This is nice article!

Nice information, valuable

Glasgow airport cab's picture

Nice information, valuable and excellent design, as share good stuff with good ideas and concepts, lots of great information and inspiration.

Reply to comment | Linux Journal

Computer Repair's picture

Its like you read my mind! You appear to know so much about this, like you wrote the book
in it or something. I think that you can do with a few pics to drive the message home a little bit, but other than
that, this is magnificent blog. A fantastic read.
I will certainly be back.

Reply to comment | Linux Journal

webhosting's picture

Best hosting is divided up hosting of it is this one. It's what mass type in to the Turn to bar of do is to Pick out a full tax computer software hosting provider. invariably Suss out out the meter MySQL databases. A reverse gear DNS platter also use digital or Moving-picture show cameras as easily. Secondly you resolve what genial of services of business and dining makes Etiquette a demand. So - if you Need, feedback remains very consistent. They drop weeks and fifty-fifty are targeting a sure grocery, and you Own everything they Require.

Its best

Downloads on Soft's picture

I always love Chrome, since I replaced my browser from Firefox to Chrome. I Just love Google Chrome. Thanks!

I've never had a problem with

billwu's picture

I've never had a problem with them before but next time I buy a 02 sensor, it'll be from the dealer. Suggestions? Thanks, RonAre you sure you switched the post-cat O2s? Or, it may be an intermittent open or short. try the wiggle test. Yes I'm positive it was the post cat O2s. The wiggle test. oh boy! I hate intermittent problems. So you agree. if the O2 was bad I'd get the different code? Don't be surprised if it comes back. 317-7485 communication adaper 3

Thanks for a marvelous

karlmark's picture

Thanks for a marvelous posting! I seriously enjoyed reading it,
you can be a great author. I will be sure to bookmark your blog and will eventually come back sometime soon.
I want to encourage one to continue your great
posts, have a nice day!

I use mozilla for my work

Smita's picture

I use mozilla for my work purpose only. If we talk about the speed, Chrome is on the number one.

I think Firefox is the best

riinfotech's picture

I think Firefox is the best web browser than Google chrome

Ecommerce web design in india

google

Maxime Référencement's picture

Thanks for mentioning that Chromium isn't open source, it's actually very important. A classic move by Google is to offer a free service, until data mysteriously disappears ("not provided"...) unless you buy the "premium" product...
Le référencement sous Google

I understood Chromium IS FLOSS while Chrome is not

Anonymous's picture

Please fact check this.

After reading this article, I

Anonymous's picture

After reading this article, I checked the page source and was far from surprised to see the word "Google" infesting the msny lines of code right out of the gate.

I find it laughable that a magazine thinks it can sway readers with a flimsy article such as this. Google has its place, but Firefox still wins in terms of a browser.

IE? IE is for suckers, so that's a moot point.

Business is business, so I can't blame Linux Journal too much for this abysmal attempt to win over the masses for Google.

Chrome is still nice!

krishna Tech's picture

Yes Google Chrome is nice web browser I have ever seen. Firstly I was used to Firefox only, but later Chrome is my hero!

my favourite one

Dzak's picture

its my favourite one and the best chrome... and you'd like it more if you have an android mobile.

http://www.detective-zakynthinos.net/Detectives-Private-Investigators.as...

Chrome is my fav browser...

Dzak's picture

Chrome is my fav browser... because its must when you have android mobile. You can sync, send everything you want simple and fast.

http://www.detective-zakynthinos.net/Detectives-Private-Investigators.as...

Just a comment

Andrés González Cantú's picture

Dear Sir,

It is obvious that you value more the technical issues than your freedom an privacy as a computer user. Let me tell you a secret: if you want software that "just works" you don't need GNU/Linux at all.

Regards.

Reply to comment | Linux Journal

Tawnya's picture

Determine your brokerage by talking about whatever they see as a profitable deal or,
on the flip side, a was unsuccessful 1. Ask them the way that they determine their final results.
Ensure that you comprehend his techniques and method.
Select a broker who fits you in every one of the solutions
they give, be it the identical techniques or supporting kinds.

spam

Anonymous's picture

The above "comment" is obviously spam. Please delete it

Web page printing // Java

David Russell's picture

1) One of the nicest things in Chrome is the ability to print to pdf, which I have not seen in any other browser.

2) Chrome prompts before allowing Java to run. Java can be suppressed in Firefox, but not in IE - which is one of IE's failings, a significant security issue.

yeah, about that

someone else's picture

1 - Opera had that long before Chrome was even an idea at Google.

2 - Don't install Java at all if you don't absolutely positively need it.

I am a recent convert to

N900's picture

I am a recent convert to Chrome. It runs circles around IE and Firefox in terms of speed. I also like the anti-malware features in it - plus the spell checker, which is invaluable for posting in my site: Losing weight or forums like this one.

Sticking with the FFox

vicar's picture

You lost me as a convert when Google insisted on "managing my bookmarks".

Firefox remains the browser

Anonymous's picture

Firefox remains the browser of choice. It's still more flexible than the others and is free of Google binding you into everything under its umbrella. I value independence

Chrome annoys me by not letting me control it.

Micha's picture

It always seems to me that the Google people assume that they know better than the user, therefore they would define the behaviour of the browser and let the user have very little control over it. One small example: I have some 1000-1500 bookmarks. The way for me to be able to use them is through a side panel, where I can view them, scroll, expand or contract folders etc. Current monitors tend to give you too little vertical pixels combined with too many horizontal ones, so a side panel lets you make a better use of your real estate. But Google doesn't give you the option. Why? Is it hard to implement? Doesn't sound hard to me, especially as it has been part of browsers since... well, maybe not Mosaic but definitely Netscape. So I can only attribute it to a "we know better what you need" kind of attitude. This alone has been enough to keep me from switching to Chrome, though I occasionally use it (and for me FF is also more convenient).

my story

 gentoo-user's picture

I've been an Opera-user for many years, until I, already years ago, switched to Chromium. I never got into Firefox for some reason, though I tested it every once in a while, I especially don't like the interface and such - after installing a bunch of add-ons I usually end up all addleheaded, not able to find what I am looking for.
In Chrome everything is arranged very intuitively, clean and clear, either in Omnibox or next to it. I can btw access and use all of Chromes extensions (like every Chromium-user), I even wrote my own little one, though I am quite a layman.

Sure, Google is the company behind Chrome and Chromium, which is kind of a downside - but to me it's the only noteworthy downside and not reason enough to switch to a significantly inferior browser. And I doubt Mozilla will redesign most of Firefox's look-and-feel, since most of the users seem to be satisfied by how things are...

Firebird

Anonymous's picture

I remember when Firefox was called Firebird, and it has to be renamed to avoid the open-source database. I remember at the time that I didn't like the rebranding, but it really has grown on me over the years.

Firefox is still my browser of choice, although my second choice (when I need one) is Chrome.

Nightly builds of Chromium

triune's picture

Nightly builds of Chromium for Linux (w/ Chrome Store access) >> http://download-chromium.appspot.com/

No access to Chrome Store and Extensions......

roszyk's picture

I am running Chromium Version 25.0.1323.1 on Puppy Linux and I do have access to the Chrome Store and Extensions. The Auto-update seems to be the only difference with Chrome.

I'm worried

Anonymous's picture

Firefox is clearly developed with the best interests of the user in mind. Just look at how hard the organisation tries to promote the free exchange of ideas and information by keeping the web as neutral as it has the influence to.

Chrome on the other hand, is a repackaged open source project whose development is influenced to further Googles interests. It is slightly faster and feels a bit more polished, but that's simply because there is no point in google promoting a browser that no one wants to use. take away the competition and chrome will stagnate.

Allow google to gain the lions share of the browser market and progressively developers will start optimising websites and web applications for chrome(ium) only. We've seen it before and if we allow it, we'll see it again.

It's already starting to happen. AWS control panel is not usable with the current Firefox. That isn't Mozillas fault, it's Amazons. They are optimising for web-kit only browsers.

What a shame history has a habit of repeating the bad bits.

Tab Sync

Kellen's picture

Chrome IS able to sync your tabs between your phone and any other device running chrome. Of course you have to sign in with your google account.

Webinar
One Click, Universal Protection: Implementing Centralized Security Policies on Linux Systems

As Linux continues to play an ever increasing role in corporate data centers and institutions, ensuring the integrity and protection of these systems must be a priority. With 60% of the world's websites and an increasing share of organization's mission-critical workloads running on Linux, failing to stop malware and other advanced threats on Linux can increasingly impact an organization's reputation and bottom line.

Learn More

Sponsored by Bit9

Webinar
Linux Backup and Recovery Webinar

Most companies incorporate backup procedures for critical data, which can be restored quickly if a loss occurs. However, fewer companies are prepared for catastrophic system failures, in which they lose all data, the entire operating system, applications, settings, patches and more, reducing their system(s) to “bare metal.” After all, before data can be restored to a system, there must be a system to restore it to.

In this one hour webinar, learn how to enhance your existing backup strategies for better disaster recovery preparedness using Storix System Backup Administrator (SBAdmin), a highly flexible bare-metal recovery solution for UNIX and Linux systems.

Learn More

Sponsored by Storix