Monday, April 06, 2009

AJAX APIs Playground Ver. 2

I am very pleased to announce version 2 of the AJAX APIs Playground. For those of you not familiar with it, the Playground is an educational application designed to show interactive code samples for some of Google's coolest Javascript APIs. Of the new changes, the most obvious is the sweet new UI, thanks to help from Roman Nurik of the Google Earth team.

The new features are:
  • * Break points (simulated in Javascript)
  • * Firebug Lite in output for debugging
  • * Line numbers in code editor
  • * Ability to edit HTML of samples

    The breakpoints and Firebug Lite additions are my favorite new features. But why did I include Firebug Lite when all web developers (should!) have Firebug installed? Because when code runs on the Playground, it runs in an iFrame. That iFrame does not have the Firebug object initialized in it. Since it is a cross-domain iFrame, there's no simple way to add Firebug to the iFrame's window object, so adding Firebug Lite was the best approach. This makes it so you can now use all of your favorite Firebug debugging convenience functions in the Playground!

    To use Firebug Lite and breakpoints, simply click on the line number you want to add a breakpoint to and hit "Debug Code". This will insert Firebug Lite into the output and pause the execution on the breakpoint line number until you to click the play button to continue. Try adding a breakpoint to a line, clicking "Debug Code", then opening Firebug Lite and typing in a variable name to inspect the contents/value of the variable at that point in the code.

    Adding breakpoints and forcing Firebug into a local function context were really fun engineering problems, so if you want to check them out (or contribute code to the Playground) go to the open source repository for it, come chat it up on IRC, or talk with me in person at the quickly approaching Google I/O conference (early bird registration runs until May 1).

    Also, it's really important that you share your feedback so that I know what you'd like to see in the next version of the Playground! Thanks, and enjoy the Playground!


    1. The AJAX Playground is the coolest thing - getting play with the API without having to build your playground is brilliant.

      But the new playground doesn't play fair with the Chrome Beta!

      The code editor renders okay at first, but when I click in it bits of code get shifted around so it's totally illegible!

      No problems in IE8 though so I'm afraid it's a Chrome thing.

    2. "LocalSearch with Markers (" in the google code playground website shows the search query for a a LAT and LONG provided in the map setcenter position. What I am trying to do are two things, first let the map find the current location of the user and then show the near by location and also the the search result I want to be able to display it anywhere in the site?
      How would i achieve that? Thanks for the assistance!