Оставшаяся часть главы описывает, как добавить несколько сред исполнения.WebIDE даёт вам возможность запускать и выполнять отладку веб-приложений, используя Симулятор Firefox OS или реальное устройство, работающее на Firefox OS.
Она представляет собой среду разработки, в которой можно создавать и редактировать приложения для Firefox OS. WebIDE удобно отображет файлы проекта в древовидной структуре, что обеспечивает легкий доступ к файлам для их последующего редактирования и сохранения. В дополнение прилагается пара шаблонов для быстрого старта.
Для начала настройте среду выполнения в WebIDE. Среда выполнения — это окружение, в котором вы сможете запускать и/или выполнять отладку приложения. Среда исполнения может быть реальным устройством, работающим под Firefox OS и подключенным к персональному компьютеру через USB (или по Wi-Fi, начиная с Firefox 39), или это может быть Симулятор Firefox OS, установленный на компьютере.
Затем создайте или откройте существующее приложение. Если вы создаете новое приложение, то можете выбрать один из шаблонов. Это может быть шаблон с минимальной конфигурацией, включающий только базовый набор файлов, необходимых для разработки, либо расширенный, который содержит примеры использования специфического API. WebIDE покажет файлы проекта в виде дерева, и вы можете редактировать и сохранять их во встроенном редакторе. Конечно, совсем необязательно использовать встроенный редактор: можно разрабатывать приложение и во внешней среде разработки, используя WebIDE как дебаггер.
В завершение установите приложение в одну из сред выполнения и запустите его. Затем откройте стандартный набор иструментов разработчика - Инспектор, Веб-консоль, Отладчик JavaScript и так далее — и можете начать изучать и изменять запущенное приложение.
Чтобы разрабатывать и отлаживать приложения с помощью WebIDE, всё что вам нужно — это Firefox версии 33 или новее. Чтобы протестировать на реальном устройстве работающем под Firefox OS, вам потребуется устройство с Firefox OS 1.2 или новее и USB кабель.
WebIDE совместима только с Firefox OS 1.2 или новее.
Среды исполнения в списке "Select Runtime" (Выбрать среду исполнения), сгруппированы в 3 секции:
Если вы впервые установили и настроили WebIDE, то вы возможно не увидите сред исполнения в списке:
Оставшаяся часть главы описывает, как добавить несколько сред исполнения.
Перед тем как установить соединение с устройством Firefox OS, требуется предварительно проделать некоторые действия:
Device Information(Информация об устройстве) > Software(Програмное обеспечение). Если у вас установлена старая версия, но у вас Geeksphone, то обновите ваше программное обеспечение, следуя нашему руководству.Device information (Информация об устройстве) > More information (Дополнительная информация)> Developer(Разработка). Если элемент Удаленная Отладка (Remote Debugging) — это обыкновенный флажок, то нажмите на него, чтобы активировать. Если устройство дополнительно спросит активировать только "ADB", или "ADB and DevTools", выберите "ADB and DevTools".Screen Lock (Блокировка Экрана) и уберите флажок с Lock Screen (Блокировать Экран). Это облегчит вам работу, поскольку при блокировке экрана соединение с телефоном разрывается и процесс отладки приложения прервётся. udev , как указано в документации на шаге 3 руководства по настройке устройств на Андроид. Атрибут idVendor для Geeksphone имеет значение "05c6", а здесь можно найти список других значений idVendor.Теперь подсоедините устройство к компьютеру с помощью USB. Вы должны увидеть ваше устройство в подгруппе "USB DEVICES" (USB Устройства):
Если вы не видите ваше устройство, то попробуйте следующее:
adb. Если смысл сообщений вам непонятен, то попросите помощи.Симулятор Firefox OS is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.
Это означает, что в большинстве случаев вам не требуется настоящее устройство, чтобы тестировать и выполнять отладку ваших приложений.
Симулятор имеет большой объем, поэтому он не встроен в Firefox, а поставляется как плагин. Если вы нажмёте "Установить Симулятор" (Install Simulator) в меню Среды Исполнения, вас перенаправит на страницу, с которой можно установить различные версии Firefox OS Симулятора.
Вы можете установить сколько угодно версий Симулятора. Но будьте терпеливы — Симуляторы имеют большой объем, и поэтому их загрузка может занять продолжительное время. Как только вы установили Симуляторы, они появятся в меню Среды Исполнения:
Чтобы узнать больше о Симуляторах, просмотрите документацию к ним.
With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.
Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.
This is convenient, but sometimes you need to manage ADB directly, because you have your own custom port forwarding, and in this case you need to set up a custom runtime. For example, you can connect a Firefox for Android device using adb, then set up port forwarding from that device, then use the port number in a custom runtime to connect WebIDE to it.
В списке меню «Открыть приложение» (Open App) есть 3 опции: «Создать новое приложение», «Открыть упакованное приложение» и «Открыть приложение на удаленном хосте»:
Выберите "Создать Приложение... " (New App...), чтобы создать новое приложение. Откроется диалог, предлагающий выбрать между двумя шаблонами "Пустое Приложение" (Privileged Empty App) и "Приложение Образец" (Privileged App).
Оба шаблона взяты из колекции шаблонов Mortar, и оба предоствавляют базовую структуру для начала разработки приложения. "Приложение Образец" (Privileged App) показывает, как приложение может использовать разрешения для загрузки контента с удаленного источника.
Выбрав шаблон, введите имя приложения и выберите директорию, в которую следует сохранить файлы, после чего новое приложение откроется в редакторе проекта.
Выберите "Открыть Упакованное Приложение" (Open Packaged App...), чтобы открыть упакованное приложение. Затем укажите директорию, в которой содержится манифест приложения, и оно откроется в редакторе проекта.
Выберите "Открыть Удаленное Приложение" (Open Hosted App...), затем укажите ссылку (URL) на манифест приложения, и приложение откроется в редакторе проекта.
Редактор проекта предлагает удобное окружение для разработки приложений. Слева можно увидеть файловую структуру проекта в виде дерева, а справа панель редактора. Вы можете добавлять и удалять файлы, используя контекстное меню.
WebIDE автоматически проверяет манифест на наличие определенных общих ошибок. Если она найдет ошибку, то укажет, что в приложении имеются проблемы, а также даст более детальное описание проблемы:
WebIDE использует редактор кода CodeMirror.
{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}
Редактор имеет функцию автодополнения кода CSS и JavaScript. Для CSS автодополнение всегда включено:
Чтобы открыть подсказки автодополнения для JavaScript, нажмите Control + Space:
Редактор также может показывать встроенную документацию к JavaScript. Нажмите Shift + Space, чтобы увидеть всплывающее окно с документацией к объекту, на котором находится курсор:
Нажатие на ссылку [docs] в окне с документацией перенаправит вас на страницу с MDN с описанием объекта, к которому требуется дополнительная документация.
Когда вы готовы к запуску приложения, то выберите среду исполнения из меню "Выбрать среду исполнения" (Select Runtime). Если у вас еще нет ни одной зарегистрированной среды исполнения, то узнайте, как можно это сделать, в главе Настройка среды исполнения.
Теперь две вещи изменились. Во-первых, в меню Среды Исполнения появилось 3 дополнительных пункта:
Во-вторых, кнопка "play" в центре панели инструментов WebIDE теперь активна: нажмите на неё, чтобы установить и запустить приложение в выбранной среде исполнения:
Чтобы включить отладку приложения, нажмите кнопку "Приостановить" (Pause) — появится Панель Разработчика, соединённая с вашим приложением:
В зависимости от среды исполнения список доступных инструментов может изменяться, однако как минимум будут доступны базовые инструменты: Инспектор, Консоль, Дебаггер JavaScript, Редактор Стилей, Профайлер and Скратчпад. Как и при работе с веб страницами, любое сделанное вами изменение немедленно отобразится в приложении, но при перезапуске приложения изменения не сохраняются. И наоборот, любые сделанные вами изменения в редакторе можно сохранить сразу на диск, но они станут видимыми только после рестарта приложения.
With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:
Как бы там ни было, чтобы запустить отладку подписанного приложения на реальном устройстве:
Чтобы активировать отладку подписанных приложений, проделайте следующие операции:
adb shell
Приглашение в терминале должно измениться на root@android.
Следующий шаг — остановите B2G:
stop b2g
Смените текущую директорию:
cd /data/b2g/mozilla/*.default/
Добавьте следующую строку в файл prefs.js :
echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
Перезапустите B2G:
start b2g
Выйдите из файловой системы Андроида с помощью команды exit; это вернет вас в ваш обычный терминал и вы увидите стандартное приглашение командной строки.
Теперь в WebIDE доступны все подписанные приложения на вашем устройстве.