Apply a Custom Theme to Your Chrome Inspector

Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the “theme” or “brush” of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript

http://darcyclarke.me/design/skin-your-chrome-inspector/

I personally love dark backgrounds, and found this theme pretty great:
https://gist.github.com/bentruyman/1150520
Except that when you Edit as HTML, the font disappears as black-on-black. From the comments, this bit fixes the problem:
#elements-content .editing,
#elements-content .editing *,
#elements-content .child-editing {
background-color: white !important;
color: black !important;
display: block;
}

Device Debugging Options

An extremely thorough guide to being able to debug Android devices via a USB connection. Which of course requires you to download and install the Android Developer SDK, install Chrome on your Android device, and then of course, this all only works on Android devices…
http://www.html5rocks.com/en/mobile/profiling/

So, while not a full debugging suite, Steve Souders offers instructions for at least being able to create waterfall charts for mobile pages, which is useful for finding and debugging performance hiccups.
http://www.stevesouders.com/blog/2013/03/26/mobile-waterfalls/

And speaking of debugging, think you know Chrome DevTools? Well, take a class and find out…
http://blog.chromium.org/2013/03/discover-chrome-devtools-our-new.html

Save Bandwidth with webP

We’re not there yet, but hopefully soon!
http://www.brucelawson.co.uk/2013/save-bandwidth-webp-with-fallback/

Basically, the image format, webP, has a far-better compression rate than any other existing image format, but it isn’t widely supported yet. There is also a new CSS background-image spec coming that allows developers to do something like this:
background-image: image("whatever.webp" format('webp'), "whatever.jpg");
* Note the use of image not url.

Again, not ready yet, but coming. Cool.

CSS animations off the UI thread

Now appearing in Desktop Safari, iOS Safari, and Android Chrome, CSS transforms is no longer part of the UI thread, meaning such animations will not be affected by an overloaded CPU!
http://www.phpied.com/css-animations-off-the-ui-thread/

Check-out the test page, I can confirm:

  • All three animations are smooth on my desktop Chrome, and all three stop when I click the Kill Switch (desktop Chrome does not yet support this).
  • The CSS Transform animations are smooth as butter on my iOS6.2, but the margin animation is really choppy; and that choppy animation immediately stops when I click the Kill Switch…

Fantastic stuff, and nothing new for us to do (if you’ve hopefully, been animating correctly), users with supported browsers will simply get a much better experience!

Data Compression in Chrome Beta for Android

I guess websites weren’t activating SPDY on their servers fast enough for Google’s taste…

This release also introduces an experimental data compression feature that will yield substantial bandwidth savings. This feature is powered by a connection to a SPDY proxy running on Google’s servers, paired with content optimization performed by our open-source PageSpeed libraries, specifically tuned for Chrome Beta on Android.

http://blog.chromium.org/2013/03/data-compression-in-chrome-beta-for.html

Does WebRTC Make Skype Useless?

Google Chrome and Mozilla Firefox recently held a video call using nothing but two web browsers and WebRTC (Real-Time Communications):
http://www.favbrowser.com/webrtc-just-became-usable/

Does this replace the need for Skype??

Here are a few other resources on the subject:

Introduction to JavaScript Source Maps

Ever tried to find a bug in minified or obfuscated code?  Whether it is HTML, CSS or JS, it is a serious pain.  Until JS Source Maps appeared, that is…
http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/

The article is thorough (read: a little long, for some), so here is a demo:

  • Go here: http://www.thecssninja.com/demo/source_mapping/
  • Right click something in the obfuscated code and click the “Get original location” link that appears
  • Be amazed at what appears in the text box above the obfuscated code…

How does this voodoo work??

  1. Two requirements: 1) Use Google’s Closure compiler to combine/minify/obfuscate your JS files, and 2) Debug using Google Chrome (currently only Canary, with the “Enable source maps” setting checked).
  2. Closure compiler, let’s you set a flag to create a Source Map file.
  3. A Source Map file is created and place on your server beside your minified JS file.
  4. A comment is added to your minified JS file telling Chrome that the Source Map file exists, and where to find it.
  5. When you click that “Get original location” link, the Source Map file is fetched and the look-up is done.

Not completely ready for prime-time just yet, but coming soon!