518-chrome-11

What’s New in Google Chrome 12

By | June 14, 2011 | Programming

25

Chrome 12 was released last week. You didn’t notice? Few people did. I hadn’t intended writing this article but a few people on Twitter convinced me otherwise (thanks @Mahen23). To start, let’s take a look at the usual list of improvements:

  • hardware-accelerated 3D CSS
  • the ability to analyze and delete Flash cookies within Chrome
  • a new safe browsing feature which protects against malicious file downloads
  • improved synchronization of browser settings
  • better screen reader support
  • new PDF save and print buttons
  • launch installed apps from the Omni-bar
  • 14 security holes plugged.

Chrome 12 also marks the end of an era: Gears has gone. Google Gears was launched in 2007 but development was abandoned a year later. The plug-in provided local data storage, JavaScript threading, desktop integration and geo-location but these have been superseded by standard HTML5 technologies.

Built-in JavaScript De-obfuscation

Merging and minifying JavaScript files has several benefits:

  1. Files, sizes and download times are reduced.
  2. Code processing speed can be improved.
  3. It hides your cutting-edge scripts from prying eyes.

Unfortunately, a minified script is impossible to debug. The code is an indecipherable mess contained on few lines which cannot have breakpoints set. Here’s an example from Google Analytics:

Chrome script debugger

Nasty. However, a quick right-click option will de-obfuscate the script into lovely readable source code:

Chrome script de-obfuscation

Built-in de-obfuscation is incredibly useful, although there are a couple of hitches:

  1. JavaScript minifiers often replace long function and variable names with shorter alternatives, e.g. MyLongFunctionName() becomes A(). De-obfuscation can never bring back the original names although you should be able to recognize patterns within your own code.
  2. Setting breakpoints on de-obfuscated code is more limited. Functions run in response to an event or timer can be analyzed. However, it’s not possible to break at code run when the page is loaded since the script has not been de-obfuscated at that point. Let’s hope the Chrome team address the issue in a future version.

For me, this is the most exciting development in Chrome. It may tempt you away from Firebug or Dragonfly when testing live code.

Have you discovered any great new features in Chrome 12?

Learn Responsive Web Design

Join Learnable $29 Includes all SitePoint books

Craig Buckler

Craig is a Director of OptimalWorks, a UK consultancy dedicated to building award-winning websites implementing standards, accessibility, SEO, and best-practice techniques.

More Posts - Website

Tagged as: chrome, debugging, Google Tutorials & Articles, javascript

{ 25 comments }

Christopher R June 20, 2011 at 3:16 am

Did they fix the memory leaks. When I had Chrome 10 installed after 8-10 tabs, Windows would tell me I’m low on HDD space, later found out that Chrome is caching to virtual space after using up all available RAM.

Anonymous June 20, 2011 at 5:21 pm

A memory leak is when an app takes RAM and doesn’t release it properly when it’s done with it. So what you’re talking about isn’t really a memory leak, nor is it something Chrome can do much about. Each tab is essentially another web browser, and each one needs some RAM while it’s open. The more tabs you have open at once, the more RAM it will need. If it needs more RAM than you’ve got, Windows (not Chrome) will use its pagefile to simulate more (up to a point). The solution to your problem? More RAM. ;)

Christopher R June 20, 2011 at 3:16 am

Did they fix the memory leaks. When I had Chrome 10 installed after 8-10 tabs, Windows would tell me I’m low on HDD space, later found out that Chrome is caching to virtual space after using up all available RAM.

strauberry June 17, 2011 at 12:33 pm

De-obfuscate code, I already love it ;-)

Pierre June 17, 2011 at 11:31 am

I’m not a huge fan of version 12 – I (and others) have noticed that sometimes urls just fail to load in new tabs – I’m sorry I upgraded :-/

George Ariton June 19, 2011 at 8:14 pm

it looks like YOU have a problem, never had this problem in chrome :)

Gilberto Ramos June 30, 2011 at 7:16 pm

me neither

swan bella June 17, 2011 at 9:18 am

Google is a new star, twinkle in the sky. It really fast but I set Avant browser as the NO.1 browser in my computer. The developer team should pay more attention to its compatibility.

alvinwriter June 17, 2011 at 6:47 am

Shockwave Flash still crashes with Chrome 12.

Ahmad Alfy June 16, 2011 at 11:35 pm

doesn’t seem to work on dev built 13

Srđan Prodanović June 16, 2011 at 7:23 pm

Long method names that are replaced with short alternates can be fixed with find and replace. But that’s solving “minification”, not obfuscation. Obfuscation can go a lot further to conceal the actual method names.

Roland Boon June 16, 2011 at 4:02 pm

Google keeps adding features to Chrome, but does this in a very sleek way without making the interface bloated with features. As a developer I really like the addition of hardware accelerated 3D CSS Transformations in Chrome 12. This is going to give tons of new possibilities in web development. I worked out an idea that I had for a while, but never thought it was really feasible to build. A folded Google Maps map: http://goo.gl/GQVMU

Najaf Ali June 16, 2011 at 3:01 pm

meh, in dev you shouldn’t be minifying or obfuscating IMO.

Jim Hoskins June 16, 2011 at 2:37 pm

Right now in the Chrome Dev branch (13.0.782.24 dev Mac) this is not done from the context menu like pointed out in this article.

In the toolbar below the script source, there is a button called “Pretty Print” with the icon “{ }” that does the same thing.

yao qq June 16, 2011 at 9:38 am

Google is a new star,twinkle in the sky.It really fast but I set Avant browser as the NO.1 browser in my computer.The developer team should pay more attention to its compatibility.

Exabytes Web Hosting June 16, 2011 at 8:43 am

I only noticed this after reading your post. Chrome automatically upgrade the browser without notifiying and of course the process is smooth without realising it. I could see only the changes of the icon. It looks different.

Khashayar June 15, 2011 at 5:39 am

Finally, @font-face support for unicode fonts.

Joe Dirt June 15, 2011 at 1:28 am

Nah, I’ll stick with Firefox.

BrenFM June 14, 2011 at 8:43 pm

Yah… the page titles have been re-jigged. They now fad out on the far right hand side of the tabs. This means they fade out to almost the same colour as the closing “x” symbol.

Kinda cute, but it kinda did my head in for the first couple of days.

Stjepan June 15, 2011 at 12:34 am

I really hate that

Nimrod June 14, 2011 at 3:29 pm

@James: the de-obfuscate in 13.0.782.20 is the pair of curly braces {} at the bottom left of the dev tools toolbar (right at the very bottom of the Chrome screen); last one, it’s called “Pretty print”.

Nimrod June 14, 2011 at 3:19 pm

There’s a fantastic video presentation from Paul Irish and Pavel Feldman about a lot of the awesome new stuff in the latest version of Chrome dev tools here.
Includes things such as revision history, remote debugging, real time script editing and loads more.

James June 14, 2011 at 2:09 pm

I really love the idea of being able to de-obfuscate javascript, but I have Chrome 13.0.782.20 dev on Mac and it doesn’t appear to have that option in the context menu: http://cl.ly/7c6U

IT Mitică June 14, 2011 at 10:06 am

As always, the work done is not revealed in shiny front icons but noticeable mostly behind the scenes. One must at least acknowledge there is hard work behind a browser, no matter what browser it prefers. I certainly am user enough to give Ch credit where it’s due.

That said, I am placing Ch second in my preferences, and that because some personal developer’s reasons, mainly because of the great add-ons FF world has to offer, and partly because Ch has some old bugs in areas I find to be of the essence, but it never got around fixing them.

If those add-ons were to became browser independent, I’m sure FF would lose many users fast. Ch appeals more to new or inexperienced users because of it’s simplicity.

It appeals to me because of it’s speed, though not enough to make me use it weekly even. I just test in it, to make sure I have Webkit covered, but I prefer FF and Firebug for development and surfing.

The de-obfuscate thing though it’s a pretty good reason to stick to new versions of Ch. I didn’t know this one and I’m pretty sure someday it may save me from further work on my wall in my attempt to recreate the lunar landscape. Thanks Craig.

Paul June 14, 2011 at 7:24 am

There are still bugs with “audio” elements also “required” form attributes, I’d hoped they would of been fixed in v12, gone over to Aurora now, also more reliable considering.

Comments on this entry are closed.