Chrome Developer Tools: Back to Basics

It’s been an exciting past few months in the Google Chrome Developer Tools world as we keep adding new features, while polishing up existing ones to respond to your feedback.

One of the areas we have focused a lot of our energy is on network instrumentation. Recently we’ve made many improvements that will hopefully improve your experience when using Chrome Developer Tools. These improvements include:

  • Network aspects of your web page are now inspected in the Network panel. This gives you access to even more information at a single glance. You can sort and clear data, preserve log information upon navigation and even export network data into HAR format.
  • All the timing information about your resource loads now comes from the network stack, not WebKit, so timing information now adequately represents raw network timing. You can see detailed timing for different phases of the loading by hovering over the log entry.

  • We now push raw HTTP headers and status messages into Chrome Developer Tools. As a result, you now see precisely what the browser received from the server and not just how the rendering engine interpreted that information.
  • Similarly to the old Resources panel, you can see syntax-highlighted resource contents.

We’ve also made CSS editing a whole lot easier. In particular, you’ll now find separate fields for property names and values instead of a single field for both. As you type, you will see suggestions of available keywords for property values.


But that’s only the tip of the iceberg. Similar to the changes in the network panel, the CSS sidebar now shows the raw information that the browser gets from the server – not the rendering engine’s interpretation of the information. As a result, you can use Chrome Developer Tools to see CSS properties that are not recognized by WebKit (e.g., engine-specific or simply erroneous properties). This finally puts an end to the nightmare of disappearing invalid properties.


For a more complete reference on working with the Chrome Developer Tools, check out our new home page. The CSS improvements that we implemented upstream in WebKit are further described in our WebKit blog post. And for even more tips on how to use Chrome Developer Tools, watch the new video below.

The map markers! They move!

Maps API v2 had a built in animation that raised and bounced the marker when it was being dragged. When we looked into adding this feature to Maps API v3 we decided to go a step further and give developers more options for animating markers.

In addition to adding the drag animation offered in v2 we are today releasing two new marker animations that developers can trigger. Firstly there is BOUNCE which simply bounces a marker indefinitely to draw attention to it. The other is DROP which adds a marker to the map by dropping it from above with a small bounce.

We rely on a combination of JavaScript and CSS animations to ensure smooth motion across all devices, which was particularly challenging for the DROP animation, as it has a very short duration with a lot of movement. As a consequence this is the first feature we have launched that is not compatible with IE6 since we ended support for that browser (markers still appear in IE6 and can be dragged, but do not animate).

For more details on how to trigger animations check the documentation. While you are there you may notice that the MaxZoom service, which allows you to determine the maximum zoom level of satellite imagery available at a given location, is also now available in Maps API v3.

As always, if you have any questions about these features, or any other aspect of Maps API v3 development, we recommend that you post to the Google Maps API v3 Forum.

Optimizing your site for TV is now easier

Ever since we launched Google TV last October, we’ve seen web developers optimize their sites for TV with amazing results. However, designing a 10 foot UI and implementing controls optimized for the television is still a foreign concept for most web developers. Understanding that challenge, we’re happy to release new templates and a UI library to make it easy for developers to optimize their sites for TV.

Google TV comes with the Chrome browser that supports familiar technologies such as HTML5, JavaScript, CSS and Flash. Keeping this in mind, we have created two template designs in HTML5 and Flash that are focused on delivering video content, but equally suitable for photos or other multimedia:

For those developers who prefer to design their own 10 foot UI, we’ve created the Google TV Web UI Library to enable TV friendly controls such as D-pad (up, down, left, right) navigation. To accommodate different web developers needs, the Google TV Web UI Library is provided in 2 different flavors; jQuery based and Closure based. Get started by downloading the library and reading the documentation and tutorials.

Both the templates and the library are available under the Apache 2 license. As always, we love to hear your feedback. Please post comments and questions on the library and templates to our Google TV Web Developer Forum. Happy coding!