При взломе ядра Blockly или разработке плагина игровая площадка становится чрезвычайно полезным инструментом. Он имеет предварительно настроенный экземпляр Blockly, который вы можете использовать для тестирования, отладки или создания прототипов. В Google практически вся разработка Blockly происходит с использованием игровой площадки. В качестве превью — простая игровая площадка на демо-сервере .
Для ядра Blockly существует 3 типа игровых площадок: простые, расширенные и множественные. В блочных выборках обычно используется только расширенная игровая площадка.
Предварительные условия
Blockly теперь использует систему модулей Closure. Из-за способа загрузки некомпилированные модули Closure должны быть получены из URL-адреса http: или https: и не могут быть получены непосредственно из URL file: :. Следовательно, чтобы загрузить игровую площадку в некомпилированном режиме, необходимо загрузить ее с локального веб-сервера.
Мы создали скрипт, который запускает локальный сервер и загружает весь код, необходимый для загрузки модулей Blockly. Вам нужно будет установить npm на свой компьютер и запустить npm install из корня Blockly, чтобы установить все зависимости.
Использование Интернет Эксплорера
Blockly теперь использует в своей кодовой базе расширенные функции, которые могут быть несовместимы с Internet Explorer. В сжатом (скомпилированном) коде эти функции передаются для работы с IE, однако загрузка несжатого кода может не работать. Если вы загружаете игровую площадку в IE, даже через локальный http-сервер, игровая площадка автоматически загрузит сжатый код Blockly, чтобы обеспечить совместимость. Подробнее о тестировании изменений игровой площадки в сжатом режиме см. в разделе «Непосредственный доступ к игровым площадкам».
Простая игровая площадка
Простая игровая площадка — это то, на чем основаны две другие игровые площадки. Он отображает панель инструментов и рабочую область и позволяет настраивать ограниченное количество параметров.
Чтобы открыть игровую площадку, запустите
npm run start
из корня Blockly. Убедитесь, что порт 8080 больше ничего не прослушивает. Эта команда запустит сервер, на котором размещены модули Blockly, и автоматически откроет ваш браузер на странице игровой площадки. Когда вы будете готовы выключить игровую площадку, завершите процесс (ctrl-c в средах Mac и Linux).
Детская площадка оснащена:
- Весь код несжат для быстрой разработки.
- Все блоки по умолчанию (кроме некоторых устаревших).
- Все генераторы языков (JavaScript, Python, PHP, Lua и Dart).
- Сериализация и десериализация состояния рабочей области (JSON или XML).
- Переключение между макетами LTR и RTL.
- Переключение между макетами панели инструментов.
- Стресс-тесты для рендерера.
- Регистрируйте все события в консоли.
Продвинутая игровая площадка
Расширенная игровая площадка содержит дополнительные функции, которые еще больше упрощают отладку Blockly. Это также игровая площадка по умолчанию, используемая в блочных сэмплах для всех плагинов.
Эта игровая площадка оснащена всеми простыми функциями игровой площадки, а также:
- Можно настроить дополнительные параметры, такие как размер сетки, элементы управления масштабированием/перемещением, средство рендеринга, тему и многое другое.
- Используемые настройки и блоки кэшируются и используются автоматически при следующей загрузке игровой площадки.
- Смотрите выходные данные каждого генератора в одном окне.
Чтобы запустить расширенную игровую площадку для любого плагина в блочных образцах, запустите npm run start из корневого каталога плагина. В настоящее время одновременно может работать только один плагин, и он использует порт 3000. Если у вас возникли проблемы с запуском плагина, сначала убедитесь, что этот порт больше никто не прослушивает.
Чтобы запустить расширенную игровую площадку в ядре, запустите npm run start из корня Blockly, а затем нажмите ссылку «Дополнительно» под заголовком.
Вы также можете создать свою собственную тестовую страницу, включающую расширенную игровую площадку, используя пакет инструментов разработчика Blockly .
Мульти игровая площадка
Мультиплейдер содержит несколько игровых площадок в разных конфигурациях для режима LTR и расположения ящика с инструментами. В основном это используется для быстрой проверки того, что Blockly не нарушил ничего, связанного с LTR, перед выпуском. Чтобы открыть эту игровую площадку, выполните действия для простой игровой площадки, а затем измените URL-адрес на /tests/multi_playground.html .
Тестирование изменений
При запуске любой из игровых площадок с локального сервера все, что вам нужно сделать, чтобы увидеть ваши изменения в Blockly, в большинстве случаев — это обновить страницу. Если вы добавили новый файл или добавили новую зависимость к файлу, вам может потребоваться сначала запустить npm run build , которая обновит файл test/deps.js , чтобы убедиться, что зависимости загружены правильно, а затем обновите страницу.
Если вы используете расширенную игровую площадку плагина, вам даже не нужно обновлять страницу. Изменения загружаются автоматически!
Прямой доступ к игровым площадкам
Раньше к простой игровой площадке можно было получить доступ локально путем прямого перехода к файлу test/playground.html в браузере. Это по-прежнему возможно с простыми игровыми площадками и игровыми площадками с несколькими игровыми площадками, но это больше не рекомендуется. Если вы это сделаете, игровая площадка обнаружит, что вы не используете локальный сервер, и автоматически будет использовать сжатые файлы Blockly (дополнительную информацию см. на странице «Создание Blockly» ), и всякий раз, когда вы меняете что-то в ядре Blockly, вам придется пересобирать ядро и сцену. изменения. Вы по-прежнему можете получить доступ к этим страницам, если они размещены на удаленном сервере, как в нашем примере, размещенном на нашем демонстрационном сайте. Фон будет ярко-синим, когда вы находитесь в сжатом режиме.
Расширенная игровая площадка недоступна через file: доступ.