diff options
Diffstat (limited to 'files/ru/tools/webide/index.html')
| -rw-r--r-- | files/ru/tools/webide/index.html | 252 |
1 files changed, 0 insertions, 252 deletions
diff --git a/files/ru/tools/webide/index.html b/files/ru/tools/webide/index.html deleted file mode 100644 index f8c0ab40fd..0000000000 --- a/files/ru/tools/webide/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -title: WebIDE -slug: Tools/WebIDE -tags: - - Apps - - Firefox OS - - WebIDE - - tool - - Отладка - - инструменты -translation_of: Archive/WebIDE ---- -<div>{{ToolsSidebar}}</div><div class="summary"> -<p>WebIDE даёт вам возможность запускать и выполнять отладку веб-приложений, используя <a href="https://developer.mozilla.org/ru/docs/Tools/Firefox_OS_Simulator">Симулятор Firefox OS</a> или реальное устройство, работающее на Firefox OS.</p> - -<p>Она представляет собой среду разработки, в которой можно создавать и редактировать приложения для Firefox OS. WebIDE удобно отображет файлы проекта в древовидной структуре, что обеспечивает легкий доступ к файлам для их последующего редактирования и сохранения. В дополнение прилагается пара шаблонов для быстрого старта.</p> -</div> - -<p>Для начала <a href="/ru/docs/Tools/WebIDE/Setting_up_runtimes">настройте среду выполнения</a> в WebIDE. Среда выполнения — это окружение, в котором вы сможете запускать и/или выполнять отладку приложения. Среда исполнения может быть реальным устройством, работающим под Firefox OS и подключенным к персональному компьютеру через USB (или по Wi-Fi, начиная с <a href="/ru/Firefox/Releases/39">Firefox 39</a>), или это может быть Симулятор Firefox OS, установленный на компьютере.</p> - -<p>Затем <a href="/ru/docs/Tools/WebIDE/Creating_and_editing_apps">создайте или откройте существующее приложение</a>. Если вы создаете новое приложение, то можете выбрать один из шаблонов. Это может быть шаблон с минимальной конфигурацией, включающий только базовый набор файлов, необходимых для разработки, либо расширенный, который содержит примеры использования специфического API. WebIDE покажет файлы проекта в виде дерева, и вы можете редактировать и сохранять их во встроенном редакторе. Конечно, совсем необязательно использовать встроенный редактор: можно разрабатывать приложение и во внешней среде разработки, используя WebIDE как дебаггер.</p> - -<p>В завершение установите <a href="/ru/docs/Tools/WebIDE/Running_and_debugging_apps">приложение в одну из сред выполнения и запустите его</a>. Затем откройте стандартный набор иструментов разработчика - <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a>, <a href="/ru/docs/Tools/Web_Console">Веб-консоль</a>, <a href="https://developer.mozilla.org/ru/docs/Tools/Debugger">Отладчик JavaScript</a> и так далее — и можете начать изучать и изменять запущенное приложение.</p> - -<hr> -<dl> - <dt><a href="/ru/docs/Tools/WebIDE/Opening_WebIDE">Запуск WebIDE</a></dt> - <dd>Как открыть WebIDE из Firefox.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/Setting_up_runtimes">Настройка сред выполнения</a></dt> - <dd>Как подключиться к среде выполнения, в которой вы можете устанавливать приложения в устройства на Firefox OS, на симулятор Firefox OS, и на Firefox для Android.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/Creating_and_editing_apps">Создание и редактирование приложений</a></dt> - <dd>Как создавать, открывать, и разрабатывать приложения, используя WebIDE.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/The_runtime_menu">Меню среды выполнения</a></dt> - <dd>Выбрав среду выполнения, используйте меню, чтобы получить информацию о среде выполнения и о его приложениях, изменять настройки, или сделать снимок.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/Running_and_debugging_apps">Запуск и отладка приложений</a></dt> - <dd>Как установить приложения в среду выполнения и отлаживать их, используя Инструменты разработчика Firefox.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Работа над приложениями Cordova в WebIDE</a></dt> - <dd>начиная с Firefox версии 39, вы можете редактировать и отлаживать приложения Cordova, используя WebIDE.</dd> - <dt><a href="/ru/docs/Tools/WebIDE/Troubleshooting">Устранение неполадок</a></dt> - <dd>Помощь с проблемами с WebIDE, в особенности с проблемами подключения к среде выполнения.</dd> -</dl> - -<div class="note"> -<p>Чтобы разрабатывать и отлаживать приложения с помощью WebIDE, всё что вам нужно — это Firefox версии 33 или новее. Чтобы протестировать на реальном устройстве работающем под Firefox OS, вам потребуется устройство с Firefox OS 1.2 или новее и USB кабель.</p> - -<p>WebIDE совместима только с Firefox OS 1.2 или новее.</p> -</div> - -<h2 id="Установка_среды_исполнения">Установка среды исполнения</h2> - -<p>Среды исполнения в списке "Select Runtime" (Выбрать среду исполнения), сгруппированы в 3 секции:</p> - -<ul> - <li><a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB устройства</a>: Firefox OS устройства, подключенные через USB</li> - <li><a href="/ru/docs/Tools/WebIDE#Adding_a_Simulator">Симуляторы</a>: установленные и зарегистрированные экземпляры Firefox OS Симулятора</li> - <li><a href="/ru/docs/Tools/WebIDE#Custom_runtimes">Особые настройки</a>: воспользуйтесь этим пунктом, чтобы подключиться к WebIDE с помощью произвольного имени и порта.</li> -</ul> - -<p>Если вы впервые установили и настроили WebIDE, то вы возможно не увидите сред исполнения в списке:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">Оставшаяся часть главы описывает, как добавить несколько сред исполнения.</p> - -<h3 id="Соединение_с_устройством_Firefox_OS">Соединение с устройством Firefox OS</h3> - -<p>Перед тем как установить соединение с устройством Firefox OS, требуется предварительно проделать некоторые действия:</p> - -<ul> - <li><strong>проверьте вашу версию Firefox OS: </strong>убедитесь, что на вашем устройстве запущена Firefox OS 1.2/Boot2Gecko 1.2 или более свежая версия. Чтобы узнать версию установленной Firefox OS, откройте меню Настройки (Settings) на устройстве, затем перейдите в <code>Device Information(Информация об устройстве) > Softwar<code>e</code>(Програмное обеспечение)</code>. Если у вас установлена старая версия, но у вас Geeksphone, то обновите ваше программное обеспечение, следуя <a href="/Firefox_OS/Developer_phone_guide/Geeksphone">нашему руководству</a>.</li> - <li><strong>активируйте удаленную отладку: </strong>в приложении Settings (Настройки), пройдите в <code>Device information (Информация об устройстве) > More information (Дополнительная информация)> Developer(Разработка)</code>. Если элемент Удаленная Отладка (Remote Debugging) — это обыкновенный флажок, то нажмите на него, чтобы активировать. Если устройство дополнительно спросит активировать только "ADB", или "ADB and DevTools", выберите "ADB and DevTools".</li> - <li><strong>отключите блокировку экрана на устройстве:</strong> в приложении Настройки (Settings) пройдите в меню к <code>Screen Lock <code>(Блокировка Экрана) </code></code>и уберите флажок с <code>Lock Screen</code> <code>(Блокировать Экран)</code>. Это облегчит вам работу, поскольку при блокировке экрана соединение с телефоном разрывается и процесс отладки приложения прервётся.</li> - <li><strong>Только для пользователей Linux:</strong> добавьте файл с правилами<code> udev</code> , как указано в документации на шаге 3 руководства по <a href="http://developer.android.com/tools/device.html#setting-up">настройке устройств на Андроид</a>. Атрибут <code>idVendor</code> для Geeksphone имеет значение "05c6", а <a href="http://developer.android.com/tools/device.html#VendorIds">здесь</a> можно найти список других значений <code>idVendor.</code></li> - <li><strong>Только для пользователей Windows:</strong> вам потребуется установить драйвера, как указано в документации на шаге 3 руководства по <a href="http://developer.android.com/tools/device.html#setting-up">настройке устройств на Андроид</a>. Вы сможете найти драйвера для устройств Geeksphone на сайте <a href="http://downloads.geeksphone.com/">Geeksphone</a>. Windows 8 по умолчанию не позволит вам установить неподписанные драйвера. Обратитесь к статье <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Как установить неподписанные драйвера в Windows 8"</a>.</li> - <li><strong>отключите все другие Андроид устройства:</strong> убедитесь что у вас нет других Андроид устройств, подключенных к компьютеру.</li> -</ul> - -<p>Теперь подсоедините устройство к компьютеру с помощью USB. Вы должны увидеть ваше устройство в подгруппе "USB DEVICES" (USB Устройства):</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> - -<h4 id="Исправление_ошибок">Исправление ошибок</h4> - -<p>Если вы не видите ваше устройство, то попробуйте следующее:</p> - -<ol> - <li><strong>включите логирование:</strong> - - <ol start="1" style="list-style-type: lower-alpha;"> - <li>откройте <a href="http://kb.mozillazine.org/About:config">about:config</a>, и добавьте новый параметр <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>/ Присвойте ему строковое значение <code>all</code>.</span></span></li> - <li>в <a href="https://support.mozilla.org/ru/kb/disable-or-remove-add-ons">Менеджере Дополнений</a> отключите и снова включите дополнение ADB Helper.</li> - <li>Откройте <a href="/ru/docs/Tools/Browser_Console">К</a><a href="/ru/docs/Tools/Browser_Console">онсоль Браузера</a> и вы увидите в сообщения начинающиеся с <code>adb</code>. Если смысл сообщений вам непонятен, то попросите помощи.</li> - </ol> - </li> - <li><strong>где можно попросить помощи:</strong> зайдите на <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools чат IRC</a>, и мы постараемся вам помочь.</li> - <li><strong>отредактируйте asb_usb.ini</strong>: если команда "adb devices" выводит пустой список даже когда телефон подключен и разблокирован, то можно попробовать отредактировать <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini</a>.</li> -</ol> - -<h3 id="Добавление_Симулятора_Firefox_OS">Добавление Симулятора Firefox OS</h3> - -<p><span style="line-height: 1.5;"><a href="/ru/docs/Tools/Firefox_OS_Simulator">Симулятор Firefox OS</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop. </span><span style="line-height: 1.5;">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.</span></p> - -<p><span style="line-height: 1.5;">Это означает, что в большинстве случаев вам не требуется настоящее устройство, чтобы тестировать и выполнять отладку ваших приложений. </span></p> - -<p>Симулятор имеет большой объем, поэтому он не встроен в Firefox, а поставляется как <a href="/ru/Add-ons">плагин</a>. Если вы нажмёте "Установить Симулятор" (Install Simulator) в меню Среды Исполнения, вас перенаправит на страницу, с которой можно установить различные версии Firefox OS Симулятора.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Вы можете установить сколько угодно версий Симулятора. Но будьте терпеливы — Симуляторы имеют большой объем, и поэтому их загрузка может занять продолжительное время. Как только вы установили Симуляторы, они появятся в меню Среды Исполнения:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">Чтобы узнать больше о Симуляторах, просмотрите <a href="/ru/docs/Tools/Firefox_OS_Simulator">документацию к ним</a>.</p> - -<h3 id="Custom_runtimes">Custom runtimes</h3> - -<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p> - -<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. 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.</p> - -<p>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 <a href="/ru/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android device using adb</a>, then set up port forwarding from that device, then use the port number in a custom runtime to connect WebIDE to it.</p> - -<h2 id="Как_создать_новое_или_открыть_существующее_приложение">Как создать новое или открыть существующее приложение</h2> - -<p>В списке меню «Открыть приложение» (Open App) есть 3 опции: «Создать новое приложение», «Открыть упакованное приложение» и «Открыть приложение на удаленном хосте»:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> - -<h3 id="Создание_нового_приложения">Создание нового приложения</h3> - -<p>Выберите "Создать Приложение... " (New App...), чтобы создать новое приложение. Откроется диалог, предлагающий выбрать между двумя шаблонами "Пустое Приложение" (Privileged Empty App) и "Приложение Образец" (Privileged App).</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> - -<p>Оба шаблона взяты из колекции шаблонов <a href="https://github.com/mozilla/mortar/">Mortar</a>, и оба предоствавляют базовую структуру для начала разработки приложения. "Приложение Образец" (Privileged App) показывает, как приложение может использовать разрешения для загрузки контента с удаленного источника.</p> - -<p>Выбрав шаблон, введите имя приложения и выберите директорию, в которую следует сохранить файлы, после чего новое приложение откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> - -<h3 id="Как_открыть_упакованное_приложение">Как открыть упакованное приложение</h3> - -<p>Выберите "Открыть Упакованное Приложение" (Open Packaged App...), чтобы открыть <a href="/ru/Marketplace/Options/Packaged_apps">упакованное приложение</a>. Затем укажите директорию, в которой содержится <a href="/ru/Apps/Build/Manifest">манифест</a> приложения, и оно откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> - -<h3 id="Как_открыть_приложение_на_удаленном_хосте">Как открыть приложение на удаленном хосте</h3> - -<p>Выберите "Открыть Удаленное Приложение" (Open Hosted App...), затем укажите ссылку (URL) на <a href="/ru/Apps/Build/Manifest">манифест</a> приложения, и приложение откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> - -<h2 id="Редактирование_приложений">Редактирование приложений</h2> - -<p>Редактор проекта предлагает удобное окружение для разработки приложений. Слева можно увидеть файловую структуру проекта в виде дерева, а справа панель редактора. Вы можете добавлять и удалять файлы, используя контекстное меню.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> - -<h3 id="Валидация_Манифеста">Валидация Манифеста</h3> - -<p>WebIDE автоматически проверяет манифест на наличие определенных общих ошибок. Если она найдет ошибку, то укажет, что в приложении имеются проблемы, а также даст более детальное описание проблемы:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> - -<h3 id="Редактор_кода">Редактор кода</h3> - -<p>WebIDE использует редактор кода <a href="http://codemirror.net/">CodeMirror</a>.</p> - -<h4 id="Шорткаты_редактора_кода">Шорткаты редактора кода</h4> - -<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> - -<h4 id="Автодополнение_кода">Автодополнение кода</h4> - -<p>Редактор имеет функцию автодополнения кода CSS и JavaScript. Для CSS автодополнение всегда включено:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">Чтобы открыть подсказки автодополнения для JavaScript, нажмите Control + Space:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> - -<h4 id="Встроенная_документация">Встроенная документация</h4> - -<p>Редактор также может показывать встроенную документацию к JavaScript. Нажмите Shift + Space, чтобы увидеть всплывающее окно с документацией к объекту, на котором находится курсор:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> - -<p>Нажатие на ссылку <code>[docs]</code> в окне с документацией перенаправит вас на страницу с MDN с описанием объекта, к которому требуется дополнительная документация.</p> - -<h2 id="Запуск_и_отладка_приложений">Запуск и отладка приложений</h2> - -<p>Когда вы готовы к запуску приложения, то выберите среду исполнения из меню "Выбрать среду исполнения" (Select Runtime). Если у вас еще нет ни одной зарегистрированной среды исполнения, то узнайте, как можно это сделать, в главе <a href="/ru/docs/Tools/WebIDE#Setting_up_runtimes">Настройка среды исполнения</a>.</p> - -<ul> - <li>Если вы выбрали Симулятор, WebIDE запустит его.</li> - <li>Если вы выбрали устройство Firefox OS, WebIDE соединится с устройством. На устройстве появится диалог, который попросит подтверждения того, что вы желаете установить соединение: нажмите "ДА" (OK).</li> -</ul> - -<p>Теперь две вещи изменились. Во-первых, в меню Среды Исполнения появилось 3 дополнительных пункта:</p> - -<ul> - <li>информация о текущей среде исполнения;</li> - <li>таблица, содержащая список <a href="/ru/Apps/Build/App_permissions">разрешений приложения</a> в активной среде исполнения, в которой указан каждый API и каждый <a href="/ru/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">тип приложения</a>, доступ к которому разрешен (✓), запрещен (✗), или разрешение будет запрошено у пользователя (!);</li> - <li>команда, позволяющая сделать скриншот с экрана среды исполнения.</li> -</ul> - -<p>Во-вторых, кнопка "play" в центре панели инструментов WebIDE теперь активна: нажмите на неё, чтобы установить и запустить приложение в выбранной среде исполнения:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">Чтобы включить отладку приложения, нажмите кнопку "Приостановить" (Pause) — появится <a href="/ru/docs/Tools/Tools_Toolbox">Панель Разработчик</a><a href="/ru/docs/Tools/Tools_Toolbox">а, </a>соединённая с вашим приложением:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">В зависимости от среды исполнения список доступных инструментов может изменяться, однако как минимум будут доступны базовые инструменты: <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a>, <a href="/ru/docs/Tools/Web_Console">Консоль</a>, <a href="/ru/docs/Tools/Debugger">Дебаггер JavaScript</a>, <a href="/ru/docs/Tools/Style_Editor">Редактор Стилей</a>, <a href="/ru/docs/Tools/Profiler">Профайлер</a> and <a href="/ru/docs/Tools/Scratchpad">Скратчпад</a>. Как и при работе с веб страницами, любое сделанное вами изменение немедленно отобразится в приложении, но при перезапуске приложения изменения не сохраняются. И наоборот, любые сделанные вами изменения в редакторе можно сохранить сразу на диск, но они станут видимыми только после рестарта приложения.</p> - -<h3 id="Отладка_подписанных_приложений">Отладка подписанных приложений</h3> - -<p>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 <a href="/ru/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> - -<p><br> - Как бы там ни было, чтобы запустить отладку подписанного приложения на реальном устройстве:</p> - -<ul> - <li>устройство должно работать под сборкой Firefox OS версии 1.2+;</li> - <li>вы должны активировать отладку подписанных приложений.</li> -</ul> - -<p>Чтобы активировать отладку подписанных приложений, проделайте следующие операции:</p> - -<ol> - <li>На своем компьютере откройте терминал/консоль и выполните команду, чтобы войти на файловую систему устройства через шел: - <pre class="brush: bash">adb shell</pre> - - <p>Приглашение в терминале должно измениться на root@android.</p> - </li> - <li> - <p>Следующий шаг — остановите B2G:</p> - - <pre class="brush: bash">stop b2g</pre> - </li> - <li> - <p>Смените текущую директорию:</p> - - <pre class="brush: bash">cd /data/b2g/mozilla/*.default/</pre> - </li> - <li> - <p>Добавьте следующую строку в файл prefs.js :</p> - - <pre class="brush: bash">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js -</pre> - </li> - <li> - <p>Перезапустите B2G:</p> - - <pre class="brush: bash">start b2g</pre> - </li> - <li> - <p>Выйдите из файловой системы Андроида с помощью команды <code>exit</code>; это вернет вас в ваш обычный терминал и вы увидите стандартное приглашение командной строки.</p> - </li> -</ol> - -<p>Теперь в WebIDE доступны все подписанные приложения на вашем устройстве.</p> - -<p> </p> - -<p> </p> |