The Chrome Developer Tools team recently launched new features and made several UI changes to improve your development and debugging workflow.
Develop for mobile
Since we launched Chrome for Android, you’ve been able to use Chrome Developer Tools to debug and profile mobile web pages and web apps.
Today, we take this feature one step further by introducing device emulation support in Chrome Developer Tools. Device emulation includes, among other things, native User Agent and dimension overriding. This allows developers to debug mobile browsers on different devices and operating systems via the Settings Menu. So, now, you can emulate the exact device metrics of devices like the Galaxy Nexus and the iPhone to test your media query-driven design.
Profile rendering performance
The Timeline’s Frame Mode feature now allows you to profile Chrome’s rendering performance, remove the jank and deliver the silky smooth performance users expect from your apps. To learn more about this topic, check out the recent "Jank Busters" video from Google I/O.
The console now prints a user-friendly snapshot of the object properties taken at log time, whereas by expanding the object manually, you can still see its live content. This is especially useful when logging an object in a loop and observing its mutation. With this change, we resolved a longstanding bug many of you prioritized on crbug.com.
You can now try new experimental features in Chrome Developer Tools by visiting chrome:flags and enabling them there. Once you do that, a new tab called “Experiments” will be visible in the settings menu, allowing you to enable and use any of the following experiments:
- Snippets (essentially multi-line console on steroids)
- Source mapping support for SASS
- Native memory profiling
- Geolocation / orientation override
- FileSystem inspection
- Canvas inspection
- CPU activity in Timeline
- CSS Regions support
Some of these experimental features are almost ready while others have just landed and need some more refining. In either case, we’d love your feedback before we bake these fully in Chrome Developer Tools. You can also read our recently updated contribution guide if you’re interested in helping us make the tools better.
To get more information on all of Chrome Developer Tools features, check out our “Chrome Developer Tools Evolution” talk at the I/O 2012. You can also follow Google Chrome Developers on Google+ or @ChromiumDev on Twitter for more news on changes landing in Chrome Developer Tools.
The first is a full-featured proxy API, which will, for example, allow users to set different proxy servers for normal browsing and Incognito mode. Proxy auto-config scripts are also supported by the API.
The second -- Web Navigation Extension -- is a bit more expansive. This API will allow devs to build everything from more powerful safe browsing extensions -- like Traffic Light -- to data analysis and reporting extensions.
Both APIs are currently experimental, so you'll need to enable them on the about:flags page to try out any relevant extensions. Apart from a proxy example built by Google and shipped with the Chromium source, we're not aware of any examples just yet, however. We'll let you know when we spot any slick, new extensions which do surface.
Your operating system can run processes in the background -- things like realtime antivirus protection and streaming movies and music around your home -- and so can Google Chrome. Background apps have existed in Chrome and Chromium for some time, but now that the Chrome Web Store is open and its apps are available for installation, Google has posted a blog about why backgrounding is cool.
It's really all about Chrome being your "OS" even if you're using a Windows or Mac computer. With the ability to run Web apps in the background and Native Client support headed to the beta and stable channels in relatively short order, Chrome Web Apps will soon be capable of doing many of the same things your traditional desktop apps can do.
Google's post talks about using backgrounding to issue notifications (as apps like TweetDeck and exfm do) or to prefetch data. There's really no end to the possibilities, and we're exited to see what the next generation of Chrome Web Apps can really do.
Google Checkout payments are now supported, and developers can sign up for a merchant account on their dashboard page. Page previews have now been added -- so you can see how your app will look in the Store prior to publishing. Pages can be customized with header images and Google is also allowing devs to upload their own promotional banners (they'll be displayed when your app is feature in the store).
One downside for developers hoping to sell their apps in the Web Store is that Google Checkout might be the only payment option. Checkout still isn't available in that many countries, so international devs looking to deliver localized Web apps will have to wait for Google to make good on their expansion promises.
ed note: it's become an expected part of app stores, but as you can see in the screenshot the Chrome Web Store will offer recommendations based on what other users install.
I'm not sure when the changes actually landed, but Google has announced that an early implementation of hardware acceleration is now available in developer versions of Chrome 7.
Early testing suggests that performance is still worse than Internet Explorer 9, but the gap has definitely been closed a bit. The '1000 fish test' now clocks in at about 10 frames per second, which is definitely an improvement from last time -- but still some way short of IE9's 45 FPS.
The Chromium blog post says that only some content is being accelerated, so the Fish Tank might not be a fair comparison of the browsers. I'll try to find a better test or benchmark and share my findings later today. You can enable hardware acceleration in Chrome with the --enable-accelerated-compositing flag -- and if you discover anything interesting, please share your findings in the comments!
Update: you might need a nightly build of Chromium to take advantage of this hardware acceleration. It would be nice if Google could explicitly state when the changes were made...
Starting soon, you just might be able to do that. Google OS spotted a new addition to the Chromium browser: an about:labs page. Load it up, and you'll see experimental browser features which you can enable -- like side tabs on Windows and tab expose on Mac.
At least, very soon you'll be able to turn the features on via this page. Right now, it's not functional. Clicking enable on tabs on the left didn't actually activate the feature for me -- I still had to add the --enable-vertical-tabs switch to my shortcut.
The addition of about:labs is a nice touch, and will allow more users to kick the tires on cutting-edge features. That, of course, is a good thing for Google. A larger group of testers should allow them to tackle bugs more quickly and push features from the dev and canary builds to the beta and stable channels even more quickly.
Not yet at least. Work is underway, however, on building sidebars into Chrome's extension API. The awesome ASCII mock up was created by Chrome developer Aaron Boodman, who also references Aza Raskin's Viemo clip of the Mozilla Jetpack sidebar setup.
Persistent sidebars would be a welcome addition for any number of existing Chrome extensions -- like the many social networking, content clipping, and discovery extensions.
Curious what else is being considered for addition? Have a look at the Chromium Extension API Wish List. And before you ask, yes, "downloads" is listed and DownThemAll is given as the use case. I sincerely hope this is next on the list -- Chrome's download
mangler manager is one of my most frequent sources of irritation.
The full sidebar API proposal doc is available after the break -- check it out!
Over the next few days, I'm going to share screenshots and videos from my compile. My build uses the "plain vanilla" x86-generic hardware overlay, and runs reasonably well on my Gateway LT21 netbook. I'm running from a crappy, generic USB flash drive -- and I'm fairly certain the momentary hiccups I experience would go away if I moved to a faster SD card, flash drive, or SSD.
So without further ado, take the jump and have a look at part 1: the boot process!
Before you ask: no, the third developer preview of Internet Explorer 9 doesn't have any window chrome yet. It's still the same skeleton you've seen in the two previous releases.
That said, it's clear that Microsoft is serious about delivering a competitive browser. IE9 preview 3 has turned in better SunSpider and Acid3 results, and its hardware acceleration features really shine. The new release also features HTML5 audio and video support, as well as hardware acceleration for the canvas element. Support for Web fonts is now baked in as well.
Running the fledgling browser side-by-side with Google Chrome 6 I noticed very little difference on sites like Gmail, Facebook, and Google Reader... And good luck getting another browser to run Microsoft's standards-based demos as well as they run in IE9. They're pretty brutal without hardware acceleration (with the exception of Opera 10.60, which actually seems to perform better than Chrome and Firefox -- Sebastian has a video on the way). The SunSpider result has improved again, too, and is now roughly half what the first preview posted -- an impressive gain.
For full details about the new release, check out the official blog post from Microsoft.
Yes, the initial iteration of extension sync was not without its problems. It made Google Chrome a little crashy for some users, but hey -- we're talking about the first go at a brand new feature on an unstable application here. On top of that, it's opt-in and must be enabled via a command line switch. Caveat emptor, right?
Still, the Chrome developer crew wasn't about to take the weekend off and let extension sync continue causing frustration. This morning, a tweak to the extension sync code has landed in the Chromium source code which will "only allow installation of extensions/apps with gallery update URL via download from gallery."
This should help prevent a number of issues -- since sync will now presumably grab extensions using the same method Chrome already used to update your installed extensions. It does, however, mean that sync will only work on extensions you've installed via the official Gallery.
I'm certainly OK with that -- I don't actually use any non-Gallery extensions any more. If you are using some, well... At least you'll be able to sync most of your extensions automatically and Chrome won't crash on you.
Expect to see this one make the jump from Chromium snapshot builds to the Google Chrome dev channel rather quickly.
Many developers know that technically, you can create CSS-only buttons with rounded corners and nice gradients. Since it's often such a hassle, though, they may not bother with it. Button Maker is a tool that takes all of the hassle out of creating buttons for the Web.
Button Maker lets you play with three sliders and some color pickers, and you end up with comprehensive CSS for your button.
At least your extensions don't work for now.
Soon enough you'll have the ability to specify which extensions you want Google Chrome to allow while you browse Incognito. The change has landed in recent Chromium builds, and I have no doubt that we'll see this make the jump to Chrome's developer and beta channels fairly soon.
While it will be nice to have certain extensions available -- like LastPass (so I don't have to type in all my passwords) or ExtensionFM (so I can listen to my music library in the cloud) -- it's important to remember that some extensions may do things that you're trying to avoid during private browsing sessions. In fact, Chrome/Chromium will spawn an alert saying "Chromium cannot prevent this extension from recording your browsing data" when you place a check in the allow box.
For now, you'll need to download a build from the Chromium BuildBot stash to try this out. So far, so good. I haven't experienced any (additional) instability or crashing due to enabling a few extensions in Incognito mode.
The Web Developer add-on for Chrome tries to complement Chrome's already-excellent developer tools (Ctrl-Shift-I) with some in-page hints and tools. The garbled output you see above is the result of selecting Information > Display ID & Class Details. Not very graceful, obviously.
The add-on is missing a screen ruler (I'm sure the developer will add it later). Despite lacking a graceful way to show massive amounts of data, it can still come in handy every now and then. For example, you can disable CSS entirely, or just inline style, browser default styles, etc. That's pretty neat. It's still a fledgling add-on, so don't expect too much. But if you find Chrome's default tools are not enough for you, try giving it a shot.