mozilla
Your Search Results

    WebIDE

    This translation is incomplete. Please help translate this article from English.

    WebIDE доступна только начиная с 33 версии Firefox.

    WebIDE это замена  Менеджеру Приложений (App Manager). Как и Менеджер Приложений (App Manager), она дает вам возможность выполнять и выполнять отладку приложений для Firefox OS с помощью симулятора Firefox OS или реального устройства работающего на Firefox OS.

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

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

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

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

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

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

    Запуск WebIDE

    На данный момент WebIDE скрыта в настройках. Чтобы сделать ее доступной откройте about:config, найдите параметр devtools.webide.enabled и установите его значение в true. Теперь в меню Веб Разработка (Web Developer) появится новое подменю WebIDE. Нажмите на него и вы увидите как откроется WebIDE:Ниспадающий список слева с надписью "Открыть Приложение" (Open App) позволит открыть уже существующее приложение или создать новое. Ниспадающий список справа с надписью "Выбрать Среду Исполнения" (Select Runtime) позволит вам выбрать среду исполнения или установить и настроить новую..

    Кнопки посередине "запустить", "остановить" и "отладка" приложения активны только когда уже открыто какое то приложение и выбрана среда исполнения для него.

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

    Среды исполнения в списке "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 (Блокировать Экран). Это облегчит вам работу поскольку при блокировке экрана соединение с телефоном разрывается и процесс отладки приложения прервется.
    • Только для линукс пользователей: добавьте файл с правилами 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.

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

    This table lists the default shortcuts for the source editor.

    You can choose to use Vim or Emacs key bindings instead. To select these, visit about:config, select the setting devtools.editor.keymap, and assign "vim" or "emacs" to that setting. If you do this, the selected bindings will be used for all the developer tools that use the source editor. You need to reopen the editor for the change to take effect.

    From Firefox 31, you can choose Sublime Text key bindings as well by assigning "sublime" to the devtools.editor.keymap setting.

      Windows Mac OS X Linux
    Go to line Ctrl + J Cmd + J Ctrl + J
    Find in file Ctrl + F Cmd + F Ctrl + F
    Find again Ctrl + G Cmd + G Ctrl + G
    Select all Ctrl + A Cmd + A Ctrl + A
    Cut Ctrl + X Cmd + X Ctrl + X
    Copy Ctrl + C Cmd + C Ctrl + C
    Paste Ctrl + V Cmd + V Ctrl + V
    Undo Ctrl + Z Cmd + Z Ctrl + Z
    Redo Ctrl + Shift + Z / Ctrl + Y Cmd + Shift + Z / Cmd + Y Ctrl + Shift + Z / Ctrl + Y
    Indent Tab Tab Tab
    Unindent Shift + Tab Shift + Tab Shift + Tab
    Move line(s) up Alt + Up Alt + Up Alt + Up
    Move line(s) down Alt + Down Alt + Down Alt + Down
    Comment/uncomment line(s) 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 доступны все подписанные приложения на вашем устройстве.

     

     

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

    Contributors to this page: uleming
    Обновлялась последний раз: uleming,