WebIDE

Эта статья нуждается в редакционном обзоре. Как вы можете помочь.

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

WebIDE даёт вам возможность запускать и выполнять отладку веб-приложений, используя Симулятор Firefox OS или реальное устройство, работающее на Firefox OS.

Она представляет собой среду разработки, в которой можно создавать и редактировать приложения для Firefox OS. WebIDE удобно отображет файлы проекта в древовидной структуре, что обеспечивает легкий доступ к файлам для их последующего редактирования и сохранения. В дополнение прилагается пара шаблонов для быстрого старта.

Для начала настройте среду выполнения в WebIDE. Среда выполнения — это окружение, в котором вы сможете запускать и/или выполнять отладку приложения. Среда исполнения может быть реальным устройством, работающим под Firefox OS и подключенным к персональному компьютеру через USB (или по Wi-Fi, начиная с Firefox 39), или это может быть Симулятор Firefox OS, установленный на компьютере.

Затем создайте или откройте существующее приложение. Если вы создаете новое приложение, то можете выбрать один из шаблонов. Это может быть шаблон с минимальной конфигурацией, включающий только базовый набор файлов, необходимых для разработки, либо расширенный, который содержит примеры использования специфического API. WebIDE покажет файлы проекта в виде дерева, и вы можете редактировать и сохранять их во встроенном редакторе. Конечно, совсем необязательно использовать встроенный редактор: можно разрабатывать приложение и во внешней среде разработки, используя WebIDE как дебаггер.

В завершение установите приложение в одну из сред выполнения и запустите его. Затем откройте стандартный набор иструментов разработчика - Инспектор, Веб-консоль, Отладчик JavaScript и так далее — и можете начать изучать и изменять запущенное приложение.


Запуск WebIDE
Как открыть WebIDE из Firefox.
Настройка сред выполнения
Как подключиться к среде выполнения, в которой вы можете устанавливать приложения в устройства на Firefox OS, на симулятор Firefox OS, и на Firefox для Android.
Создание и редактирование приложений
Как создавать, открывать, и разрабатывать приложения, используя WebIDE.
Меню среды выполнения
Выбрав среду выполнения, используйте меню, чтобы получить информацию о среде выполнения и о его приложениях, изменять настройки, или сделать снимок.
Запуск и отладка приложений
Как установить приложения в среду выполнения и отлаживать их, используя Инструменты разработчика Firefox.
Работа над приложениями Cordova в WebIDE
начиная с Firefox версии 39, вы можете редактировать и отлаживать приложения Cordova, используя WebIDE.
Устранение неполадок
Помощь с проблемами с WebIDE, в особенности с проблемами подключения к среде выполнения.

Чтобы разрабатывать и отлаживать приложения с помощью WebIDE, всё что вам нужно — это Firefox версии 33 или новее. Чтобы протестировать на реальном устройстве работающем под Firefox OS, вам потребуется устройство с Firefox OS 1.2 или новее и USB кабель.

WebIDE совместима только с Firefox OS 1.2 или новее.

Установка среды исполнения

Среды исполнения в списке "Select Runtime" (Выбрать среду исполнения), сгруппированы в 3 секции:

  • USB устройства: Firefox OS устройства, подключенные через USB
  • Симуляторы: установленные и зарегистрированные экземпляры Firefox OS Симулятора
  • Особые настройки: воспользуйтесь этим пунктом, чтобы подключиться к WebIDE с помощью произвольного имени и порта.

Если вы впервые установили и настроили WebIDE, то вы возможно не увидите сред исполнения в списке:

Оставшаяся часть главы описывает, как добавить несколько сред исполнения.

Соединение с устройством Firefox OS

Перед тем как установить соединение с устройством Firefox OS, требуется предварительно проделать некоторые действия:

  • проверьте вашу версию Firefox OS: убедитесь, что на вашем устройстве запущена Firefox OS 1.2/Boot2Gecko 1.2 или более свежая версия. Чтобы узнать версию установленной Firefox OS, откройте меню Настройки (Settings) на устройстве, затем перейдите в Device Information(Информация об устройстве) > Software(Програмное обеспечение). Если у вас установлена старая версия, но у вас Geeksphone, то обновите ваше программное обеспечение, следуя нашему руководству.
  • активируйте удаленную отладку: в приложении Settings (Настройки),  пройдите в Device information (Информация об устройстве) > More information (Дополнительная информация)> Developer(Разработка). Если элемент Удаленная Отладка (Remote Debugging) — это обыкновенный флажок, то нажмите на него, чтобы активировать. Если устройство дополнительно спросит активировать только "ADB", или "ADB and DevTools", выберите "ADB and DevTools".
  • отключите блокировку экрана на устройстве: в приложении Настройки (Settings) пройдите в меню к Screen Lock (Блокировка Экрана) и уберите флажок с Lock Screen (Блокировать Экран). Это облегчит вам работу, поскольку при блокировке экрана соединение с телефоном разрывается и процесс отладки приложения прервётся.
  • Только для пользователей Linux: добавьте файл с правилами udev , как указано в документации на шаге 3 руководства по настройке устройств на Андроид. Атрибут idVendor для Geeksphone имеет значение "05c6", а здесь можно найти список других значений idVendor.
  • Только для пользователей Windows: вам потребуется установить драйвера, как указано в документации на шаге 3 руководства по настройке устройств на Андроид. Вы сможете найти драйвера для устройств Geeksphone на сайте Geeksphone. Windows 8 по умолчанию не позволит вам установить неподписанные драйвера. Обратитесь к статье "Как установить неподписанные драйвера в Windows 8".
  • отключите все другие Андроид устройства: убедитесь что у вас нет других Андроид устройств, подключенных к компьютеру.

Теперь подсоедините устройство к компьютеру с помощью USB. Вы должны увидеть ваше устройство в подгруппе "USB DEVICES" (USB Устройства):

Исправление ошибок

Если вы не видите ваше устройство, то попробуйте следующее:

  1. включите логирование:
    1. откройте about:config, и добавьте новый параметр .console.logLevel/ Присвойте ему строковое значение all.
    2. в Менеджере Дополнений отключите и снова включите дополнение ADB Helper.
    3. Откройте Консоль Браузера и вы увидите в сообщения начинающиеся с adb. Если смысл сообщений вам непонятен, то попросите помощи.
  2. где можно попросить помощи: зайдите на #devtools чат IRC, и мы постараемся вам помочь.
  3. отредактируйте asb_usb.ini: если команда "adb devices" выводит пустой список даже когда телефон подключен и разблокирован, то можно попробовать отредактировать adb_usb.ini.

Добавление Симулятора Firefox OS

Симулятор 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 Симулятора.

Вы можете установить сколько угодно версий Симулятора. Но будьте терпеливы — Симуляторы имеют большой объем, и поэтому их загрузка может занять продолжительное время. Как только вы установили Симуляторы, они появятся в меню Среды Исполнения:

Чтобы узнать больше о Симуляторах, просмотрите документацию к ним.

Custom runtimes

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.

Шорткаты редактора кода

Эта таблица перечисляет умолчательные клавиатурные сокращения для редактора исходного кода.

Вместо них в разделе Настройки редактора настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.

Для этого откройте страницу about:config, выберите настройку devtools.editor.keymap и присвойте ей значение "vim", "emacs" или "sublime". Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.

Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе Настройки редактора настроек инструментов разработчика и вы можете установить её там вместо ручного редактирования about:config.

  Windows OS X Linux
Перейти к строке Ctrl + J Cmd + J Ctrl + J
Найти в файле Ctrl + F Cmd + F Ctrl + F
Найти далее Ctrl + G Cmd + G Ctrl + G
Выделить всё Ctrl + A Cmd + A Ctrl + A
Вырезать Ctrl + X Cmd + X Ctrl + X
Копировать Ctrl + C Cmd + C Ctrl + C
Вставить Ctrl + V Cmd + V Ctrl + V
Отменить Ctrl + Z Cmd + Z Ctrl + Z
Повторить Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
Отступ Tab Tab Tab
Убрать отступ Shift + Tab Shift + Tab Shift + Tab
Переместить строки вверх Alt + вверх Alt + вверх Alt + вверх
Переместить строки вниз Alt + вниз Alt + вниз Alt + вниз
За-/раскомментировать строки Ctrl + / Cmd + / Ctrl + /

Автодополнение кода

Редактор имеет функцию автодополнения кода CSS и JavaScript. Для CSS автодополнение всегда включено:

Чтобы открыть подсказки автодополнения для JavaScript, нажмите Control + Space:

Встроенная документация

Редактор также может показывать встроенную документацию к JavaScript. Нажмите Shift + Space, чтобы увидеть всплывающее окно с документацией к объекту, на котором находится курсор:

Нажатие на ссылку [docs] в окне с документацией перенаправит вас на страницу с MDN с описанием объекта, к которому требуется дополнительная документация.

Запуск и отладка приложений

Когда вы готовы к запуску приложения, то выберите среду исполнения из меню "Выбрать среду исполнения" (Select Runtime). Если у вас еще нет ни одной зарегистрированной среды исполнения, то узнайте, как можно это сделать, в главе Настройка среды исполнения.

  • Если вы выбрали Симулятор, WebIDE запустит его.
  • Если вы выбрали устройство Firefox OS, WebIDE соединится с устройством. На устройстве появится диалог, который попросит подтверждения того, что вы желаете установить соединение: нажмите "ДА" (OK).

Теперь две вещи изменились. Во-первых, в меню Среды Исполнения появилось 3 дополнительных пункта:

  • информация о текущей среде исполнения;
  • таблица, содержащая список разрешений приложения в активной среде исполнения, в которой указан каждый API и каждый тип приложения, доступ к которому разрешен (✓), запрещен (✗), или разрешение будет запрошено у пользователя (!);
  • команда, позволяющая сделать скриншот с экрана среды исполнения.

Во-вторых, кнопка "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:


Как бы там ни было, чтобы запустить отладку подписанного приложения на реальном устройстве:

  • устройство должно работать под сборкой Firefox OS версии 1.2+;
  • вы должны активировать отладку подписанных приложений.

Чтобы активировать отладку подписанных приложений, проделайте следующие операции:

  1. На своем компьютере откройте терминал/консоль и выполните команду, чтобы войти на файловую систему устройства через шел:
    adb shell

    Приглашение в терминале должно измениться на root@android.

  2. Следующий шаг — остановите B2G:

    stop b2g
  3. Смените текущую директорию:

    cd /data/b2g/mozilla/*.default/
  4. Добавьте следующую строку в файл prefs.js :

    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    
  5. Перезапустите B2G:

    start b2g
  6. Выйдите из файловой системы Андроида с помощью команды exit; это вернет вас в ваш обычный терминал и вы увидите стандартное приглашение командной строки.

Теперь в WebIDE доступны все подписанные приложения на вашем устройстве.

 

 

Метки документа и участники

 Внесли вклад в эту страницу: ukhryab, ruslan_g02, Aleksej, LumenGNU, uleming
 Обновлялась последний раз: ukhryab,