Google Code Playground — инструмент для совместного тестирования примеров на Javascript

Если знание начинают использовать
не по назначению —
это общественно полезное знание.

Прошёл год после открывания публике инструмента Google Code Playground. Времени прошло много, используется он мало. На самом же деле, у него есть всё, чтобы эффективно использоваться не по назначению.

Инструмент предназначен для демонстрации и онлайновой отладки примеров Гугл-кода (JS+HTML+CSS) в браузере. Старательно выложены сотни примеров и написана документация к ним. Сейчас нам всё это будет не нужно, кроме использования самого движка, позволяющего редактировать, тестировать и сохранять не чьи-нибудь, а свои примеры кода.

---

Обнаружилось, что разработка Google Code Playground, сделанная ими «для себя», для своих скриптов, одновременно подходит для тестирования и обмена кодами Javascript на форумах.

Для этого у сервиса есть 3 решающих функции:

1. Окно для изменения кода «на лету». Просто стираем ненужное и пишем своё в правом верхнем фрейме. Если нужно писать HTML и стили — есть кнопка «Edit HTML». Если нужно подставить сторонний код (ту же библиотеку) — пишем в HTML .

2. Фрейм для тестирования в том же окне. Кнопка «Run code" справа и показ в „песочнице“ в нижнем фрейме (iframe).

3. Кнопки „Сохранить код“ („V“--«Save» справа вверху), «Экспорт» (там же) — дают ссылку, которой затем можно поделиться на форуме как результатом.

Под «совместным» тестированием кода в заголовке понимается то, что очень легко посмотреть кем-то опубликованный код в работе, положить его в свою «песочницу» Playground, отредактировать и снова опубликовать под новой ссылкой, которой затем делятся через форум. Если общение более тесное (icq, Wave), то, наверное, будет удобнее тестирование только в «песочнице» и пересылка проверенного кода через окно отправки сообщений. До совместного просмотра «песочницы» тут остался один шаг, но он труден — нужен инструмент синхронизации, поэтому не будем требовать от Playground слишком многого — для этого есть SVN и подобные серьёзные инструменты.

Недостатки:
Нед.1. Оболочка не понимает кириллицу ни в JS, ни в body, несмотря на то, что в коде заявлено по умолчанию <meta http-equiv=»content-type" content=«text/html; charset=utf-8»/> .

Нед.2. Оболочка никак не сообщает об ошибке, а просто повторяет запуск ранее сохранённого кода. Создаётся впечатление, что ничего не изменилось. Поэтому при отладке надо (пока это не исправили, но уже год, как это не исправили) быть очень внимательным, убедиться, что код воспринялся (например, ставить специально новый видимый символ). Особенно трудно иметь в виду, что любая кириллица — это тоже ошибка. Есть временный менее удобный выход — запускать по «Export», и если в адресной строке нет длинного параметра — была ошибка.

Нед.3. В разных браузерах — разная детальность поддержки интерфейса (сравните Оперу и FF3.6). Лучше, конечно, использовать самые поддерживаемые разработчиками браузеры FF3.5+ и Chrome, чтобы не упустить что-либо полезное в интерфейсе. (Но Firebug Lite, похоже, хуже действует в FF.)

Нед.4. «The Playground no longer supports Internet Explorer. Please install the Chrome Frame plugin to use the Playground.» (Playground не поддерживает IE. Однако, все экспортированные страницы можно смотреть в разных браузерах.)

Про сохранение: оно работает, если нет ошибок в коде или недопустимого кода. Сохранение потребует аккаунта и сохранит в специально созданную для Вас папку «Saved Code» в начале списка гугловских примеров. Чтобы код стал общедоступным, а также, чтобы его сохранить без необходимости вхождения в аккаунт, надо нажать «V“--«Export» справа вверху (в Опере не действует).

Например, на месте некоторого кода без входа в аккаунт Google был сохранён простой alert ('dfgrt'). Неизвестно, насколько долго файл будет храниться — посмотрим. Записан 12 февраля 2010.

Продолжим перечисление достоинств.
4. Наличие библиотек в примерах:
  * jQuery
  * jQueryUI
  * MooTools
  * Dojo
  * Prototype Scriptaculous

Запускать код в песочнице для ready и onload надо с учётом наличия оболочки (класса, точнее, хеша) google. Например, вот как удалось вызвать загрузку чего-либо по onload в разделе jQuery (стёрто всё, что было в окне «Edit code», и написано):

google.load("jquery", "1");
google.setOnLoadCallback(
function(){
  alert(1)
});

Техника описана здесь: code.google.com/.../ajavlibs/
Это пишется вместо простого $(function (){alert (1)}); сохранённый пример.

Пробуем использовать стороннюю библиотеку с другого сайта без оболочки google. Нажимаем «Edit HTML» и видим весь HTML для песочницы. Заменяем на свой.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Primer raboty s HTML i jQuery</title>
    <style>
      .under{text-decoration: underline;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
    <script type="text/javascript">
      $(function(){
        a = $('body').html();
        $('body div').html('...567');
        alert([a, $('body').html()]);
        $('body div').html('<b>Primer</b>');
      });
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div class="under" id="content">345...</div>
  </body>
</html>

Экспортированный и сохраненный пример.

Кириллицу использовать по-прежнему ни в какую не получается (при том, что переводчик на русский и многие другие языки в гугловских примерах есть), сменить кодовую страницу на windows-1251 — тоже не помогает. Но возможно полноценно пользоваться библиотекой, скриптами и стилями. Очевидно, без затруднений можно будет пользоваться внешними файлами стилей и изображениями.
Запуск этого примера в Playground выглядит так:

  

Из нерешающих, но важных достоинств в Playground есть:

5. Режим отладки (breakpoints), добавлено в апреле 2009.
6. Firebug Lite в режиме отладки.
7. Код пишется с подсветкой и отступами; отступы чувствуют скобки (но не завершающие теги); если выделена группа строк, нажатие Tab нормализует отступы, комментарии не удаляются и всё цивилизованно. Само собой, есть нумерация строк. Выделение текста мышью для копирования беспроблемно — не захватывает лишнего. Поэтому коды примеров для форумов и общения писать удобнее там, чем в самих форумах, если под рукой нет своего редактора.

Выводы:
1) следует выучить 3 слова «Google Code Playground», чтобы из любого места, где есть интернет, можно было отладить и продемонстрировать работу несложного своего или чужого кода;
2) недопустимость кириллицы — пожалуй, наиболее «сильный» недостаток использования, ограничивающий сферу применения специально написанными короткими примерами. В Сети желательно иметь подобный сервис, но с кириллицей и с неподавлением ошибок скриптов.

Про этот инструмент есть другая короткая заметка: habrahabr.ru/blogs/google/50258/ .