From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/tools/3d_view/index.html | 107 ++ files/ru/tools/about_colon_debugging/index.html | 195 ++++ files/ru/tools/add-ons/dom_inspector/index.html | 57 + files/ru/tools/add-ons/index.html | 15 + files/ru/tools/application/index.html | 37 + files/ru/tools/debugger/how_to/index.html | 11 + .../index.html" | 36 + .../index.html" | 10 + files/ru/tools/debugger/index.html | 73 ++ .../tools/debugger/keyboard_shortcuts/index.html | 16 + .../ru/tools/debugger/source_map_errors/index.html | 51 + files/ru/tools/eyedropper/index.html | 47 + files/ru/tools/firefox_os_1.1_simulator/index.html | 354 +++++++ files/ru/tools/index.html | 209 ++++ files/ru/tools/index/index.html | 8 + files/ru/tools/keyboard_shortcuts/index.html | 1112 ++++++++++++++++++++ files/ru/tools/memory/index.html | 71 ++ files/ru/tools/memory/tree_map_view/index.html | 50 + files/ru/tools/network_monitor/index.html | 588 +++++++++++ .../ru/tools/network_monitor/throttling/index.html | 97 ++ .../how_to/edit_css_shapes/index.html | 87 ++ .../how_to/examine_and_edit_css/index.html | 195 ++++ .../how_to/examine_and_edit_html/index.html | 183 ++++ .../examine_and_edit_the_box_model/index.html | 44 + files/ru/tools/page_inspector/how_to/index.html | 13 + .../how_to/inspect_and_select_colors/index.html | 26 + .../how_to/otkrytie_inspektora/index.html | 19 + .../how_to/vybor_elementa/index.html | 29 + .../how_to/work_with_animations/index.html | 129 +++ .../index.html" | 28 + .../index.html" | 24 + files/ru/tools/page_inspector/index.html | 86 ++ files/ru/tools/page_inspector/ui_tour/index.html | 96 ++ .../index.html" | 13 + files/ru/tools/profiler/index.html | 168 +++ files/ru/tools/release_notes/index.html | 127 +++ .../debugging_firefox_desktop/index.html | 84 ++ .../firefox_for_android/index.html | 146 +++ files/ru/tools/remote_debugging/index.html | 46 + files/ru/tools/responsive_design_view/index.html | 100 ++ files/ru/tools/settings/index.html | 139 +++ files/ru/tools/shader_editor/index.html | 56 + files/ru/tools/storage_inspector/index.html | 179 ++++ files/ru/tools/style_editor/index.html | 111 ++ files/ru/tools/tools_toolbox/index.html | 171 +++ files/ru/tools/web_audio_editor/index.html | 69 ++ files/ru/tools/web_console/helpers/index.html | 66 ++ files/ru/tools/web_console/index.html | 719 +++++++++++++ .../web_console/opening_the_web_console/index.html | 23 + .../ru/tools/web_console/split_console/index.html | 18 + files/ru/tools/webide/index.html | 252 +++++ files/ru/tools/webide/monitor/index.html | 110 ++ .../ru/tools/webide/setting_up_runtimes/index.html | 132 +++ files/ru/tools/webide/troubleshooting/index.html | 155 +++ .../index.html" | 29 + files/ru/tools/working_with_iframes/index.html | 28 + .../index.html" | 166 +++ .../index.html" | 180 ++++ .../index.html" | 24 + .../index.html" | 95 ++ .../waterfall/index.html" | 386 +++++++ .../index.html" | 123 +++ 62 files changed, 8018 insertions(+) create mode 100644 files/ru/tools/3d_view/index.html create mode 100644 files/ru/tools/about_colon_debugging/index.html create mode 100644 files/ru/tools/add-ons/dom_inspector/index.html create mode 100644 files/ru/tools/add-ons/index.html create mode 100644 files/ru/tools/application/index.html create mode 100644 files/ru/tools/debugger/how_to/index.html create mode 100644 "files/ru/tools/debugger/how_to/\320\276\321\202\320\273\320\260\320\264\320\272\320\260_\320\272\320\276\320\264\320\260_\320\262\320\275\321\203\321\202\321\200\320\270_eval/index.html" create mode 100644 "files/ru/tools/debugger/how_to/\321\200\320\260\320\261\320\276\321\202\320\260_\321\201_\320\274\320\270\320\275\320\270\321\204\320\270\321\206\320\270\321\200\320\276\320\262\320\260\320\275\320\275\321\213\320\274_\320\272\320\276\320\264\320\276\320\274/index.html" create mode 100644 files/ru/tools/debugger/index.html create mode 100644 files/ru/tools/debugger/keyboard_shortcuts/index.html create mode 100644 files/ru/tools/debugger/source_map_errors/index.html create mode 100644 files/ru/tools/eyedropper/index.html create mode 100644 files/ru/tools/firefox_os_1.1_simulator/index.html create mode 100644 files/ru/tools/index.html create mode 100644 files/ru/tools/index/index.html create mode 100644 files/ru/tools/keyboard_shortcuts/index.html create mode 100644 files/ru/tools/memory/index.html create mode 100644 files/ru/tools/memory/tree_map_view/index.html create mode 100644 files/ru/tools/network_monitor/index.html create mode 100644 files/ru/tools/network_monitor/throttling/index.html create mode 100644 files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/ru/tools/page_inspector/how_to/index.html create mode 100644 files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html create mode 100644 files/ru/tools/page_inspector/how_to/vybor_elementa/index.html create mode 100644 files/ru/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 "files/ru/tools/page_inspector/how_to/\320\270\321\201\321\201\320\273\320\265\320\264\320\276\320\262\320\260\321\202\321\214_event_listeners/index.html" create mode 100644 "files/ru/tools/page_inspector/how_to/\320\277\321\200\320\276\321\201\320\274\320\276\321\202\321\200_\321\210\321\200\320\270\321\204\321\202\320\276\320\262/index.html" create mode 100644 files/ru/tools/page_inspector/index.html create mode 100644 files/ru/tools/page_inspector/ui_tour/index.html create mode 100644 "files/ru/tools/page_inspector/\321\201\320\276\321\207\320\265\321\202\320\260\320\275\320\270\321\217_\320\272\320\273\320\260\320\262\320\270\321\210/index.html" create mode 100644 files/ru/tools/profiler/index.html create mode 100644 files/ru/tools/release_notes/index.html create mode 100644 files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/ru/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/ru/tools/remote_debugging/index.html create mode 100644 files/ru/tools/responsive_design_view/index.html create mode 100644 files/ru/tools/settings/index.html create mode 100644 files/ru/tools/shader_editor/index.html create mode 100644 files/ru/tools/storage_inspector/index.html create mode 100644 files/ru/tools/style_editor/index.html create mode 100644 files/ru/tools/tools_toolbox/index.html create mode 100644 files/ru/tools/web_audio_editor/index.html create mode 100644 files/ru/tools/web_console/helpers/index.html create mode 100644 files/ru/tools/web_console/index.html create mode 100644 files/ru/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ru/tools/web_console/split_console/index.html create mode 100644 files/ru/tools/webide/index.html create mode 100644 files/ru/tools/webide/monitor/index.html create mode 100644 files/ru/tools/webide/setting_up_runtimes/index.html create mode 100644 files/ru/tools/webide/troubleshooting/index.html create mode 100644 "files/ru/tools/webide/\320\267\320\260\320\277\321\203\321\201\320\272_webide/index.html" create mode 100644 files/ru/tools/working_with_iframes/index.html create mode 100644 "files/ru/tools/\320\270\320\275\321\201\320\277\320\265\320\272\321\202\320\276\321\200_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\320\276\321\201\321\202\320\270/index.html" create mode 100644 "files/ru/tools/\320\272\320\276\320\275\321\201\320\276\320\273\321\214_\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\260/index.html" create mode 100644 "files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" create mode 100644 "files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/index.html" create mode 100644 "files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/waterfall/index.html" create mode 100644 "files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" (limited to 'files/ru/tools') diff --git a/files/ru/tools/3d_view/index.html b/files/ru/tools/3d_view/index.html new file mode 100644 index 0000000000..97fdf65a90 --- /dev/null +++ b/files/ru/tools/3d_view/index.html @@ -0,0 +1,107 @@ +--- +title: 3D view +slug: Tools/3D_View +tags: + - 3D + - HTML +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+ +
+

Начиная с Firefox 47, "3D view" больше недоступен.

+
+ +

Когда вы нажимаете на кнопку 3D просмотра, страница переходит в 3D режим. В нем вы можете видетьструктуру блоков HTML, когда вложеные блоки находятся выше родительских.

+ +

Этот режим позволяет визуализировать структуру вашего контента.

+ +

+ +

Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трехмерную презентацию иерархии DOM на своей странице, чтобы увидеть ее под разными углами, чтобы лучше изучить ее структуру. Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту. Вы можете щелкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль». И наоборот, вы можете щелкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.

+ +

Если вы не видите кнопку 3D в инспекторе страницы, возможно, что ваш графический драйвер нуждается в обновлении. Дополнительную информацию см. На странице драйверов.

+ +

Управление

+ +

Для 3D-просмотра доступны горячие клавиши.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right / Mouse left/right
Pan up/down / Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}
Reset viewrResets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}
+ +

Варианты использования

+ +

Существует множество способов использования 3D-вида:

+ + + +

Смотреть так же:

+ + diff --git a/files/ru/tools/about_colon_debugging/index.html b/files/ru/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..2fce1108fe --- /dev/null +++ b/files/ru/tools/about_colon_debugging/index.html @@ -0,0 +1,195 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +translation_of: 'Tools/about:debugging' +--- +
{{ToolsSidebar}}
Страница about: debugging предоставляет одно место, из которого вы можете прикрепить Firefox Developer Tools к ряду целей отладки. В настоящий момент он поддерживает два основных типа целей: перезагружаемые надстройки и рабочие.
+ +

Как открыть страницу about:debugging?

+ +

Есть несколько способов открыть страницу about:debugging:

+ + + +

Когда about:debugging открывается, с левой стороны будет видна боковая панель , позволяющая переключаться между двумя основными видами : один вид для "add-ons" и второй для  "workers".

+ +

Add-ons

+ +
+

The Add-ons section in about:debugging only supports restartless add-ons, including basic bootstrapped extensions, Add-on SDK add-ons, and WebExtensions.

+
+ +

This page enables you to do two things:

+ + + +

+ +

Connecting the Add-on Debugger

+ +
+

Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".

+ +

If the "Debug" button is disabled, check the "Enable add-on debugging" box.

+ +

If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the Add-on Debugger will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.

+ +

{{EmbedYouTube("tGGcA3bT3VA")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +
+

The "Enable add-on debugging" button works by turning on the devtools.chrome.enabled and devtools.debugger.remote-enabled preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to true, and unchecking it sets them both to false.

+ +

You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the Developer Tools Settings.

+
+ +

Loading a temporary add-on

+ +

With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory.

+ +

You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.

+ +

{{EmbedYouTube("sAM78GU4P34")}}

+ +

The big advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Updating a temporary add-on

+ +

If you install the add-on in this way, what happens when you update the add-on's files?

+ +

Before Firefox 48

+ + + +
+

Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox does not work.

+
+ +

Firefox 48 onwards

+ + + +

From Firefox 48 onwards:

+ + + +
+

Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.

+
+ +

Tabs

+ +

In Firefox 49 onwards, a Tabs page is available in about:debugging — this provides a complete list of all the debuggable tabs open in the current Firefox instance.

+ +

+ +

Each tab entry has a Debug button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.

+ +

+ +
+

Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when about:debugging starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.

+
+ +

Workers

+ +

The Workers page shows your workers, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +
+

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+
+ +

Debugging workers

+ +

For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.

+ +

Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:

+ +

{{EmbedYouTube("Z8ax79sHWDU")}}

+ +

Registering workers

+ +

At first, you won't see any workers listed under Service Workers or Shared Workers. As soon as a worker is registered, the listing is updated:

+ +

{{EmbedYouTube("wy4kyWFhFF4")}}

+ +
+

Before Firefox 47, service workers were only shown when they were actually running.

+
+ +

Unregistering service workers

+ +
+

New in Firefox 48.

+
+ +

Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:

+ +

+ +

Click the link to unregister the service worker.

+ +

Sending push events to service workers

+ +
+

Sending push events in about:debugging is new in Firefox 47.

+
+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:

+ +

{{EmbedYouTube("62SkLyA-Zno")}}

+ +

Service workers not compatible

+ +
+

In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable for several reasons:

+ + diff --git a/files/ru/tools/add-ons/dom_inspector/index.html b/files/ru/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..0e2c41dc29 --- /dev/null +++ b/files/ru/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,57 @@ +--- +title: DOM Inspector +slug: Tools/Add-ons/DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

Инспектор DOM (также известный как DOMi) — инструмент для разработчиков, используемый для проверки, просмотра и редактирования объектной модели документа - обычных веб-страниц или XUL windows. По иерархии DOM можно перемещаться с помощью двух окон, отображающих целый ряд различных представлений документа и всех вложенных в него узлов.

+ +
+

Этот инструмент является дополнением для приложений, основанных на XUL, таких как Firefox и Thunderbird. Если вы ищете инспектор DOM, который встроен в Firefox, обратитесь к разделу документации Инспектор страницы.

+
+ +

Документация

+ +
+
Введение в инспектор DOM
+
Руководствоваться учебник, который поможет вам начать работу с DOM Inspector.
+
+ +
+
FAQ инспектор DOM
+
Ответы на общие вопросы по DOM Inspector.
+
+ +
+
страницы на MozillaZine
+
Более подробную информацию о DOM Inspector.
+
как скомпилировать инспектор DOM
+
Сообщение в блоге на здание инспектор DOM от источника.
+
+ +

Получение инспектор DOM

+ +
+
Firefox и Thunderbird
+
Вы можете скачать и установить Инспектор DOM на веб-сайте AMO. (Thunderbird пользователей, использующих AMO в Firefox следует сохранить ссылку установки, или посетить страницу Инспектор DOM для Thunderbird).
+
+ +
+
Thunderbird 2
+
Инспектор DOM для Thunderbird 2 доступен из Дополнений для Thunderbird. Или настройте Thunderbird сами со следующими параметрами:
+
+ +
ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+ +
+
Mozilla Suite и SeaMonkey
+
Выберите Инструменты > Веб-разработка > Инспектор DOM. Вы также можете установить боковую панель через Правка > Настройки > Дополнительно > Инспектор DOM, затем просто откройте панель инспектора DOM и посетите любой веб-сайт.
+
+ +

Отчет об ошибке в DOM Inspector

+ +

Использовать удобно именованный раздел компонент «Инспектор DOM» в Bugzilla.

+ +

Чтобы узнать о тех, кто знает код DOM Inspector и где он живет, см. листинг модуля DOM Inspector.

+ +

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/ru/tools/add-ons/index.html b/files/ru/tools/add-ons/index.html new file mode 100644 index 0000000000..ab408aeb18 --- /dev/null +++ b/files/ru/tools/add-ons/index.html @@ -0,0 +1,15 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/ru/tools/application/index.html b/files/ru/tools/application/index.html new file mode 100644 index 0000000000..357953fe63 --- /dev/null +++ b/files/ru/tools/application/index.html @@ -0,0 +1,37 @@ +--- +title: Приложение +slug: Tools/Application +tags: + - Firefox + - Manifests + - Service Workers + - Отладка + - Приложение + - инструменты разработчика +translation_of: Tools/Application +--- +
{{ToolsSidebar}}
+ +

Панель приложений предоставляет инструменты для проверки и отладки современных веб-приложений (также известных как Прогрессивные веб приложения). Это включает в себя проверку service worker API и манифесты веб-приложений.

+ +

the firefox application panel zoomed out view showing a picture of two artic foxes

+ +

Доступ к Панели приложений

+ +

Панель приложений доступна в стандартном меню вкладки Инструменты разработчика в разделе Приложение в Firefox 79+. Если вы не видите его там, вы можете включить его, перейдя в меню "три точки" и выбрав пункт Настройки (также доступный нажатием клавиши F1), а затем поставив флажок Приложение в разделе Инструменты разработчика по умолчанию.

+ +

Найти пример

+ +

Если вы хотите протестировать эту функциональность и у вас нет удобного PWA, вы можете взять один из наших простых примеров для использования:

+ + + +

Инструкции

+ + diff --git a/files/ru/tools/debugger/how_to/index.html b/files/ru/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..3e572d8903 --- /dev/null +++ b/files/ru/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

diff --git "a/files/ru/tools/debugger/how_to/\320\276\321\202\320\273\320\260\320\264\320\272\320\260_\320\272\320\276\320\264\320\260_\320\262\320\275\321\203\321\202\321\200\320\270_eval/index.html" "b/files/ru/tools/debugger/how_to/\320\276\321\202\320\273\320\260\320\264\320\272\320\260_\320\272\320\276\320\264\320\260_\320\262\320\275\321\203\321\202\321\200\320\270_eval/index.html" new file mode 100644 index 0000000000..29224f2590 --- /dev/null +++ "b/files/ru/tools/debugger/how_to/\320\276\321\202\320\273\320\260\320\264\320\272\320\260_\320\272\320\276\320\264\320\260_\320\262\320\275\321\203\321\202\321\200\320\270_eval/index.html" @@ -0,0 +1,36 @@ +--- +title: Отладка кода внутри eval +slug: Tools/Debugger/How_to/Отладка_кода_внутри_eval +tags: + - Отладка +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +
{{ToolsSidebar}}
+

Доступно, начиная с Firefox 36.

+
+ +

В Firefox версии 36 или старше доступна отладка кода, выполняемого с помощью eval() или конструктора Function.

+ +

Чтобы воспользоваться этой возможностью, используйте директиву //# sourceURL 

+ +
var button = document.getElementById("clickme");
+button.addEventListener("click", evalFoo, false);
+
+var script = "function foo() {" +
+             "  console.log('called foo');" +
+             "}" +
+             "foo();//# sourceURL=my-foo.js";
+
+function evalFoo() {
+  eval(script);
+}
+ +

Такой код присвоит исполняемому скрипту имя "my-foo.js".

+ +

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

+ +

+ +

Это имя также будет использоваться в стеке вызовов функций, доступном в веб-консоли.

+ +

Начиная с Firefox 40, оператор debugger; также останавливает дебаггер в безымянных источниках выполнения.

diff --git "a/files/ru/tools/debugger/how_to/\321\200\320\260\320\261\320\276\321\202\320\260_\321\201_\320\274\320\270\320\275\320\270\321\204\320\270\321\206\320\270\321\200\320\276\320\262\320\260\320\275\320\275\321\213\320\274_\320\272\320\276\320\264\320\276\320\274/index.html" "b/files/ru/tools/debugger/how_to/\321\200\320\260\320\261\320\276\321\202\320\260_\321\201_\320\274\320\270\320\275\320\270\321\204\320\270\321\206\320\270\321\200\320\276\320\262\320\260\320\275\320\275\321\213\320\274_\320\272\320\276\320\264\320\276\320\274/index.html" new file mode 100644 index 0000000000..e224f9d591 --- /dev/null +++ "b/files/ru/tools/debugger/how_to/\321\200\320\260\320\261\320\276\321\202\320\260_\321\201_\320\274\320\270\320\275\320\270\321\204\320\270\321\206\320\270\321\200\320\276\320\262\320\260\320\275\320\275\321\213\320\274_\320\272\320\276\320\264\320\276\320\274/index.html" @@ -0,0 +1,10 @@ +--- +title: Работа с минифицированным кодом +slug: Tools/Debugger/How_to/Работа_с_минифицированным_кодом +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +
{{ToolsSidebar}}

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

+ +

Файл будет преобразован в более комфортное человеческому глазу представление, благодаря добавлению отсутствующих отступов:

+ +

Вы можете настроить отладчик на автоматическое представление обнаруженных минифицированных исходников в удобочитаемом виде в настройках отладчика.

diff --git a/files/ru/tools/debugger/index.html b/files/ru/tools/debugger/index.html new file mode 100644 index 0000000000..2ff61ab577 --- /dev/null +++ b/files/ru/tools/debugger/index.html @@ -0,0 +1,73 @@ +--- +title: Отладчик +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - Tools + - TopicStub + - 'l10n:priority' +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}

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

+ +

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

+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +
+

Пользовательский интерфейс

+ +

Доступ к отладчику: quick tour of the UI.

+ +
+

Как

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Open the debuggerSearch and filter
Set a breakpointSet a conditional breakpoint
Disable breakpointsExamine, modify, and watch variables
Step through codeUse a source map
Break on a DOM eventBlack box a source
Highlight and inspect DOM nodesDebug eval sources
Pretty-print a minified fileAccess debugging in add-ons
+ +
+

Ссылки

+ +
+ +
diff --git a/files/ru/tools/debugger/keyboard_shortcuts/index.html b/files/ru/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..cc7fde5314 --- /dev/null +++ b/files/ru/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: Комбинации клавиш отладчика +slug: Tools/Debugger/Keyboard_shortcuts +tags: + - Клавиатура + - Отладчик + - комбинации клавиш +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "debugger") }}

+ +

Общие комбинации клавиш

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/ru/tools/debugger/source_map_errors/index.html b/files/ru/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..40dc3098d3 --- /dev/null +++ b/files/ru/tools/debugger/source_map_errors/index.html @@ -0,0 +1,51 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +translation_of: Tools/Debugger/Source_map_errors +--- +

{{ToolsSidebar}}

+ +

Исходные карты - это файлы JSON, обеспечивающие возможность связать преобразованные источники, как видно из браузера, с их исходными источниками, как написано разработчиком. Иногда вы можете столкнуться с проблемами, связанными с исходными картами. На этой странице объясняются наиболее распространенные проблемы и способы их устранения.

+ +
+

Примечание. Если вы новичок в исходных картах, вы можете узнать больше о них в разделе Use_a_source_map

+
+ +

Общий отчет об ошибках исходной карты

+ +

Если вы видите проблему, на веб-консоли появится сообщение.Это сообщение покажет сообщение об ошибке, URL-адрес ресурса и URL-адрес исходной карты:

+ +

Error from invalid JSON

+ +

Тут ресурс с URL говорит нам что bundle.js упомянут в карте исходников, и URL карты исходников  говорит нам где найти  данные для карты (в этом случае, относительно указанного ресурса "bundle.js.map").  Ошибка говорит нам что карта исходников  не является корректным JSON-ом — т.е. мы получили некорректный файл.

+ +

Есть несколько общих причин, почему карта может быть ошибочной; они подробно описаны в следующих разделах.

+ +

Карта исходников отсутствует или недоступна

+ +

Ресурс карты исходников может отсутствовать, либо быть недоступным.

+ +

Source map file is missing

+ +

Для исправления ошибки убедитесь что файл существует и доступен для браузера.

+ +

Некорректная карта исходников

+ +

Карта исходников может быть некорректной - не являться JSON-файлом, или иметь некорректную структуру. Типичное сообщение об ошибке таково:

+ + + +

Error: "version" is a required argument

+ +

Оригинальный исходник отсутствует

+ +

Оригинальный исходник может отсутствовать.  Вы можете столкнуться с этим, при попытке открыть оригинальный исходник в отладчике. Сообщение об ошибке в этом случае немного отличается:

+ +

Debugger source tab showing the error

+ +

В этом случае ошибка будет также отображена во вкладке исходника в отладчике:

+ +

Debugger source tab showing the error

diff --git a/files/ru/tools/eyedropper/index.html b/files/ru/tools/eyedropper/index.html new file mode 100644 index 0000000000..b03037c968 --- /dev/null +++ b/files/ru/tools/eyedropper/index.html @@ -0,0 +1,47 @@ +--- +title: Eyedropper +slug: Tools/Eyedropper +translation_of: Tools/Eyedropper +--- +
{{ToolsSidebar}}
+

Инструмент пипетка доступен начиная с Firefox 31.

+
+ +

Инструмент «Пипетка» позволяет получить цвет любого пикселя на странице. Он работает как увеличительное стекло, увеличивая участок страницы и позволяя точно выбрать необходимый пиксель. Под увеливаемой областью находится текстовое поле, в котором отображается выбранный цвет в соответствии с выбранной цветовой моделью, указанной в Настройках.

+ +

Этот инструмент обычно используется:

+ + + +

Копирование цвета в буфер обмена

+ +

Откройте Пипетку:

+ + + +

Двигая курсором по странице, вы увидите, что код текущего цвета изменяется. Клик мышью копирует текущий цвет в буфер обмена.

+ +

{{EmbedYouTube("xf2uk6UyRB8")}}

+ +

Изменение цвета в правилах инспектора страницы

+ +

Напротив каждого цифрового кода цвета (например, #B00BCE) в Инспекторе есть образец этого цвета: при нажатии на него откроется всплывающее окно с палитрой цветов.

+ +

Палитра цветов

+ +

Начиная с Firefox 31, в этом всплывающем окне также будет находиться иконка вызова пипетки.
+
+ Теперь, когда инструмент активен, цвет выбранного элемента в Инспекторе будет установлен таким же, какой вы выберете пипеткой.

+ +


+ {{EmbedYouTube("0Zx1TN21QOo")}}

+ +

Горячие клавиши

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}

diff --git a/files/ru/tools/firefox_os_1.1_simulator/index.html b/files/ru/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..57079732b6 --- /dev/null +++ b/files/ru/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,354 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
{{ToolsSidebar}}
+
+
+

This page describes the "old" Firefox OS Simulator. You should only use this if you're developing apps for Firefox 1.1, and it can only be installed on Firefox 24 or Firefox 25.

+ +

If you're developing apps for Firefox OS 1.2 or later, you need to use the App Manager instead.

+ +

If you need help, try asking on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+
+ +

Summary

+ +

The Firefox OS Simulator add-on is a tool that enables you to test and debug your Firefox OS app on the desktop. The code-test-debug cycle is much faster with the simulator than with a real device, and of course, you don't need a real device in order to use it.

+ +

Essentially, the Simulator add-on consists of:

+ +
    +
  • the Simulator: this includes the Firefox OS desktop client, which is a version of the higher layers of Firefox OS that runs on your desktop. The Simulator also includes some additional emulation features that aren't in the standard Firefox OS desktop builds.
  • +
  • the Dashboard: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.
  • +
+ +

The screenshot below shows a debugging session using the Simulator.

+ +

The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.

+ +

+ +

This guide covers the following topics:

+ + + +
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+ +

Installing the Simulator add-on

+ +

The Simulator is packaged and distributed as a Firefox add-on. To install it:

+ +
    +
  1. Using Firefox, go to the Simulator's page on addons.mozilla.org.
  2. +
  3. Click "Add to Firefox".
  4. +
  5. Once the add-on has downloaded you will be prompted to install it: click "Install Now".
  6. +
+ +

Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.
+
+ Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.

+ +

The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":

+ +


+ The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like:

+ +

Adding, removing and refreshing apps

+ +

Adding apps

+ +

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+ +

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

+ +

Managing apps

+ +

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +
    +
  • its name, taken from the manifest
  • +
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
  • +
  • a link to its manifest file
  • +
  • the result of manifest validation
  • +
+ +

It also gives us four commands:

+ +
    +
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.
  • +
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
  • +
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
  • +
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
  • +
+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+ +

Manifest validation

+ +

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +
    +
  • manifest errors: problems that will prevent your app from installing or running
  • +
  • manifest warnings: problems that may prevent your app from working properly
  • +
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
  • +
+ +

It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.

+ +

Manifest errors

+ +

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +
    +
  • the manifest does not include the mandatory "name" field
  • +
  • the manifest is not valid JSON
  • +
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
  • +
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
  • +
+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+ +

Manifest warnings

+ +

The Dashboard will report the following manifest issues as warnings:

+ +
    +
  • missing icons
  • +
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
  • +
  • the type field is unrecognized
  • +
  • the manifest requests a permission that is unrecognized
  • +
  • the manifest requests a permission which will be denied
  • +
  • the manifest requests a permission for which access could not be determined
  • +
+ +

Simulator-specific warnings

+ +

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +
    +
  • the type field is "certified", but the Simulator does not yet fully support certified apps
  • +
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
  • +
+ +

Running the Simulator

+ +

There are two different ways the Simulator may be started:

+ +
    +
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
  • +
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
  • +
+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+ +

+ +

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+ +

+ +

Simulator toolbar

+ +

In the bottom toolbar, from left to right, there are the Home button, the Screen Rotation button, and the Geolocation button.

+ +
    +
  • The Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).
  • +
  • The Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
  • +
  • The Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the Geolocation API.
  • +
+ +

+ +

Simulator menubar

+ +

In the top menubar, you can access some useful commands to make development more efficient:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
  • +
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
  • +
+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
    +
  • make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)
  • +
  • type the keyboard shortcut to refresh the app running in the Simulator
  • +
+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
    +
  • +

    localStorage / sessionStorage

    +
  • +
  • +

    cookies

    +
  • +
  • +

    indexedDB

    +
  • +
  • +

    appCache

    +
  • +
+
+ +

Attaching developer tools

+ +

You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler, and the Network Monitor, but we're working on adding support for more developer tools.

+ +
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+ +

To attach developer tools to the Simulator, click the "Connect" button for an app:

+ +

+ +

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+ +

+ +

Web Console

+ +

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+ +

Debugger

+ +

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+ +

Style Editor

+ +

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+ +

Profiler

+ +

Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+ +

Network Monitor

+ +

Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+ +

Receipts

+ +

If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+ +

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+ +

+ +

Push to device

+ +

If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.

+ +

Connecting a device

+ +

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+ +

Pushing apps to the device

+ +

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +
+

Manual Steps:

+ +
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.

    +
  • +
  • +

    If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.

    +
  • +
+
+ +

Firefox OS Device Connection Confirmation

+ +

On every device reboot, the first "Push" request needs to be confirmed on the device:

+ +

+ +

Troubleshooting on Linux

+ +

If you are unable to connect your device after creating udev rules, please see this bug.

+ +

Limitations of the Simulator

+ +

Note that the Firefox OS Simulator isn't a perfect simulation.

+ +

Hardware limitations

+ +

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+ +

Audio/video codecs

+ +

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +
    +
  • MP3
  • +
  • AAC
  • +
  • H.264 (MP4)
  • +
  • WebM
  • +
+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+ +

Unsupported APIs

+ +

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ + + +

Getting help

+ +

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+ +

How to enable verbose logging

+ +

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+
+
+ +
+

 

+
+ +

 

diff --git a/files/ru/tools/index.html b/files/ru/tools/index.html new file mode 100644 index 0000000000..c7cc39bfba --- /dev/null +++ b/files/ru/tools/index.html @@ -0,0 +1,209 @@ +--- +title: Инструменты разработчика Firefox +slug: Tools +tags: + - Developing Mozilla + - Tools + - TopicStub + - 'l10n:priority' + - Веб-разработка + - Разработка Mozilla + - 'веб-разработка:инструменты' + - инструменты +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +

Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки скачайте Firefox Developer Edition.

+ +

Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место - на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.
+ Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам собщение на нашу почту или IRC канал (  соответствующие ссылки находятся внизу страницы). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в MDN discourse.

+ +

На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы по изучению веб разработки помогут вам - для начала посмотрите Getting started with the Web (Начало работы в веб) и What are browser developer tools (Инструменты разработки браузера).

+ +

Основные инструменты

+ +

Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав Открыть меню > Веб-разработка > Инструменты разработчика или используя комбинации клавиш Ctrl + Shift + I или F12 на Windows и Linux, или  Cmd + Opt + I на macOS.

+ +

Меню в виде многоточия в правой верхней части окна Средств Разработчика содержит команды, позволяющие Вам выполнить некоторые общие действия или изменить настройки Средств Разработчика.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов iframe). Нажатие на эту кнопку отображает список фреймов (тегов iframe) на текущей странице и позволяет выбрать тот фрейм (тег iframe) с которым Вы хотите работать.
Щелчек по данной кнопке создает снимок экрана (screenshot) текущей страницы. (Внимание: По-умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)
Преключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).
Открывает меню, которое включает настройки "прилипания" (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.
Закрывает окно Средств Разработчика
+ +
+
+

Инспектор страницы

+ +

The all-new Inspector panel in Firefox 57.

+ +

Инструмент для просмотра и редактирования содержимого и макета страницы. Позволяет рассмотреть страницу с разных точек зрения, включая блочную модель, анимацию и grid компоновку.

+
+ +
+

Web-консоль

+ +

The all-new Console in Firefox 57.

+ +

Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.

+
+
+ +
+
+

Отладчик JavaScript

+ +

The all-new Firefox 57 Debugger.html

+ +

Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.

+
+ +
+

Сетевой монитор

+ +

The Network panel in Firefox 57 DevTools.

+ +

Показывает сетевые запросы возникающие в процессе загрузки страницы.

+
+
+ +
+
+

Инструменты производительности

+ +

+ +

Позволяют провести общий анализ отзывчивости вашего сайта, а также производительности кода JavaScript и макета.

+
+ +
+

Режим адаптивного дизайна

+ +

+ +

Позволяет увидеть, как будут выглядеть и работать ваши сайты или приложения на различных устройствах или типах сетей.

+ +

Инспектор доступности

+ +

+ +

Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.

+
+
+ +

Больше инструментов

+ +

Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools»  описанных выше, могут не использоватся в повседневной работе.

+ +
+
+
Память
+
Выясните, какие объекты сохраняют память в использовании.
+
Storage Inspector
+
Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.
+
DOM Property Viewer
+
Проверьте свойства DOM страницы, функции и т.д.
+
Панель инструментов разработчика
+
Интерфейс командной строки для инструментов разработчика.
+
Пипетка
+
Получите код любого цвета со страницы.
+
Scratchpad
+
Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript
+
Редактор стилей
+
Просмотр и редактирование стилей CSS для текущей страницы.
+
Редактор шейдеров
+
Просмотр и редактирование вершинных и фрагментных шейдеров, используемых WebGL.
+
Редактор веб аудио 
+
Изучите график аудиоузлов в аудиоконтексте и измените их параметры.
+
Делать скриншоты
+
Следайте скриншот всей страницы, или одного ее элемента.
+
+
+ +
+

Подключение инструментов разработчика

+ +

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

+ +
+
+
about:debugging
+
Отладка надстроек, вкладок контента и рабочих, работающих в браузере.
+
Подключение к Firefox для Android
+
Подключите инструменты разработчика к Firefox, работающему на устройстве Android.
+
Подключение к iframes
+
Подключите инструменты разработчика к конкретному iframe на текущей странице.
+
Подключение к другим браузерам
+
Подключите инструменты разработчика к Chrome на Android и Safari на iOS.
+
+
+ +

Отладка браузера

+ +

По умолчанию инструменты разработчика прикрепляются к веб-странице или веб-приложению. Но вы также можете подключить их к браузеру в целом. Это полезно для разработки браузеров и надстроек.

+ +
+
+
Консоль браузера
+
Просматривайте сообщения, зарегистрированные самим браузером и надстройками, и запускайте код JavaScript в области видимости браузера.
+
Панель инструментов браузера
+
Присоедините инструменты разработчика к самому браузеру.
+
+
+ +

Расширение инструментов разработчика

+ +

Инструменты разработчика предназначены для расширения. Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов. С помощью протокола удаленной отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.

+ +
+
+
Example devtools add-ons
+
Use these examples to understand how to implement a devtools add-on.
+
Add a new panel to the devtools
+
Write an add-on that adds a new panel to the Toolbox.
+
Remote Debugging Protocol
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Source Editor
+
A code editor built into Firefox that can be embedded in your add-on.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
+
+ +

Сделать вклад

+ +

Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.

+ +
+
+
Увлекитесь
+
Вики-страница Mozilla, объясняющая, как принять участие.
+
firefox-dev.tools
+
Инструмент, помогающий находить ошибки для работы.
+
+
diff --git a/files/ru/tools/index/index.html b/files/ru/tools/index/index.html new file mode 100644 index 0000000000..b9d3f33dbb --- /dev/null +++ b/files/ru/tools/index/index.html @@ -0,0 +1,8 @@ +--- +title: Индекс +slug: Tools/Index +tags: + - инструменты +translation_of: Tools/Index +--- +
{{ToolsSidebar}}

{{Index("/ru/docs/Tools")}}

diff --git a/files/ru/tools/keyboard_shortcuts/index.html b/files/ru/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..17a9c25c04 --- /dev/null +++ b/files/ru/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1112 @@ +--- +title: Клавиатурные сокращения +slug: Tools/Keyboard_shortcuts +tags: + - Tools + - инструменты +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Эта страница перечисляет все клавиатурные сокращения, используемые инструментами разработчика, встроенными в Firefox.

+ +

Первый раздел перечисляет сокращения для открытия каждого инструмента, а второй — сокращения, применимые в самом наборе инструментов. После них идут разделы, посвящённые каждый своему инструменту, которые перечисляют сокращения, используемые в соответствующем инструменте.

+ +

Поскольку клавиши доступа зависят от настроек локали, они не задокументированы на этой странице.

+ +

Открытие и закрытие инструментов

+ +

Эти клавиатурные сокращения работают в главном окне браузера для открытия определённого инструмента. Если инструмент содержится в наборе инструментов, комбинация закрывает его, если он был активен. Инструменты, которые открываются в новом окне, вроде «Консоли браузера», закрываются при закрытии их окна.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Набор инструментов (открывается последний активированный инструмент)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Перенос Набора инструментов на передний план (если он в отдельном окне и в фоне)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Закрыть Набор инструментов (если он в отдельном окне и на переднем плане)Ctrl + Shift + I or F12Cmd + Opt + I or F12Ctrl + Shift + I or F12
Веб-консоль1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
ИнспекторCtrl + Shift + ICmd + Opt + ICtrl + Shift + I
ОтладчикCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Редактор стилейShift + F7Shift + F71Shift + F7
ПрофайлерShift + F5Shift + F51Shift + F5
СетьCtrl + Shift + QCmd + Opt + QCtrl + Shift + Q
Панель разработки (включение и выключение)Shift + F2Shift + F21Shift + F2
Режим адаптивного дизайна (включение и выключение)Ctrl + Shift + MCmd + Opt + MCtrl + Shift + M
Консоль браузера2Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Инструменты разработчика браузера (с Firefox 39)Ctrl + Alt +Shift + ICmd + Opt +Shift + ICtrl + Alt +Shift + I
Простой редактор JavaScriptShift + F4Shift + F4Shift + F4
WebIDEShift + F8Shift + F8Shift + F8
Инспектор Хранилища3Shift + F9Shift + F9Shift + F9
+ +

1. В отличие от других инструментов, находящихся в окне набора инструментов, это сокращение не закрывает веб-консоль. Вместо этого оно переводит фокус на командную строку веб-консоли. Для закрытия веб-консоли используйте глобальное сокращение набора инструментов Ctrl+Shift+I (Cmd+Opt+I на Mac).

+ +

2. До Firefox 38, когда Консоль Браузера не видна за обычным окном Firefox, та же комбинация закрывает Консоль Браузера. Начиная с Firefox 38, когда Консоль Браузера не видна за обычным окном Firefox, эта комбинация клавиш возвращает имеющуюся Консоль Браузера наверх стопки окон и переводит на неё фокус.

+ +

3. Этот инструмент по умолчанию выключен, так что комбинация клавиш не будет действовать, пока вы его не включите на панели настроек.

+ +

Набор инструментов

+ +
+

Эти сокращения работают только при открытом наборе инструментов, независимо от текущего активного инструмента.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Циклическая смена инструментов слева направоCtrl + ]Cmd + ]Ctrl + ]
Циклическая смена инструментов справа налевоCtrl + [Cmd + [Ctrl + [
Показать настройки инструментов разработчикаCtrl + Shift + OCmd + Shift + OCtrl + Shift + O
Переключение между активной вкладкой панели инструментов и настройками Панели инструментов (новое в Firefox 43)F1F1F1
Переключение Панели инструментов между двумя последними Режимами прикрепления (новое в Firefox 41)Ctrl + Shift + DCmd + Shift + DCtrl + Shift + D
Показать/скрыть Консоль в любой вкладке панели инструментов (кроме вкладки Консоль)EscEscEsc
+
+ +
+

Эти сокращения работают для всех инструментов, находящихся в окне набора инструментов.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Увеличить размер шрифтаCtrl + +Cmd + +Ctrl + +
Уменьшить размер шрифтаCtrl + -Cmd + -Ctrl + -
Сбросить размер шрифтаCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Редактор исходного кода

+ +
+

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

+ +

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

+ +

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

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Перейти к строкеCtrl + JCmd + JCtrl + J
Найти в файлеCtrl + FCmd + FCtrl + F
Найти далееCtrl + GCmd + GCtrl + G
Выделить всёCtrl + ACmd + ACtrl + A
ВырезатьCtrl + XCmd + XCtrl + X
КопироватьCtrl + CCmd + CCtrl + C
ВставитьCtrl + VCmd + VCtrl + V
ОтменитьCtrl + ZCmd + ZCtrl + Z
ПовторитьCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
ОтступTabTabTab
Убрать отступShift + TabShift + TabShift + Tab
Переместить строки вверхAlt + вверхAlt + вверхAlt + вверх
Переместить строки внизAlt + внизAlt + внизAlt + вниз
За-/раскомментировать строкиCtrl + /Cmd + /Ctrl + /
+
+ +

Инспектор

+ +
+ + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть инспекторCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
+ +

Панель HTML

+ +

Эти клавиатурные сокращения работают, пока вы находитесь в Панели HTML инспектора.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Удалить выбранный узелDeleteDeleteDelete
Отменить удаление узлаCtrl + ZCmd + ZCtrl + Z
Повторить удаление узлаCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Перейти к следующему узлу (только раскрытые узлы)внизвнизвниз
Перейти к предыдущему узлувверхвверхвверх
Развернуть текущий выбранный узелвправовправовправо
Свернуть текущий выбранный узелвправовправовправо
Шаг вперёд по атрибутам узлаTabTabTab
Шаг назад по атрибутам узлаShift + TabShift + TabShift + Tab
Начать редактирование выбранного атрибутаEnterEnterEnter
Скрыть/показать выбранный узелHHH
Переместить фокус в окно поиска по HTML панелиCtrl + FCmd + FCtrl + F
Править как HTMLF2F2F2
Остановить правку как HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Копировать HTML выбранного узла (новое в Firefox 42)Ctrl + CCmd + CCtrl + C
Прокрутить страницу до выбранного в Инспекторе узла (новое в Firefox 44)SSS
Поиск следующего совпадения в разметке, если поиск активенEnterReturnEnter
Поиск предыдущего совпадения в разметке, когда поиск активен (новое в Firefox 48)Shift + EnterShift + ReturnShift + Enter
+ +

Навигационная цепочка

+ +

Следующие сокращения работают при фокусе на навигационной цепочке.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Переместиться на предыдущий элементLeft arrowLeft arrowLeft arrow
Переместиться на следующий элементRight arrowRight arrowRight arrow
Переключить фокус на Панель HTML в ИнспектореShift + TabShift + TabShift + Tab
Переключить фокус на CSS-панель в ИнспектореTabTabTab
+ +

Панель CSS

+ +

Эти клавиатурные сокращения работают, пока вы находитесь в Панели CSS в Инспекторе.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть поле поиска в Панели CSSCtrl + FCmd + FCtrl + F
Очистить поле поиска (только когда фокус на поле поиска и в нём что-нибудь введено)EscEscEsc
Шаг вперёд по свойствам и значениямTabTabTab
Шаг назад по свойствам и значениямShift + TabShift + TabShift + Tab
Начать редактирование свойства или значения (Только для вкладки "Правила", когда свойство или значение ещё не редактируется)Enter or SpaceReturn or SpaceEnter or Space
Прокрутка вверх или вниз по предлагаемым вариантам (Только для вкладки "Правила", когда редактируется свойство или значение)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Выбрать текущий вариант предложения имени свойства или значения  (Только для вкладки "Правила", когда редактируется свойство или значение)Enter or TabReturn or TabEnter or Tab
Увеличить выбранное значение на единицувверхвверхвверх
Уменьшить выбранное значение на единицувнизвнизвниз
Увеличить выбранное значение на 100Shift + Page UpShift + Page UpShift + Page Up
Уменьшить выбранное значение на 100Shift + Page DownShift + Page DownShift + Page Down
Увеличить выбранное значение на 10Shift + вверхShift + вверхShift + вверх
Уменьшить выбранное значение на 10Shift + внизShift + внизShift + вниз
Увеличить выбранное значение на 0.1Alt + вверхOpt + вверхAlt + вверх
Уменьшить выбранное значение на 0.1Alt + внизOpt + внизAlt + вниз
Показать/скрыть больше информации о текущем свойстве (Только на вкладке "Вычислено", когда выбрано свойство. Новое в Firefox 49)Enter or SpaceReturn or SpaceEnter or Space
Открыть справочную сттаницу на MDN по текущему свойству (Только на вкладке "Вычислено", когда выбрано свойство. Новое в Firefox 49)F1F1F1
Открыть текущий файл CSS в Редакторе стилей (Только на вкладке "Вычислено", когда отображена расширенная информация и фокус на справочнике по файлам CSS. Новое в Firefox 49)EnterReturnEnter
+
+ +

Отладчик

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть отладчикCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Поиск в текущем исходном коде с использованием фильтра сценариевCtrl + FCmd + FCtrl + F
Найти далее в текущем исходном кодеEnter / вверх<
Найти назад в текущем исходном кодеShift + Enter / внизShift + Enter / внизShift + Enter / вниз
Поиск во всех исходных кодах с использованием фильтра сценариевCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Искать в сценариях по имениCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Искать определения функцийCtrl + DCmd + DCtrl + D
Фильтровать переменные при приостановленном выполненииCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Продолжить выполнение после точки остановаF8F81F8
ПерешагнутьF10F101F10
ЗайтиF11F111F11
ВыйтиShift + F11Shift + F111Shift + F11
Переключить точку останова в текущей выбранной строкеCtrl + BCmd + BCtrl + B
Переключить условную точку останова в текущей выбранной строкеCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Добавить выбранный текст в выражения для отслеживанияCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Перейти к строке с использованием фильтра сценариевCtrl + LCmd + LCtrl + L
Искать с использованием фильтра сценариевCtrl + OCmd + OCtrl + O
В Области исходного кода переход на определение  функции (новое в Firefox 44)Ctrl + clickCmd + clickCtrl + click
+ +

1. По умолчанию, на некоторых Mac функциональные клавиши переназначены на использование специальных возможностей: например, изменение яркости экрана или громкости звука. Смотрите это руководство по использованию этих клавиш в качестве стандартных функциональных клавиш. Для использования переназначенных клафиш в качестве стандартных функциональных клавиш, удерживайте нажатой клавишу Function (так что, например, для открытия профайлера используйте Shift + Function + F5).

+
+ +

Веб-консоль

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть веб-консольCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Искать в панели показа сообщенийCtrl + FCmd + FCtrl + F
Очистить панель инспектирования объектаEscEscEsc
Переместить фокус на командную строкуCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Очистить +

Ctrl + L

+ +

С Firefox 44:

+ +

Ctrl + Shift + L

+
Ctrl + L +

Ctrl + L

+ +

С Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Интерпретатор командной строки

+ +

Эти клавиатурные сокращения работают, пока вы находитесь в Интерпретаторе командной строки.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Прокрутить в начало вывода в консоль (новое в Firefox 34, и только при пустой командной строке)HomeHomeHome
Прикрутить в конец вывода в консоль (новое в Firefox 34, и только при пустой командной строке)EndEndEnd
Прокрутить вверх вывод консолиPage upPage upPage up
Прокрутить вниз вывод консолиPage downPage downPage down
Переместиться назад по истории командUp arrowUp arrowUp arrow
Переместиться вперёд по истории командDown arrowDown arrowDown arrow
Перейти в начало строкиHomeCtrl + ACtrl + A
Перейти в конец строкиEndCtrl + ECtrl + E
Выполнить текущее выражениеEnterEnterEnter
Добавить новую строку, чтобы войти в режим ввода многострочного выраженияShift + EnterShift + EnterShift + Enter
+ +

Всплывающее окно автодополнения

+ +

Эти клавиатурные сокращения работают, когда открыто всплывающее окно автодополнения:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Выбрать текущее предложение в окне автодополненияTabTabTab
Закрыть окно автодополненияEscEscEsc
Перейти к предыдущему предложению в окне автодополнениявверхвверхвверх
Перейти к следующему предложению в окне автодополнениявнизвнизвниз
Прокрутить вверх предложения в окне автодополненияPage upPage upPage up
Прокрутить вниз предложения в окне автодополненияPage downPage downPage down
Прокрутить в начало списка (новое в Firefox 34)HomeHomeHome
Прокрутить в конец списка (новое в Firefox 34)EndEndEnd
+
+ +

Редактор стилей

+ + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть редактор стилейShift + F7Shift + F7Shift + F7
Открыть всплывающее окно автодополненияCtrl + ПробелCmd + ПробелCtrl + Пробел
+ +
+

Простой редактор JavaScript

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Открыть простой редактор JavaScriptShift + F4Shift + F4Shift + F4
Запустить код из простого редактора JavaScriptCtrl + RCmd + RCtrl + R
Запустить код из простого редактора JavaScript, отобразить результат в Инспекторе объектовCtrl + ICmd + ICtrl + I
Запустить код из простого редактора JavaScript, вставить результат в качестве комментарияCtrl + LCmd + LCtrl + L
Повторно вычислить текущую функциюCtrl + ECmd + ECtrl + E
Перезагрузить текущую страницу, затем запустить код из простого редактора JavaScriptCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Сохранить кодCtrl + SCmd + SCtrl + S
Открыть существующий кодCtrl + OCmd + OCtrl + O
Создать новый кодCtrl + NCmd + NCtrl + N
Закрыть простой редактор JavaScriptCtrl + WCmd + WCtrl + W
Красивая печать кодаCtrl + PCmd + PCtrl + P
Показать предложения автодополнения (новинка в Firefox 32)Ctrl + SpaceCtrl + SpaceCtrl + Space
Показать встроенную документацию (только Firefox 32)Shift + ПробелShift + ПробелShift + Пробел
Показать встроенную документацию (Firefox 33 и далее)Ctrl + Shift + ПробелCtrl + Shift + ПробелCtrl + Shift + Пробел
+
+ +
+

Пипетка

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
КомандаWindowsOS XLinux
Выбрать текущий цвет под курсоромEnterEnterEnter
Закрыть пипеткуEscEscEsc
Перемещаться по 1-му пикселюстрелкистрелкистрелки
Перемещаться по 10 пикселейShift + стрелкиShift + стрелкиShift + стрелки
+
diff --git a/files/ru/tools/memory/index.html b/files/ru/tools/memory/index.html new file mode 100644 index 0000000000..3cec3f7248 --- /dev/null +++ b/files/ru/tools/memory/index.html @@ -0,0 +1,71 @@ +--- +title: Память +slug: Tools/Memory +tags: + - DevTools + - Firefox + - Mozilla + - NeedsTranslation + - Tools + - TopicStub +translation_of: Tools/Memory +--- +
{{ToolsSidebar}}
+ +
Инструмент "Память" позволяет вам делать снимки выделенной на куче памяти текущей вкладкой. Он так же предоставляет несколько представлений кучи, которые могут показать какие объекты используют память и где именно в коде происходит выделение.
+ +
+ +

{{EmbedYouTube("DJLoq5E5ww0")}}

+ +
+

Основы

+ +
+ +
+ +
+

Анализ снимков

+ +
+

The Tree map view is new in Firefox 48, and the Dominators view is new in FIrefox 46.

+
+ +

После того, как вы сделали снимок, есть три главных вида (для просмотра снимка), предоставляемых инструментом "Память".

+ + + +

If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.

+ +
+

Concepts

+ +
+ +
+ +
+

Примеры

+ +

Используемые примеры в документации инструмента "Память".

+ +
+ +
diff --git a/files/ru/tools/memory/tree_map_view/index.html b/files/ru/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..b37817036a --- /dev/null +++ b/files/ru/tools/memory/tree_map_view/index.html @@ -0,0 +1,50 @@ +--- +title: Просмотр дерева объектов памяти +slug: Tools/Memory/Tree_map_view +tags: + - Debug + - memory + - Отладка + - Память +translation_of: Tools/Memory/Tree_map_view +--- +
{{ToolsSidebar}}
+

Вид "Дерево объектов" (Tree map view) - новая возможность в Firefox 48.

+
+ +

Вид "Дерево объектов" (Карта объектов, Tree map view) даёт визуальное представление снимка памяти (snapshot), который поможет быстро определить, какие из объектов используют больше оперативной памяти.

+ +

Данный вид - это "иерархическое (древовидное) представление данных, представленное в виде набора вложенных прямоугольников". Размер прямоугольников соответствует некоторому относительному количественному представлению о данных.

+ +

В Дереве, показываемом в "Memory tool", объекты в куче (heap) разделены на четыре верхнеуровневых категории:

+ + + +

Каждая категория представлена прямоугольником, размер каждого их которых пропорционален размеру занимаемой памяти объектами в "куче". Это значит, что вы можете быстро сообразить, какие виды объектов используют больше памяти.

+ +

Подкатегории верхнего уровня:

+ + + +

Вот несколько примеров снимков памяти (snapshots) в древовидном виде:

+ +

+ +

Это дерево создано по скрипту в начале страницы DOM allocation example, создающем большое число DOM-узлов (200 объектов HTMLDivElement и 4000 объектов HTMLSpanElement). Вы видите, как почти вся "куча" используется элементами HTMLSpanElement, которые уже создались.

+ +

+ +

Это дерево после выполнения скрипта со страницы monster allocation example, который создаёт три массива, каждый содержащий 5000 монстров (персонажей), каждый из которых имеет случайно-сгенерированное имя. Вы заметите, что большая часть "кучи" занята строками (strings), используемых для имён, и объектов, используемых для хранения других атрибутов монстров.

+ +

+ +

Это дерево со страницы http://www.bbc.com/, и, вероятно, является примером из жизни лучшим, чем предыдущие примеры. Вы видите, что большую часть занимают скрипты (scripts), которые загружены из множества разных источников.

diff --git a/files/ru/tools/network_monitor/index.html b/files/ru/tools/network_monitor/index.html new file mode 100644 index 0000000000..2acb63a582 --- /dev/null +++ b/files/ru/tools/network_monitor/index.html @@ -0,0 +1,588 @@ +--- +title: Сетевой монитор +slug: Tools/Network_Monitor +tags: + - Debug + - Dev Tools + - Firefox + - Guide + - Networking + - 'l10n:priority' + - Отладка + - инструменты +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +

Сетевой монитор (Network Monitor) показывает все сетевые запросы, которые выполняет Firefox (например, когда загружается страница или выполняются запросы типа XMLHttpRequests), а также как долго выполняется запрос и детали запроса.

+ +

Как открыть Сетевой монитор

+ +

Есть несколько различных способов:

+ +
+

Пожалуйста, обратите внимание, что сочетание клавиш было изменено в Firefox 55

+
+ + + +

Сетевой монитор появится внизу окна браузера. Для просмотра запросов перезагрузите страницу:

+ +

+ +

Сетевой монитор записывает сетевые запросы постоянно, пока открыты Инструменты разработчика, даже когда вкладка Сеть не выбрана. Поэтому можно начать отладку страницы, например, в Веб-консоли, а потом переключиться и посмотреть сетевую активность в Сетевом мониторе без перезагрузки страницы.

+ +

Обзор пользовательского интерфейса

+ +

Интерфейс разбит на четыре основные части:

+ + + +

+ + + +

Performance analysis view

+ +

Панель инструментов

+ +

Начиная с Firefox 47 и далее, панель инструментов находится сверху окна. В ранних версиях Firefox она располагалась снизу.

+ +

Она содержит:

+ + + +
+

Примечание: Начиная с Firefox 58, кнопка фильтра "Flash"более недоступна, поэтому запросы Flash включены в фильтр "Прочее" ({{bug(1413540)}}).

+
+ +

Список сетевых запросов

+ +

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

+ +

По умолчанию Сетевой монитор очищается каждый раз, когда вы переходите на новую страницу или перезагружаете текущую. Вы можете это изменить посредством включения галочки "Включить непрерывные логи" в настройках.

+ +

Поля таблицы запросов

+ +

Начиная с Firefox 55, вы можете выбирать разные колонки, кликая правой кнопкой мыши на заголовок таблицы, а затем выбирая нужные колонки в выпадающем меню. Опция "Восстановить колонки" доступна для сброса списка колонок к исходному варианту. Список колонок:

+ + + +

По клику на заголовок колонки произойдёт сортировка всех запросов по этой колонке. По умолчанию сортировка происходит по колонке "Временная шкала".

+ +

Миниатюры изображений

+ +

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

+ +

+ +

Значки безопасности

+ +

Сетевой монитор показывает значок в колонке Домен:

+ +

+ +

Это предоставляет дополнительную информацию о безопасности запроса:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ЗначокЗначение
HTTPS
Слабый HTTPS (наример, использовался некриптостойкий шифр)
Ошибка HTTPS (например, недействительный сертификат)
HTTP
+

Localhost

+
URL принадлежит домену, о котором известно, что он отслеживает пользователей, поэтому URL был заблокирован.
+ +

По слабым и ошибочным HTTPS-запросам, вы можете посмотреть более детальную информацию о проблеме на вкладке "Защита".

+ +

Колонка "Причина" (Cause)

+ +

Колонка "Причина" указывает, что было причиной запроса. Обычно это очевидно, и можно увидеть корреляцию между этой колонкой и колонкой "Тип". Наиболее распространённые значения:

+ + + +
+

Когда запрос срабатывает из JavaScript, то слева от надписи в колонке "Причина" появится маленький значок JS. При наведении на него курсором мыши появится всплывающее окно, содержащее трассировку стека для запроса; это даёт подсказку, откуда был вызван запрос.

+ +

+ +

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

+
+ +

Временной график

+ +

Список запросов отображает время выполнения разных частей каждого запроса.

+ +

+ +

Каждый график дан в горизонтальном виде в своей строке запроса, сдвинутый относительно позиций других запросов, поэтому вы можете увидеть полное время использованное для загрузки страницы. Для понимания деталей цветового кодирования, используемого здесь, загляните в раздел "Тайминги".

+ +

Начиная с Firefox 45 график содержит две вертикальные линии:

+ + + +

Фильтр запросов

+ +

Вы можете отфильтровать запросы по типу контента, по URL, по XMLHttpRequests или WebSocket, или по свойствам запроса.

+ +

Фильтрация по типу контента

+ +

Для фильтрации по типу контента используйте кнопки на панели инструментов.

+ +

Фильтрация XHR

+ +

Для просмотра только {{Glossary("XHR (XMLHttpRequest)", "XHR-запросов")}} используйте кнопку "XHR" панели инструментов.

+ +

Фильтрация WebSockets

+ +
+

Новое в Firefox 48

+
+ +

Для просмотра только подключений WebSocket, используйте кнопку "WS" панели инструментов.

+ +

Для контроля данных, передаваемых через WebSocket-соединения, попробуйте использовать дополнение WebSocket Sniffer.

+ +

Фильтрация по URL

+ +

Для фильтрации по URL используйте поле поиска, расположенное правее на Панели инструментов. Кликните на это поле или нажмите клавиши Ctrl + F или Cmd + F, и начните набирать текст. При этом список запросов будет отфильтрован по строкам, содержащим введённую подстроку; кроме того, фильтрация также будет происходить по колонкам "Домен" и "Файл".

+ +

Начиная с Firefox 45, вы можете фильтровать запросы, которые не содержат введённую вами строку, предварив вводимую строку символом "-". Например, запрос "-google.com" покажет все запросы, которые не имеют подстроки "google.com" в своих URL.

+ +

Фильтрация по свойствам

+ +
+

Новое в Firefox 55

+
+ +

Для фильтрации по конкретным свойствам запроса используйте поле поиска на Панели инструментов. Но это поле признаёт только определённые ключевые слова, которые используются для фильтрации по конкретным свойствам запроса. За ключевым словом следует двоеточие, а затем значение фильтра. Значение фильтра регистронезависимое. Если написать знак "минус" (-), то это применит к фильтру отрицание. Также можно комбинировать несколько фильтров через пробел.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ключевое словоЗначениеПримеры
status-codeПоказать ресурсы, имеющие указанный код HTTP-статуса.status-code:304
methodПоказать ресурсы, запрошенные через указанный HTTP-метод запроса.method:post
domainПоказать ресурсы, пришедшие с указанного домена.domain:mozilla.org
remote-ipПоказать ресурсы, пришедшие с сервера с указанным IP-адреcом.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeПоказать ресурсы, соответствующие типу причины. Типы можно найти в описании колонки "причина".cause:js
+ cause:stylesheet
+ cause:img
transferredПоказать ресурсы, имеющие указанный размер переданных данных или размер близкий к нему. Буква k может быть использована как суффикс для килобайт, m - мегабайт. Например, значение 1k эквивалентно 1024.transferred:1k
sizeПоказать ресурсы, имеющие указанный размер (после декомпрессии) или размер близкий к указанному. Буква k может быть использована как суффикс для килобайт, m - мегабайт. Например, значение 1k эквивалентно 1024.size:2m
larger-thanПоказать ресурсы, которые больше чем указанный размер в байтах. Буква k может быть использована как суффикс для килобайт, m - мегабайт. Например, значение 1k эквивалентно 1024.larger-than:2000
+ -larger-than:4k
mime-typeПоказать ресурсы, которые соответствуют указанному MIME-типу.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached и is:from-cache показывают только ресурсы, пришедшие из кэша.
+ is:running показывает только ресурсы, передаваемые в настоящее время.
is:cached
+ -is:running
schemeПоказать ресурсы, переданные через указанную схему.scheme:http
has-response-headerПоказать ресурсы, содержащие указанный HTTP-заголовок в ответе.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainПоказать ресурсы, имеющие заголовок Set-Cookie с атрибутом Domain, который имеет указанное значение.set-cookie-domain:.mozilla.org
set-cookie-nameПоказать ресурсы, имеющие заголовок Set-Cookie и в нём атрибут с указанным именем.set-cookie-name:_ga
set-cookie-valueПоказать ресурсы, имеющие заголовок Set-Cookie и в нём атрибут с указанным значением.set-cookie-value:true
regexpПоказать ресурсы, имеющие URL, который соответствует данному {{Glossary("regular expression", "регулярному выражению")}}.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Контекстное меню

+ +

При кликне правой клавишей мыши по строке отобразится контекстное меню:

+ + + +

Изменить и снова отправить

+ +

Эта опция открывает редактор, позволяющий вам отредактировать метод запроса, URL, параметры и заголовки и ещё раз отправить запрос.

+ +

Копировать как cURL

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Если метод запроса не GET или POST
--dataДля параметров запроса, закодированных в URL
--data-binaryДля параметров запроса типа Multipart. Например, файлы.
--http/VERSIONЕсли HTTP версия не 1.1
-IЕсли метод запроса HEAD
-H +

Один для каждого заголовка запроса.

+ +

Начиная с Firefox 34, если присутствует заголовок "Accept-Encoding", то команда cURL будет включать --compressed вместо -H "Accept-Encoding: gzip, deflate". Это значит, что запрос был автоматически распакован.

+
+ +

Копировать/Сохранить всё как HAR

+ +
+

Новое в Firefox 41.

+
+ +

Эти операции создают HTTP-архив (HAR) для всех запросов из списка. Формат HAR позволяет вам экспортировать детальную информацию о сетевых запросах. "Копировать всё как HAR" копирует данные в буфер, "Сохранить всё как HAR" открывает диалог сохранения архива на диск.

+ +

Детализация запроса

+ +

После щелчка по строке в правой части Сетевого монитора появится новая панель, которая предоставит более детальную информацию о запросе.

+ +

+ +

Вкладки сверху этой панели позволяют переключаться между следующими страницами:

+ + + +

Щелчок по значку, расположенном справа на панели инструментов (справа от поиска), закроет эту панель и вернёт вас к просмотру списка.

+ +

Заголовки (Headers)

+ +

Эта вкладка содержит основную информацию о запросе:

+ +

+ +

Она включает:

+ + + +

Вы можете отфильтровать отображаемые заголовки:

+ +

+ +
+

Новое в Firefox 54

+
+ +

Кроме того, каждый заголовок это ссылка для углубленного изучения документации заголовков HTTP.

+ +

Куки (Cookies)

+ +

Эта вкладка показывает все детали кук, которые были отправлены с запросом или ответом:

+ +

+ +

Как и в случае с заголовками их список можно фильтровать.

+ +

Параметры (Params)

+ +

Эта вкладка отображает параметры GET и данные POST запроса:

+ +

+ +

Ответ (Response)

+ +

Полное содержание ответа. Если в ответе HTML, JS или CSS, то он отобразится как текст:

+ +

+ +

Если ответ - JSON, то он отобразится как просматриваемый объект.

+ +

Если ответ - изображение, то вкладка будет содержать предпросмотр:

+ +

+ +

Тайминги (Timings)

+ +

Вкладка "Тайминги" разбивает сетевой запрос на следующие этапы, определённые в спецификации HTTP-архива (HAR):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ИмяОписание
Блокировка (Blocked) +

Время, потраченное в очереди ожидания для создания сетевого соединения.

+ +

Браузер накладывает ограничение на число одновременных соединений с одним сервером. В по умолчанию это 6, но это можно изменить, используя свойство network.http.max-persistent-connections-per-server. Если все соединения используются, то браузер не может скачивать больше ресурсов, до тех пор пока одно из соединений не освободится.

+
Разрешение DNS (DNS resolution)Время на разрешение имени хоста.
Соединение (Connecting)Время на создание TCP-соединения.
Отправка (Sending)Время на отправку HTTP-запроса на сервер.
Ожидание (Waiting)Ожидание ответа от сервера.
Получение (Receiving)Время на чтение полного ответа с сервера (или из кэша).
+ +

Здесь представлена детальная информация, есть аннотации, а также "графики-полосы" времени запроса, которые показывают разбивку общего времени на этапы:

+ +

+ +

Защита (Security)

+ +

Если работа с сайтом ведётся через HTTPS, то у вас появится дополнительная вкладка "Защита". Она содержит детали об используемой безопасной связи, включая: протокол, набор шифров, детали сертификата:

+ +

+ +

На вкладке "Защита" отображается предупреждение о слабой безопасности:

+ +
    +
  1. Использование SSLv3 вместо TLS
  2. +
  3. Использование шифра RC4
  4. +
+ +

+ +

Предпросмотр (Preview)

+ +

Удалено в Firefox 55.

+ +

Если тип файла это HTML, то появится вкладка "Предпросмотр". Она отображает вид, как выглядит HTML-страница в браузере:

+ +

+ +

Приостановка и возобновление записи сетевого трафика

+ +

В Firefox 58 и далее, Сетевой монитор имеет кнопку, которая приостанавливает и возобновляет запись трафика текущей страницы. Это полезно, когда, например, вы хотите получить установившийся вид страницы для отладки, но вид страницы пока ещё меняется, потому что она ещё грузится или выполняются запросы. Кнопка "Пауза" позволяет увидеть текущий снимок состояния (snapshot).

+ +

Эта кнопка находится скраю слева на главной панели Сетевого монитора, и выгдялит как обычная кнопка "Пауза" — .

+ +

Вот её вид:

+ +

+ +

Когда она нажата, то меняет значок на иконку "Пуск" (треугольник), и вы можете возобновить запись трафика, нажав на эту кнопку ещё раз.

+ +

Анализ производительности

+ +

Сетевой монитор включает инструмент для анализа производительности, который покажет вам, как долго браузер загружает различные части сайта.
+
+ Для запуска инструмента анализа производительности кликните значок "Часы" на панели.

+ +

(Кроме того, если у вас только что открытый Сетевой монитор, и список запросов ещё пуст, то у вас будут "Часы" в главном окне.)

+ +

Сетевой монитор загрузит сайт дважды: первый раз с пустым кэшем браузера, а второй - с заполненным. Это имитирует вход пользователя на сайт впервые и последующие посещения. Он показывает результаты обоих запусков бок о бок горизонтально, либо вертикально, если окно браузера сжатое:

+ +

+ +

Результаты каждого запуска представлены в таблице и круговой диаграмме. Таблицы группируют ресурсы по типам и показывают их общий размер и общее время, занятое их загрузкой. Сопровождающие круговые диаграммы показывают относительный объём ресурсов каждого типа.

+ +

Для возврата в Сетевой монитор нажмите кнопку "Назад", расположенную слева от результатов.

+ +

Нажав на конкретную часть в круговой диаграмме вы перейдёте в Сетевой монитор, в котором будут автоматически установлены фильтры для просмотра запросов этого типа ресурса.

diff --git a/files/ru/tools/network_monitor/throttling/index.html b/files/ru/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..34e21d4452 --- /dev/null +++ b/files/ru/tools/network_monitor/throttling/index.html @@ -0,0 +1,97 @@ +--- +title: Throttling +slug: Tools/Network_Monitor/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

Сетевой монитор позволяет регулировать скорость вашей сети для эмуляции различной скорости соединения, таким образом вы можете увидеть как ваше приложение будет работать с разными типами соединения.

+ +

Throttling

+ +

Панель инструментов имеет выпадающее меню Trottling, которое позволяет регулировать скорость вашей сети для эмуляции различных условий сети. Просто выберите один из вариантов и оно будет использовано после перезагрузки страницы.

+ +

+ +

Эмулируемые характеристики:

+ + + +

Таблица ниже содержит значения для каждого типа соединения, но не полагайтесь на эту информацию для точных измерений производительности; она предназначена для того, чтобы дать приблизительное представление о производительности. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВариантСкорость загрузкиСкорость отдачиМинимальная задержка (мс)
GPRS50 Kbps20 Kbps500
Regular 2G250 Kbps50 Kbps300
Good 2G450 Kbps150 Kbps150
Regular 3G750 Kbps250 Kbps100
Good 3G1.5 Mbps750 Kbps40
Regular 4G/LTE4 Mbps3 Mbps20
DSL2 Mbps1 Mbps5
Wi-Fi30 Mbps15 Mbps2
+ +

Особенности сетевого монитора

+ +

Следующие статьи охватывают различные аспекты сетевого монитора:

+ + diff --git a/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html new file mode 100644 index 0000000000..fb3888275d --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -0,0 +1,87 @@ +--- +title: Edit Shape Paths в CSS +slug: Tools/Page_Inspector/How_to/Edit_CSS_shapes +tags: + - Просмотр правил + - Редактор путей форм + - выделение + - инструменты + - фигуры +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes +--- +

{{ToolsSidebar}}

+ +

The Shape Path Editor - это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью {{cssxref ("clip-path")}}, а также свойство CSS {{cssxref ("shape-outside")}} и {{cssxref ("<basic-shape>")}}. В этом руководстве вы найдете все доступные варианты.

+ +

Активация / деактивация Shape Path Editor

+ +

The Shape Path Editor доступен через панель правил CSS, которую можно открыть, как описано в руководстве Opening the Inspector. После того как вы выбрали свой элемент, вы увидите значок формы рядом с любым допустимым значением, например один для shape-outside.

+ +

+ +

Щелчок по иконке заставит Редактор выделить фигуру.

+ +

+ +

Чтобы отключить Shape Path Editor, щелкните по иконке еще раз или выберите другой элемент или другой редактор. Обратите внимание, что Shape Path Editor не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.

+ +

Понимание строк, нарисованных редактором

+ +

После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.

+ + + +

+ +

Редактирование основных фигур

+ +

Параметры, предоставленные вам инструментом, будут различаться в зависимости от типа базовой формы, которую вы редактируете. Доступ к параметрам можно получить, активировав Shape Path Editor с помощью обычного щелчка по иконке, и вы можете использовать контекстное меню (Ctrl/Cmd + щелчёк) для доступа к дополнительным функциям.

+ +

circle()

+ +

Если значение shape-outside равно circle(), значит вы создаете circle basic shape. При нажатии на иконку формы рядом со значением circle() будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр. Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.

+ +

+ +

В панели правил вы можете увидеть значения для circle() при изменении формы. Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, измененный путь формы.

+ +

ellipse()

+ +

Если значение shape-outside равно ellipse(), значит вы используете ellipse basic shape. Значение ellipse() работает так же, как circle() в Shape Path Editor. Эллипс представляет собой сжатый круг и, следовательно, имеет возможность изменять размер по горизонтали и вертикали, когда вы нажимаете на значок фигур.

+ +

+ +

inset()

+ +

Если значение shape-outside равно inset(), значит вы используете inset basic shape, которая позволяет создавать значения смещения, вытягивая содержимое из margin box.

+ +

Каждая сторона прямоугольника может быть нацелена после нажатия на значок формы, чтобы активировать Shape Path Editor, и перетаскивание каждой стороны будет обновлять значения для top, right, bottom, и left смещяя значения.

+ +

+ +

polygon()

+ +

Если значение shape-outside равно polygon(), значит вы используете polygon basic shape. Это самый сложный из основных значений формы, поэтому инструмент дает вам больше возможностей при их редактировании:

+ + + +

+ +

Перемещение и масштабирование фигур

+ +

Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмете Ctrl/Cmd + щелчек на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее. Еще раз, произойдет отсечение, если вы превысите границы margin box.

+ +

+ +

Если ваша форма является многоугольником, вы также получаете возможность вращать ее вокруг оси.

+ +

Поддержка браузера

+ +

The Shape Path Editor в настоящее время работает для форм, сгенерированных с помощью {{cssxref ("clip-path")}}; он также будет работать для форм, созданных с помощью {{cssxref ("shape-outside")}} с Firefox 62.

diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..12eae4fb72 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,195 @@ +--- +title: Просмотр и редактирование CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +
{{ToolsSidebar}}
+ +

Просмотр и редактирование CSS в панели CSS Инспектора.

+ +

Просмотр CSS правил

+ +

На панели Rules(Правила) отображаются все правила, применяемые к выбранному элементу, в порядке приоритета сверху-вниз:

+ +

+ +

В списке правил так же будут отображены и стили браузера (user-agent styles), если данная опция выставлена в настройках панели разработчика (developer tool settings). Заметьте, эта опция не зависит от опции "Browser styles" вкладки Computed view.

+ +

Начиная с Firefox 44 и выше, на панеле Rules отображаются все авторские стили, включая те, которые не поддерживаются или содержат ошибки. Это может помочь вам понять, почему определенные стили не применяются:

+ +

+ +

Rule display

+ +

 It displays each rule as in a stylesheet, with a list of selectors followed by a list of property:value; declarations.

+ +

+ + + +

User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix (user agent):

+ +

+ +

Filtering rules

+ +

Начиная с Firefox 40, это поле вверху вкладки Ruels подписан как "Filter Styles":

+ +

Как только вы что-нибудь напечатаете:

+ + + +

Нажмите на "X" в конце поискового поля для сброса фильтра.

+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ + + +
+

New in Firefox 43

+
+ +

По умолчанию, блок поиска подсвечивает все объявления, которые содержат любую часть строки. К примеру, для "color" подсветятся объявления, содержащие border-bottom-color и background-color, а также просто color.:

+ +

+ +

Starting in Firefox 43, if you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:

+ +

+ +

Displaying pseudo-elements

+ +

From Firefox 41, the Rule view displays the following pseudo-elements, if they are applied to the selected element:

+ +

:after
+ :before
+ :first-letter
+ :first-line
+ :selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:

+ +

+ +

Clicking the triangle displays them:

+ +

+ +

Setting :hover, :active, :focus

+ +

From Firefox 41, there's a new button to the right of the filter box:

+ +

Click the button to see three checkboxes, which you can use to set the {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} pseudo-classes for the selected element:

+ +

Although this button is new in Firefox 41, the feature existed in earlier versions of Firefox. It could - and still can - be accessed from the popup menu in the HTML view.

+ +
+

New in Firefox 43

+
+ +

Starting in Firefox 43, if you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:

+ +

+ + + +

At the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the Style Editor.

+ +

From Firefox 41 you can copy the location of the source file: right-click the link and select "Copy Location".

+ +

The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the Style Editor settings, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the Style Editor documentation.

+ +

Get help for CSS properties

+ +

Starting in Firefox 40, if you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:

+ +

{{EmbedYouTube("qZRLqpJiUsI")}}

+ +

Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.

+ +

Overridden declarations

+ +

If a CSS declaration is overridden by some other CSS rule with a greater weight, then the declaration is shown with a line through it.

+ +
+

New in Firefox 43

+
+ +

Starting in Firefox 43, overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.

+ +

This makes it easy to see which rule is overriding the declaration:

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examine computed CSS

+ +

To see the complete computed CSS for the selected element, switch to the Computed view. This shows the calculated value that each CSS property has for the selected element:

+ +

+ +

Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:

+ +

+ +

By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.

+ +

Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.

+ +

Edit rules

+ +

If you click on a declaration or a selector in the Rules view you can edit it and see the results immediately. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears under the declaration.

+ +

Any changes you make are temporary: reloading the page will restore the original styling.

+ +

You can use the arrow keys to increase/decrease numeric rules while editing. The Up arrow will turn "1px" to 2px, and Shift + Up/Down will increment by 10. Alt + Up/Down change values by 0.1, and Shift + Page up/Page down will add or subtract 100 from the value.

+ +

From Firefox 44, edits that you make in the Rules view are reflected in the Style Editor, and vice versa.

+ +

Add rules

+ +

You can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.

+ +

+ +

Starting in Firefox 41, there's a button that enables you to do the same thing:

+ +

+ +

Copy rules

+ +

Starting in Firefox 41, there are extra context menu items in the Rules view to copy rules, and pieces of rules, to the clipboard:

+ + + +

+ +

See also

+ +

The Inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. To read about these see the list of how to guides.

diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..b501796528 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,183 @@ +--- +title: Исследование и редактирование HTML +slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +tags: + - Guide + - Tools + - Инспектор +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +
{{ToolsSidebar}}

Исследовать и редактировать HTML-код страницы можно в панели HTML.

+ +

Навигация по HTML-коду

+ +

Вверху панели HTML находится панель инструментов, состоящая из навигационной цепочки и поля поиска.

+ +

Навигационная цепочка для HTML-кода

+ +

Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:

+ +

Нажатие и удержание левой кнопки мыши на одном из элементов навигационной панели вызывает меню, позволяющее выбрать какой-либо из сиблингов этого элемента.  Кнопки со стрелками на левом и правом концах панели цепочки прокручивают цепочку, если она длиннее доступного пространства.

+ +

С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.

+ +

Поле поиска

+ +

Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидете подсказку с результатами поиска.

+ +

Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.

+ +

Можно искать тег, или ввести любую другую строку селекторов CSS, так что можно найти элемент с ID myId, введя строку #myId.

+ +

Начиная с Firefox 40, можно искать по атрибутам class или id без учёта формата селекторов CSS, так что для поиска соответствующего элемента достаточно ввести просто myId.

+ +

Дерево HTML

+ +

Остальная часть панели показывает HTML-код страницы в виде дерева.  Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел.  Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.

+ +

Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.

+ +

Узлы, скрытые с помощью display:none, показываются бледнее (как и совсем не отображаемые узлы, например <head>).

+ +

::before и ::after

+ +

Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью ::before и ::after:

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Контекстное меню элемента

+ +

Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:

+ +

Меню содержит следующие пункты:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Править как HTMLHTML-код элемента
Копировать внутренний HTMLСкопировать innerHTML элемента
Копировать внешний HTMLСкопировать outerHTML элемента
Копировать уникальный селекторСкопировать CSS-селектор, выбирающий этот и только этот элемент.
Копировать URL данных изображенияСкопировать изображение в формате data:// URL, если выбранный элемент изображение.
Показать свойства DOMОткрыть split console и ввести туда команду «inspect($0)», чтобы исследовать текущий выбранный элемент.
Вставить внутренний HTMLВставить содержимое буфера в узел в качестве его innerHTML.
Вставить внешний HTMLВставить содержимое буфера в узел в качестве его outerHTML.
Вставить/ПередВставить содержимое буфера в документ прямо перед этим узлом.
Вставить/ПослеВставить содержимое буфера в документ прямо после этого узла.
Вставить/Как первого потомкаВставить содержимое буфера в документ в качестве первого дочернего элемента этого узла.
Вставить/Как последнего потомкаВставить содержимое буфера в документ в качестве последнего дочернего элемента этого узла.
Прокрутить в вид +
+

Новое в Firefox 40

+
+ Прокручивает веб-страницу, чтобы был виден выбранный узел.
Удалить узелУдалить элемент
Открыть ссылку в новой вкладке +
+

Новое в Firefox 40

+
+ (только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.
Открыть файл в Отладчике +
+

Новое в Firefox 40

+
+ (только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.
Открыть файл в Редакторе стилей +
+

Новое в Firefox 40

+
+ (только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.
Копировать адрес ссылки +
+

Новое в Firefox 40

+
+ (только в меню для URL) Скопировать URL.
:hoverУстановить CSS’ный псевдо-класс CSS :hover
:activeУстановить CSS’ный псевдо-класс :active
:focusУстановить CSS’ный псевдо-класс :focus
+ +

Редактирование HTML

+ +

Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо в панели HTML: сделайте двойной щелчок по тексту, который Вы хотите изменить, измените его, нажмите Enter, — и изменения сразу же будут применены.

+ +

Чтобы редактировать outerHTML элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:

+ +

скриншот Nightly 2015-04-26Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.

+ +

Копирование и вставка

+ +

Используя контекстное меню, можно копировать узлы в дереве HTML и потом вставлять их.

+ +

Перетаскивание

+ +
+

Новое в Firefox 39.

+
+ +

С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..e19459895d --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,44 @@ +--- +title: Просмотр и редакторование блоковой модели +slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +
{{ToolsSidebar}}
+ +

Просмотр Блоковой модели

+ +

Если использовать инструмент "Кнопка выбора элемента" и навести на элемент на странице, вы увидите блоковую модель этого элемента, которая появится поверх него:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

Также, если вы наведёте на элемент в  панели HTML, то поверх него появится блоковая модель:

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

С  39той версии Firefox  строковые элементы разделяются на несколько строк-блоков, подсветка показывает каждую линию в индивидуальной строке-блоке:

+ +

+ +

Вкладка блоковой модели

+ +

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

+ +

+ +

С 40й версии Firefox если навести на значение можно увидить подсказку из какого правила оно приходит:

+ +

+ +

Если в этой вкладке навести на часть блоковой модели, то эта часть подсветится на странице:

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Изменение блоковой модели

+ +

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

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/ru/tools/page_inspector/how_to/index.html b/files/ru/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..476882dbdf --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Как +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}

Ссылки для различных КАК можно найти здесь. Эти ссылки описывают подробно Практические методы.

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..50416df3b8 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,26 @@ +--- +title: Исследование и выбор цветов +slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +
{{ToolsSidebar}}

В view «Правила» панели CSS, если правило содержит цветовое значение, рядом со значением показывается пример соответствующего цвета:

+ +

+ +

Если щёлкнуть по примеру цвета, появится инструмент выбора цвета, позволяющий изменить цвет:

+ +

+ +

Инструмент выбора цвета включает значок пипетки: щёлкнув по этому значку, можно использовать пипетку для взятия нового цвета для элемента со страницы:

+ +

{{EmbedYouTube("0Zx1TN21QOo", "16:9")}}

+ +

Начиная с Firefox 40, для изменения формата отображения цвета надо, удерживая кнопку Shift, щёлчкнуть на образце цвета кнопкой мыши.

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

 

diff --git a/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html b/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html new file mode 100644 index 0000000000..a4e0927d76 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html @@ -0,0 +1,19 @@ +--- +title: Открытие Инспектора +slug: Tools/Page_Inspector/How_to/Otkrytie_Inspektora +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +
{{ToolsSidebar}}

Есть два основных способа открытия Инспектора:

+ + + +

Инспектор появится в нижней части окна браузера:

+ +

Чтобы начать первые шаги по Инспектору, см. UI tour.

diff --git a/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html b/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html new file mode 100644 index 0000000000..16db872b70 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html @@ -0,0 +1,29 @@ +--- +title: Выбор элемента +slug: Tools/Page_Inspector/How_to/Vybor_elementa +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +
{{ToolsSidebar}}

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

Если Вы открыли Инспектор нажатием на «Исследовать элемент», элемент уже будет выбран.

+ +

В противном случае, когда вы будете перемещать мышь по странице, элемент под курсором мыши будет подсвечиваться, а подсказка будет содержать его HTML-тег, атрибуты class и/или ID, а также размер.  Одновременно в левой панели Инспектора появится HTML-код элемента в его контексте:

+ +

С версии Firefox 39 можно использовать клавиши со стрелками для перехода между выбранными элементами:

+ + + +

Это особенно полезно когда элемент и его родитель отображаются на одном и том же пространстве экрана, так что трудно выбрать один из них мышью.

+ +

Нажатие на подсвеченный элемент выбирает его.  Когда элемент выбран, в HTML pane [en] в левой части Инспектора подсвечивается его разметка, а в CSS pane [en] в правой части Инспектора выводится информация о его стилях:

+ +

+ +

Есть два способа выбрать другой элемент: или щёлкните его разметку в HTML pane, или нажмите "Select element" button [en], а потом щёлкните по элементу на веб-странице.

diff --git a/files/ru/tools/page_inspector/how_to/work_with_animations/index.html b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..3513e300d1 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,129 @@ +--- +title: Работа с анимацией +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Анимация + - Инспектор +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +
{{ToolsSidebar}}

Редактор @ключевых кадров

+ +

Любые @keyframes rules связанные с выбранным элементом отображаются в виде Rules view и редактируются:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Функция изменения строки

+ +

Когда вы create a CSS animation вы можете задать timing function: это определяет скорость, с которой анимация прогрессирует. Один из способов определить функцию является синхронизация с кубической кривой Безье.

+ +

Временные функции, определенные как кубические кривые Безье получают значок в правилах просмотра. При нажатии на иконку вы получаете визуальный редактор для кривой, что позволяет перетащить P1 and P2, и увидеть результат на странице:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +
+
Эта функция использует открытый исходный код Lea Verou’s cubic-bezier.com.
+
+ +

 

+ +

Кубический редактор Безье включает в себя ряд предварительных настроек, сгруппированных в разделе "Ease-in", "Ease-out", и "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

+ +

Инспектор Анимации

+ +
+

Хотя этот инструмент был введен в Firefox 41, его пользовательский интерфейс был переделан в Firefox 43. В данной статье описывается инспектор анимации появившийся в Firefox 43 и последующих выпусках. Если вы хотите увидеть, как инспектор анимации выглядит в Firefox 41 и 42 см this separate page.

+
+ +

Из Firefox 41, Инспектор страниц включил в себя extra view labeled "Animations".

+ +

 Этот вид отображает как CSS переходы и CSS анимации синхронизированы по шкале времени, перетаскивая виджет вы можете использовать для перемещения любую точку на временной шкале и увидеть страницу в этой точке.

+ +

Чтобы увидеть, как это работает, мы разберем пример. Раздел данный ниже содержит три серые иконоки, каждая из которых представляет разные Firefox channel. Если щелкнуть значок, он увеличивается измененяя цвет, и на экране отображается название канала. Нажмите на значок еще раз, чтобы изменить эффект. Эти анимации сделаны путем применения переходов к нескольким свойствам CSS.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}

+ +

Давайте использовать инспектор анимации, чтобы увидеть, что происходит на данном примере.

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

Теперь воспроизведение анимации:

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

Давайте внимательнее посмотрим на содержание инспектора анимации здесь:

+ +

+ +

Он показывает синхронизированный график для каждого перехода CSS свойств участвующих в анимации. Шкала времени начинается с начала первого перехода, и заканчивается в конце последнего перехода, и помечена маркерами каждые 100 миллисекунд (это зависит от временного масштаба анимации отображаемой в данный момент). Вы можете видеть, что приведенный выше пример занимает 735 миллисекунд для запуска.

+ +

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

+ + + +

С левой стороны бара переключатель для узлов относящихся к анимации. если навести курсор на переключатель, то выделится узел на странице. Нажмите переключатель для выбора узла в инспекторе

+ +

Слева от переключателя имеется значок "мишень" (). Из Firefox 44, нажав на этот значок будет блокировать фломастер на элементе.

+ +

Применяя все это к нашему примеру, мы можем видеть, что :

+ + + +

Воспроизведение анимации

+ +

В верхней части инспектора анимации:

+ + + +

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

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

diff --git "a/files/ru/tools/page_inspector/how_to/\320\270\321\201\321\201\320\273\320\265\320\264\320\276\320\262\320\260\321\202\321\214_event_listeners/index.html" "b/files/ru/tools/page_inspector/how_to/\320\270\321\201\321\201\320\273\320\265\320\264\320\276\320\262\320\260\321\202\321\214_event_listeners/index.html" new file mode 100644 index 0000000000..c5ea101f0b --- /dev/null +++ "b/files/ru/tools/page_inspector/how_to/\320\270\321\201\321\201\320\273\320\265\320\264\320\276\320\262\320\260\321\202\321\214_event_listeners/index.html" @@ -0,0 +1,28 @@ +--- +title: Исследовать Event Listeners +slug: Tools/Page_Inspector/How_to/Исследовать_event_listeners +tags: + - Инспектор + - Руководство + - инструменты +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

Начиная с Firefox 33 вы увидите значок «ev» в области HTML, напротив элементов, у которых есть связаные с ними Event Listeners:

+ +

+ +

Нажмите на иконку, затем вы увидите всплывающее окно со списком всех Event Listeners, связанных с этим элементом:Каждая строка содержит:

+ + diff --git "a/files/ru/tools/page_inspector/how_to/\320\277\321\200\320\276\321\201\320\274\320\276\321\202\321\200_\321\210\321\200\320\270\321\204\321\202\320\276\320\262/index.html" "b/files/ru/tools/page_inspector/how_to/\320\277\321\200\320\276\321\201\320\274\320\276\321\202\321\200_\321\210\321\200\320\270\321\204\321\202\320\276\320\262/index.html" new file mode 100644 index 0000000000..24b490e3d3 --- /dev/null +++ "b/files/ru/tools/page_inspector/how_to/\320\277\321\200\320\276\321\201\320\274\320\276\321\202\321\200_\321\210\321\200\320\270\321\204\321\202\320\276\320\262/index.html" @@ -0,0 +1,24 @@ +--- +title: Просмотр шрифтов +slug: Tools/Page_Inspector/How_to/Просмотр_шрифтов +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}

Всплывающая подсказка у font-family

+ +

Если навести указатель на свойство font-family на вкладке «Правила», всплывёт подсказка с примером написанным соответствующим шрифтом:

+ +

+ +

Вкладка «Шрифты»

+ +

Режим просмотра шрифтов показывает все шрифты, используемые выбранным элементом. Заметьте, что он показывает шрифты, используемые на вашей системе, и они могут отличаться от шрифтов, указанных в CSS:

+ +

Скриншот вкладки Шрифты инспектора Nightly 2014-04-26 40.0a1.ru.linux-x86_64.

+ +

Образец шрифта по умолчанию «Abc», но до Firefox 36 он был contenteditable и свободно редактировался.

+ +

 

diff --git a/files/ru/tools/page_inspector/index.html b/files/ru/tools/page_inspector/index.html new file mode 100644 index 0000000000..c069e2ba2a --- /dev/null +++ b/files/ru/tools/page_inspector/index.html @@ -0,0 +1,86 @@ +--- +title: Инспектор страниц +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - Development + - 'Development:Tools' + - HTML + - Tools + - Web + - 'l10n:priority' + - Стили +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

Используйте Инспектор, чтобы исследовать и модифицировать HTML и CSS страницы.

+ +

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

+ +
+

Тур по интерфейсу пользователя

+ +

Чтобы осмотреться в Инспекторе, см. небольшой тур по интерфейсу пользователя.

+ +
+

Как…

+ +

Что можно делать с помощью Инспектора, читайте в следующих руководствах:

+ +
+ + + +
+ +
+

Справка

+ +
+ + +
+
+
Настройки
+
 
+
+
+
diff --git a/files/ru/tools/page_inspector/ui_tour/index.html b/files/ru/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..467b4a8edc --- /dev/null +++ b/files/ru/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,96 @@ +--- +title: Обзор интерфейса +slug: Tools/Page_Inspector/UI_Tour +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/UI_Tour +--- +
{{ToolsSidebar}}

Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.

+ +

Она охватывает три основных компонента интерфейса Инспектора:

+ + + +

Это руководство нарочно как можно более короткое.  В нём ссылки на другие руководства, с подробностями об использовании Инспектора.

+ +

Кнопка выбора элемента

+ +

Инспектор даёт вам подробную информацию о выбранном сейчас элементе.  Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:

+ +

+ +

Заметьте: она на главной панели инструментов веб-разработчика, так что быстро доступна из любого инструмента, не только Инспектора.

+ +

Чтобы научиться выбирать элемент, см. руководство по выбору элемента.

+ +

Панель HTML

+ +

Инспектор разделён на две половины.  Левую половину занимает панель HTML:

+ +

+ +

Чтобы узнать больше о структуре панели HTML, см. руководство по исследованию и редактированию.

+ +

Панель CSS

+ +

Правую сторону Инспектора занимает панель CSS:

+ +

Панель CSS имеет 5 режимов для просмотра различных данных:

+ + + +

Переключаться между этими режимами можно с помощью вкладок наверху панели.

+ +

Просмотр правил

+ +

Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:

+ +

Вкладка Правила Инспектора Nightly 2015-04-26

+ +

См. подробности в Исследование и редактирование CSS.

+ +

Просмотр вычисленного

+ +

Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.

+ +

Вкладка Вычислено Инспектора Nightly 2015-04-26

+ +

См. подробности в Исследование и редактирование CSS.

+ +

Просмотр шрифтов

+ +

Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (которые до Firefox 36 можно было редактировать).

+ +

Вкладка Шрифты Инспектора Nightly 2015-04-26

+ +

См. подробности в Просмотр шрифтов.

+ +

Вкладка «Блоковая модель»

+ +

Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.

+ +

Вкладка Блоковая модель Инспектора Nightly 2015-04-26

+ +

См. подробности в Examine and edit the box model.

+ +

Вкладка «Анимации»

+ +

Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:

+ +

 

+ +

+ +

См. подробности в Work with animations.

diff --git "a/files/ru/tools/page_inspector/\321\201\320\276\321\207\320\265\321\202\320\260\320\275\320\270\321\217_\320\272\320\273\320\260\320\262\320\270\321\210/index.html" "b/files/ru/tools/page_inspector/\321\201\320\276\321\207\320\265\321\202\320\260\320\275\320\270\321\217_\320\272\320\273\320\260\320\262\320\270\321\210/index.html" new file mode 100644 index 0000000000..ae162ef628 --- /dev/null +++ "b/files/ru/tools/page_inspector/\321\201\320\276\321\207\320\265\321\202\320\260\320\275\320\270\321\217_\320\272\320\273\320\260\320\262\320\270\321\210/index.html" @@ -0,0 +1,13 @@ +--- +title: Клавиатурные сокращения +slug: Tools/Page_Inspector/Сочетания_клавиш +tags: + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +
{{ToolsSidebar}}

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Глобальные сокращения

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/ru/tools/profiler/index.html b/files/ru/tools/profiler/index.html new file mode 100644 index 0000000000..2d3de16835 --- /dev/null +++ b/files/ru/tools/profiler/index.html @@ -0,0 +1,168 @@ +--- +title: Профилирование JavaScript +slug: Tools/Profiler +tags: + - Firefox + - Отладка + - Профайлер + - Профилирование + - Руководство + - инструменты +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}

Используйте средства профилирования, чтобы находить узкие места в своём JavaScript коде.  Профайлер периодически проверяет состояние стека вызовов JavaScript и составляет статистику на основе полученных в результате измерения величин.

+ +

Вы можете запустить профайлер выбрав «Profiler»  из меню «Web Develeper». Для операционных систем Linux и OS X данное меню находится в меню «Tools», в Windows его можно вызвать из меню «Firefox».

+ +

В открывшемся меню уже будет выбран профайлер.

+ +

 

+ +

Семплирующие профайлеры

+ +

 

+ +

Профайлер JavaScript — сэмплирующий профайлер. Это означает, что он периодически собирает информацию о состоянии интерпретатора JavaScript, сохраняет стек выполняющегося на момент сэмплирования кода. Статистически, число образцов полученных во время выполнения какой-либо функции, соответствует количеству времени, которое браузер проводит выполняя её, таким образом вы можете находить узкие места в своём коде.

+ +

Рассмотрим следующую программу в качестве примера:

+ +
function doSomething() {
+  var x = getTheValue();
+  x = x + 1;                   // -> sample A
+  logTheValue(x);
+}
+
+function getTheValue() {
+  return 5;
+}
+
+function logTheValue(x) {
+ console.log(x);               // -> sample B, sample C
+}
+
+doSomething();
+ +

Допустим мы запустили данную программу с активным профайлером, и во время её выполнения, профайлер взял три сэмпла, в местах указанных комментариями.

+ +

Они все взяты внутри doSomething(), но вторые два внутри функции logTheValue() вызванной doSomething(). В результате получим профиль состоящий из трёх записей:

+ +
Sample A: doSomething()
+Sample B: doSomething() > logTheValue()
+Sample C: doSomething() > logTheValue()
+ +

Конечно этих данных недостаточно, чтобы сделать какие-то выводы, но с гораздо большим количеством сэмплов, мы поймём, что узким местом в нашей программе является logTheValue().

+ +

 

+ +

Создание профиля

+ +

Нажмите кнопку stopwatch в профайлере, чтобы начать сбор сэмплов. Кнопка stopwatch подсвечена, если профайлер активен. Кликните на ней ещё раз и сохраните новый профиль:

+ +

 

+ +

+ +

Новый профиль будет открыт автоматически при нажатии "Stop".

+ +

+ +

Панель разделена на две части:

+ + + +

 

+ +

Анализируем профиль

+ +

 

+ +

Профиль разделён на две части:

+ + + +

График профилирования

+ +

График профилирования располагается в верхней части экрана профиля.

+ +

+ +

Горизонтальная ось это время, а вертикальная — размер стека вызовов на текущий сэмпл. Стек вызовов представляет количество активных функций  на момент сэмплирования.
+ Красные сэмплы на графике говорят о том, что браузер был недоступен на тот момент и пользователь мог наблюдать паузы в анимации и отклике браузера. Если профиль содержит красные образцы,  их следует разбить на несколько событий и рассмотреть  используя requestAnimationFrame и Workers.

+ +

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

+ +

+ +

В таком случае, над графиком появится новая кнопка с надписью вида: "Sample Range [AAA, BBB]". Нажав на неё, можно приблизить рассматриваемый участок и детально его рассмотреть.

+ +

+ +

Детали профилирования

+ +

Детали профилирования расположены в нижней части экрана профиля:

+ +

+ +

Когда вы впервые открываете новый сэмпл, панель сэмплов содержит единственную строку «(total)»,  как на скриншоте ниже. Если кликнуть на стрелке следующей за надписью «(total)», вы увидилте список всех функций верхнего уровня которые находятся в сэмпле.

+ +


+

+ +

Время выполнения (Running time) показывает число сэмплов в которых присутствует данная функция1 , далее следует процент появления функции в остальных сэмплах профиля.  Первая сверху строка показывает, что в профиле 2021 сэмпл, вторая строка показывает, что 1914 или 94.7% из них содержат в себе функцию detectImage().

+ +

Self показывает количество сэмплов полученное во время выполнения самой функции, а не функции её вызвавшей. В примере выше  doSomething() имеет время выполнения (Running time) равное 3 (сэмпл A, B и C), но значение Self равно единице (sample A).

+ +

Третий столбец содержит имена функций, а также имена файлов и номера строк (для локальных функций) или полное/доменное имя (для внешних). Функции серого цвета — встроенные функции браузера, чёрные — JavaScript загруженный страницей. Если вы переместите курсор мыши вдоль строк, то обнаружите справа от имён функций стрелочку: кликните по ней и увидите исходный код функции.

+ +

 

+ +

Раскрываем древо вызовов

+ +

 

+ +

В строке, если какие-либо сэмплы были взяты в функции вызванной другой функцией (т. е. Если время выполнения (Running time) больше чем Self для заданной строки) — появляется стрелочка слева от имени функции, дающая возможность раскрыть древо вызовов.

+ +

Для примера приведённого выше, полностью раскрытое древо вызовов будет выглядеть следующим образом:

+ + + + + + + + + + + + + + + + + + + +
Running TimeSelf 
3            100%1doSomething()
2              67%2logTheValue()
+ +

Более реалистичный пример: на скриншоте ниже,  на второй строке видно 1914 сэмпла взятых внутри функции detectImage(). Но все сэмплы были получены  внутри функции названной detectImage() (Self равно нулю). Мы можем развернуть древо вызовов чтобы определить какая из функций на самом деле выполнялась когда было взято большинство сэмплов:

+ +

+ +

Далее можно сделать вывод, что 6 сэмплов было взято во время выполнения detectAtScale(), 12 во время getRect() и так далее.

+ +

Примечания

+ +
    +
  1.   Если функция вызывается несколько раз из различных источников, в выводе профайлера представлена она будет так же несколько раз. Так структуры вроде forEach будут появляться несколько раз в древе вызовов. + +

     

    +
  2. +
+ +

 

diff --git a/files/ru/tools/release_notes/index.html b/files/ru/tools/release_notes/index.html new file mode 100644 index 0000000000..38c96a4e83 --- /dev/null +++ b/files/ru/tools/release_notes/index.html @@ -0,0 +1,127 @@ +--- +title: Замечания к релизу +slug: Tools/Release_notes +translation_of: Mozilla/Firefox/Releases +--- +
{{ToolsSidebar}}

Firefox 48

+ +

Главное:

+ + + +

Другие исправления багов

+ +

Firefox 32

+ +

Highlights:

+ + + +

More details:

+ + + +

All devtools bugs fixed between Firefox 31 and Firefox 32.

+ +

Firefox 31

+ +

Highlights:

+ + + +

More details:

+ + + +

All devtools bugs fixed between Firefox 30 and Firefox 31.

+ +

Firefox 30

+ +

Highlights:

+ + + +

More details:

+ + + +

All devtools bugs fixed between Firefox 29 and Firefox 30.

+ +

Firefox 29

+ +

Firefox 29 Hacks post. Highlights:

+ + + +

Firefox 28

+ +

Firefox 28 Hacks post. Highlights:

+ + + +

Firefox 27

+ +

Firefox 27 Hacks post. Highlights:

+ + diff --git a/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..89fc9d3890 --- /dev/null +++ b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,84 @@ +--- +title: Отладка Firefox Desktop +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +tags: + - Debug + - Debugging + - Guide + - Tools + - Отладка +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +
{{ToolsSidebar}}

Это руководство объясняет, как использовать Инструменты разработчика Firefox для отладки различных версий десктопного Firefox, запущенного на том же компьютере. В этом документе экземпляр Firefox, который будет отлаживаться, назовём отлаживаемый(debuggee), а тот, с которого производится отладка - отлаживающий (debugger, отладчик).

+ +

Включение удалённой отладки

+ +

Во-первых, убедитесь, что в обоих Firefox (отлаживаемый и отлаживающий) установлены галочки "Включить удалённую отладку" (Enable remote debugging) и "Включить инструменты отладки browser chrome и дополнений" (Enable chrome and add-on debugging), которые находятся в настройках Инструментов разработчика Firefox. Если у вас используется Firefox Developer Edition, то галочки уже установлены по умолчанию.

+ +

Это потребуется сделать только однажды. После перезагрузки настройки сохранятся.

+ +

Запуск сервера отладчика

+ +

Далее нужно стартовать сервер отладчика в отлаживаемом Firefox.

+ +

До Firefox 37

+ +

До Firefox 37: открыть Панель разработчика и введите команду:

+ +
listen 6000
+ +

Это укажет отлаживаемому прослушивать клиентов-отладчиков на порту 6000. Кроме этого нигде больше не используйте порт 6000.

+ +

После перезагрузки нужно будет ввести команду заново.

+ +

После Firefox 37

+ +

Начиная с Firefox 37 и далее описанный метод работает, но есть другой: запустите отлаживаемый из командной строки, передав ему параметр --start-debugger-server:

+ +
/path/to/firefox --start-debugger-server
+ +

Без аргументов  параметр --start-debugger-server запустит прослушивание сервером 6000 порта. Для использования другого порта передайте его номер:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Отметьте: в Windows вызов start-debugger-server записывается с одним "минусом":

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Примечание: По умолчанию и по соображениям безопасности включена (через about:config) опция devtools.debugger.force-local. Если нужно отлаживать Firefox с другого компьютера, то измените её, но только в безопасной сети или за файерволом, чтобы предотвратить несанкционированный доступ.

+
+ +

Подключение

+ +

Есть два способа подключения: "Экран подключения" и "WebIDE".

+ +

Экран подключения

+ +

На отлаживающем Firefox в меню "Разработка" есть пункт "Соединиться...". Кликните его и увидите страницу:

+ +

+ +

Введите номер порта,  заданный для отлаживаемого и нажмите "Connect". В отлаживаемом увидите диалог для подтверждения подключения:

+ +

Нажмите"OK" и вернитесь в отладчик. Появится такая страница:

+ +

+ + + +

WebIDE

+ +

На отлаживающем Firefox откройте WebIDE кликните "Select Runtime"/"Remote Runtime" (Удалённый Runtime):

+ +

Вас попросят предоставить имя компьютера и порт. Введите "localhost:6000" или другой номер порта, если прислушивается иной порт (смотря какой вы указали).

+ +

На отлаживаемом Firefox появится предупреждение:

+ +

Кликните OK. WebIDE подключится к главному процессу. Если вы захотите подключиться к вкладке, то в списке слева выберите нужную вкладку, которую будете отлаживать.

+ +

diff --git a/files/ru/tools/remote_debugging/firefox_for_android/index.html b/files/ru/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..6bcd7b2b47 --- /dev/null +++ b/files/ru/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,146 @@ +--- +title: Remotely debugging Firefox for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +
{{ToolsSidebar}}

This guide explains how to use remote debugging to inspect or debug code running in Firefox for Android over USB.

+ +
+

Мы недавно сильно упростили процесс подключения инструментов разработки к Firefox для Android. Если вы работаете с Firefox Desktop 36 или новее, и Firefox для Android 35 или новее, то попробуйте новый процесс вместо этого.

+
+ +

+ +

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. 

+ +

Prerequisites

+ +

First, you'll need:

+ + + +

ADB setup

+ +

Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.

+ +

On the Android device

+ + + +

On the desktop

+ + + +

To check it worked, open up a command shell on the desktop and type:

+ +
adb devices
+ +

You should see some output like:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(The long hex string will be different.)

+ +

If you do, then adb has found your device and you've successfully set up ADB.

+ +

Enable remote debugging

+ +

Next, you need to enable remote debugging on both the Android device and the desktop.

+ +

Firefox for Android 24 and earlier

+ +

To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true.

+ +

Go to about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press "Toggle".

+ +

+ +

Firefox for Android 25 and later

+ +

On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

+ +

+ +

The browser will display a notification reminding you to set up port forwarding, which we'll do later on.

+ +

On the desktop

+ +

On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:

+ +

+ +
If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.
+ +

You'll then see a new option in the Web Developer menu labeled "Connect...":

+ +

+ +

Connecting

+ +

Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.

+ +

On the desktop

+ +

For Firefox for Android 35 and later, go to a command prompt, and type:

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

For Firefox for Android builds in other channels, the org.mozilla.firefox part should be changed to:

+ + + +

For Firefox for Android 34 and earlier, type:

+ +
adb forward tcp:6000 tcp:6000
+ +

(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)

+ +

For Firefox OS, type:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

You'll need to reissue this command each time you physically attach desktop and device with the USB cable.

+ +

Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:

+ +

Unless you've changed the port numbers, choose 6000 and press the "Connect" button.

+ +

On the Android device

+ +

Next you'll see a dialog on the Android device asking you to confirm the connection:

+ +

Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.

+ +

On the desktop

+ +

Next, the desktop shows you a dialog that looks something like this:

+ +

This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.

+ + + +

Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:

+ +

+ +

The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.

diff --git a/files/ru/tools/remote_debugging/index.html b/files/ru/tools/remote_debugging/index.html new file mode 100644 index 0000000000..85483004df --- /dev/null +++ b/files/ru/tools/remote_debugging/index.html @@ -0,0 +1,46 @@ +--- +title: Отладка удалённых скриптов +slug: Tools/Remote_Debugging +tags: + - Tools + - 'l10n:priority' + - Отладка + - инструменты +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

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

+ +

Конкретные инструкции по подключению Инструментов специфичны для каждой из сред.

+ +

Среды выполнения, основанные на Gecko

+ +

В первую очередь можете подключить Инструмены разработчика к Gecko-программам, таких как Firefox Desktop, Firefox для Android, Firefox OS или Thunderbird.

+ + + +

Другие варианты сред

+ +

Экспериментальное дополнение Valence позволяет отлаживать веб-сайты в средах выполнения отличных от Gecko, например, Google Chrome Desktop, Chrome для Android или Safari на iOS.

+ +

Valence по умолчанию включен в Firefox Developer Edition.

+ + diff --git a/files/ru/tools/responsive_design_view/index.html b/files/ru/tools/responsive_design_view/index.html new file mode 100644 index 0000000000..e5acc43af0 --- /dev/null +++ b/files/ru/tools/responsive_design_view/index.html @@ -0,0 +1,100 @@ +--- +title: Режим адаптивного дизайна +slug: Tools/Responsive_Design_View +tags: + - Design + - Firefox + - Guide + - Tools + - Web Development + - 'l10n:priority' + - Дизайн + - адаптивный дизайн + - инструменты разработки +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}
+ +

Адаптивные дизайны (Responsive designs)  адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.

+ +

{{EmbedYouTube("LBcE72sG2s8")}}

+ +

Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.

+ +

Окно Firefox, в области содержимого которого показывается короткая панель инструментов и маленькая область содержимого, в которой показана статья «мобильной» Википедии «Вода» соответственно размеру маленькой области.Режим адаптивного дизайна удобен тем, что можно быстро и точно изменять размер области содержимого.

+ +

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

+ +

В режиме адаптивного дизайна можно ходить по страницам в изменённой области содержимого как и обычно.

+ +

Включение и выключение

+ +

Есть три способа включения режима адаптивного дизайна:

+ + + +

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

+ + + +

Изменение размера

+ +

Изменить размер области содержимого можно двумя способами:

+ + + +

При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.

+ +
+

Элементы управления режимом

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
ВыйтиЗакрыть Режим адаптивного дизайна и вернуться к нормальному просмотру
Выбрать размер +

Выбрать из ряда комбинаций ширины и высоты, или определить свои собственные.

+ +

Начиная с Firefox 33, показываемые здесь числа можно редактировать на месте, так что можно легко определять собственные измерения.

+
ПовернутьПереключить экран между книжной и альбомной ориентацией.
+

Симулировать события прикосновения

+
+

Включить / выключить симуляцию сенсорных событий: когда она включена, события мыши переводятся в touch events.

+
+

Скриншот

+
Сделать скриншот (снимок) области содержимого.
+
+ +

 

diff --git a/files/ru/tools/settings/index.html b/files/ru/tools/settings/index.html new file mode 100644 index 0000000000..f4e2574ca5 --- /dev/null +++ b/files/ru/tools/settings/index.html @@ -0,0 +1,139 @@ +--- +title: Settings +slug: Tools/Settings +translation_of: Tools/Settings +--- +
{{ToolsSidebar}}

Opening Settings

+ +

To see the Developer Tools Settings pane, open any of the Developer Tools, and then:

+ + + +

The Settings pane looks something like this:

+ +

Depicts the Toolbox options

+ +

Categories

+ +

Default Firefox Developer Tools

+ +

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+ +

Available Toolbox Buttons

+ +

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

+ +

Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.

+ +

Choose DevTools theme

+ +

This enables you to choose one of three different themes.

+ +

There's a light theme, which is the default:

+ +

Light theme for DevTools

+ +

A dark theme (the default on Firefox Developer Edition):

+ +

Dark theme for DevTools

+ +

New in Firefox 48

+ +

There's also a Firebug theme that looks like the Firebug extension, letting you feel at home if you're used to Firebug:

+ +

Firebug theme for DevTools

+ +

Common preferences

+ +

Settings that apply to more than one tool. There's just one of these:

+ +
+
Enable persistent logs
+
A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.
+
+ +

Inspector

+ +
+
Show browser styles
+
A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's Computed view.
+
Truncate DOM attributes (new in Firefox 47)
+
By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".
+
Default color unit
+
A setting to control how colors are represented in the inspector: +
    +
  • Hex
  • +
  • HSL(A)
  • +
  • RGB(A)
  • +
  • color name
  • +
  • As authored (new in Firefox 44).
  • +
+
+
+ +

Web Console

+ +
+
Enable timestamps
+
Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.
+
+ +

Style Editor

+ +
+
Show original sources
+
When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. Learn more about Style Editor support for CSS source maps. With this setting checked, the Page Inspector Rules view will also provide links to the original sources.
+
Autocomplete CSS
+
Enable the Style Editor to offer autocomplete suggestions.
+
+ +

JavaScript Profiler

+ +
+
Show Gecko platform data
+
A setting to control whether or not profiles should include Gecko platform symbols.
+
+ +

Editor Preferences

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +
+
Detect indentation
+
Auto-indent new lines based on the current indentation.
+
Autoclose brackets
+
 
+
Indent using spaces
+
 
+
Tab size
+
 
+
Keybindings
+
Choose the default CodeMirror keybindings, or keybindings from one of several popular editors: +
    +
  • Vim
  • +
  • Emacs
  • +
  • Sublime Text
  • +
+
+
+ +

Advanced settings

+ +
+
Disable HTTP Cache
+
Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. +
Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not Service Workers/the Cache API.
+
+
Disable JavaScript
+
Reload the current tab with JavaScript disabled.
+
Enable Service Workers over HTTP
+
Enable Service Worker registrations from insecure websites.
+
Enable browser chrome and add-on debugging toolboxes
+
Enable you to use developer tools in the context of the browser itself, and not only web content.
+
Enable remote debugging
+
Enable the developer tools to debug remote Firefox instances.
+
diff --git a/files/ru/tools/shader_editor/index.html b/files/ru/tools/shader_editor/index.html new file mode 100644 index 0000000000..7eda1afe34 --- /dev/null +++ b/files/ru/tools/shader_editor/index.html @@ -0,0 +1,56 @@ +--- +title: Редактор шейдеров +slug: Tools/Shader_Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

Редактор шейдеров позволяет просматривать и редактировать вершинные и фрагментные шейдеры, используемые WebGL.

+ +

{{EmbedYouTube("hnoKqFuJhu0")}}

+ +

WebGL - это программный интерфейс языка JavaScript, который позволяет отрисовывать интерактивную 3D- и 2D-графику в браузере без использования дополнительных плагинов. Для работы WebGL необходимо создать 2 программы, называемые "шейдерами", которые выполняются на определённой стадии работы графического конвейера OpenGL. Первым выполняеся вершинный шейдер, сообщающий координаты каждой геометрической вершины, которую следует отрисовать. После этого выполняется фрагментный шейдер, сообщающий цвет каждого отдельного пикселя, поступающего в отрисовку.

+ +

Для создания шейдеров применяется Шейдерный Язык OpenGL или же GLSL. Можно по-разному внедрять шейдеры на страницу для работы с WebGL: например, их можно "прохардкодить" в JavaScript-исходниках, или подключить в виде отдельных файлов, используя тег <script>, или же подгрузить с сервера в виде простого текста. Исполняемый JavaScript-код отправляет шейдерную программу через программный интерфейс в WebGL, где она компилируется и выполняется с помощью графического ускорителя.

+ +

С помощью Редактора шейдеров Вы можете изучать и редактировать исходники вершинных и фрагментных шейдеров.

+ +

Вот ещё одна демонстрация того, как Вы можете применять Редактор шейдеров при разработке сложных приложений (в данном случае пример создан на движке Unreal Engine):

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Запуск Редактора шейдеров

+ +

По умолчанию Редактор шейдеров отключён. Чтобы активировать его, откройте Настройки инструментов разработчика и поставьте галочку на пункте  "Шейдеры" в разделе "Инструменты разработчика по умолчанию". Вы можете заметить, что в панели инструментов появился элемент "Шейдеры". Нажмите на нём для запуска Редактора шейдеров.

+ +

Сначала Вы увидите пустое окно с кнопкой, предлагающей обновить страницу:

+ +

+ +

Для начала откройте страницу, которая создает контекст WebGL и загружает в него программу. Приведенные ниже скриншоты взяты из демонстрации Unreal Engine.

+ +

Перед Вами появится рабочее окно, разделённое на три части: список шейдерных программ GLSL (слева), вершинный шейдер текущей выбранной программы (по центру), а также фрагментный шейдер текущей выбранной программы (справа):

+ +

+ +

Управление программами

+ +

Левая часть представляет список текущих шейдерных программ, используемых контекстом WebGL. При наведении курсора мыши на элемент списка, представляющий шейдерную программу, Вы увидите, что геометрические объекты, обрабатываемые данной программой, подсвечены красным цветом:

+ +

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

+ +

При нажатии на элемент списка, представляющий шейдерную программу, откроются исходники вершинного и фрагментного шейдеров, составляющих её, и Вы сможете их редактировать.

+ +

Редактирование шейдеров

+ +

Средняя и правая часть рабочего окна представляют вершинный и фрагментный шейдеры выбранной шейдерной программы.

+ +

Вы можете отредактировать эти программы и просмотреть результат при следующей отрисовке контекста WebGL (например, при следующем кадре анимации). Например, Вы можете изменить цвета:

+ +

Редактор подсвечивает синтаксические ошибки в Вашем коде:

+ +

Вы увидите дополнительную информацию о проблеме, если наведёте курсор на крестик в левой части строки с ошибкой:

+ +

+ +

 

+ +

 

diff --git a/files/ru/tools/storage_inspector/index.html b/files/ru/tools/storage_inspector/index.html new file mode 100644 index 0000000000..0356665fea --- /dev/null +++ b/files/ru/tools/storage_inspector/index.html @@ -0,0 +1,179 @@ +--- +title: Инспектор Хранилища +slug: Tools/Storage_Inspector +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+

Инспектор хранилища отключен по умолчанию. Включите его в Developer Tools Settings.

+
+ +

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

+ + + +

На данный момент, инспектор хранения дает представление только для чтения памяти. Но мы работаем, чтобы позволить вам редактировать содержимое хранилища в будущих выпусках.

+ +

Открыть инспектор хранилища

+ +

После включения вы можете открыть "Storage Inspector" из Web Developer подменю в Firefox панели (Tools меню  на Mac), или нажатием клавиш Shift + F9.

+ +

Toolbox инспектора активируется в нижней части окна браузера. Называется просто "Storage" в Developer Toolbox.

+ +

+ +

Storage Inspector User Interface

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Storage tree

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

+ +

+ +

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

+ +

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

+ +

Table Widget

+ +

The table widget is the place where all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

+ +

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

+ +

+ +
New in Firefox 47
+ +

Starting in Firefox 47, there's a search box at the top of the Table Widget:

+ +

+ +

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

+ +

Cache Storage

+ +
New in Firefox 47
+ +

Under the Cache Storage type you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

+ + + +

+ +

Cookies

+ +

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

+ + + +

Local storage / Session storage

+ +

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

+ +

You can manipulate the storage in the Web Console with the Storage API methods.

+ +

IndexedDB

+ +

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

+ + + +

When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:

+ + + +

+ +

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

+ +
New in Firefox 49
+ +

An IndexedDB database can be deleted via its context menu. If the IndexedDB cannot be deleted (most commonly when there are still active connections to the database), a warning message will be displayed in the Storage Inspector to make it clear what the situation is:

+ +

+ + + +

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

+ +

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example, a stringified JSON like '{"foo": "bar"}' is shown as the origin JSON {foo: "bar"}, a key separated value like 1~2~3~4 is shown like an array [1, 2, 3, 4]. Below are a few screenshots giving examples of different types of parsed values:

+ +

+ +

A stringified JSON being shown as the original JSON in the parsed value section of the sidebar

+ +

+ +

A string containing key-value pairs being shown as JSON in the parsed value section of the sidebar

+ +

+ +

A string containing key separated values being shown as an Array in the parsed value section of the sidebar

+ +

Editing storage items

+ +
New in Firefox 48
+ +

Starting in Firefox 48 you can edit storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

+ +

{{EmbedYouTube("tUusjX_Gfow")}}

+ +

You can edit cookies, local storage, and session storage entries. You can edit the names of entries as well as the values.

+ +

You can also delete cookies, local storage, and session storage entries using the context menu:

+ +

diff --git a/files/ru/tools/style_editor/index.html b/files/ru/tools/style_editor/index.html new file mode 100644 index 0000000000..04da9c17d8 --- /dev/null +++ b/files/ru/tools/style_editor/index.html @@ -0,0 +1,111 @@ +--- +title: Редактор стилей +slug: Tools/Style_Editor +tags: + - Stylesheets + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}
+ +

Редактор Стилей позволит вам:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Чтобы открыть редактор стилей выберите опцию "Редактор стилей" из меню "Разработка" (который является подменю в меню "Инструменты"). Инструменты появятся в нижней части окна браузера, с активной панелью редактора стилей:

+ +

+ +

Редактор Стилей делится на три основные части:

+ + + +
+

Начиная с Firefox 33 и далее, существует третий компонент Редактора Стилей:медиа боковая панель.

+
+ + + +

 

+ +

Панель таблицы стилей

+ +

Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. Вы можете сохранить любые изменения, внесенные в таблицу стилей на локальном компьютере, нажав кнопку Сохранить в правом нижнем углу возли каждого листа в списке.

+ +

Панель редактора

+ +

Справа находится панель редактора. Где вы можите видеть и редактировать исходный код выбранного листа стилей. Любые изменения, которые вы делаете, немедленно применяются к странице. Это позволяет легко экспериментировать, просматривать, а также изменять тестировать. После того как Вы удовлетворены вашими изменениями, Вы можете сохранить копию локально, нажав кнопку Сохранить в нижнем правом углу листа в панели таблица стилей.

+ +

Редактор предоставляет номера строк и подсветку синтаксиса, что облечает читать вам CSS. Он также поддерживает номер ряда keyboard shortcuts.

+ +

Редактор Стилей автоматически де-минимизирует таблицы стилей, которые он обнаруживает, не влияя на оригинал. Что делает его гораздо легче для работаты на страницах, которые были оптимизированы.

+ +

Редактор Стилей поддерживает автозаполнение. Просто начните печатать, и он будет предлагать вам перечень предложений.

+ +

Вы можете включить автозаполнение в Style Editor settings.

+ +

Боковая панель @media

+ +

С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо @media правлила. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щелкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.

+ +

Боковая панель медиа особенно хорошо работает с Responsive Design View для создания и отладки мобильных макетов:

+ +

+ +

Создание и импортирование таблицы стилей

+ +

Вы можете создать новую таблицу стилей, нажав на кнопку Создать на панели инструментов. После чего начать ввод CSS в отрывшемся редакторе и видеть, как новые стили в реальном времени применяются так же, как изменяются в других таблицах.

+ +

Вы можете загрузить таблицу стилей с диска и применить его на страницу, нажав на кнопку Импорт.

+ +

Источник карты поддержки

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Веб-разработчики часто создают CSS файлы, используя препроцессор как Sass, Less, или Stylus. Эти инструменты создания CSS файлов с более богатым и выразительным синтаксисам. Если это сделать, будучи в состоянии просматривать и редактировать созданный CSS не так полезен, потому что код, который вы поддерживать синтаксис препроцессора, а не генерирует CSS. Так вы должны были бы изменить сгенерированный CSS, затем вручную работать, как с первоисточником.

+ +

Источник карты имеет инструменты для карты вернутся из полученных CSS к первоначальному синтаксису, так что они могут отображать, и позволяют редактировать файлы в оригинальном синтаксисе. С Firefox 29 и далее, Редактор Стиль могу понять исходные карты CSS.

+ +

Это означает, что если вы используете, например, Sass, то редактор Стиль покажу вам, и вы сможете редактировать, Sass файлы, а не CSS, который генерируется из них:

+ +

Для этого, чтобы работать, вы должны:

+ + + +

Просмотр первоисточников

+ +

Теперь, если вы выберете "Показать оригинальные источники" в Style Editor settings, ссылки рядом с правилом CSS в Rules view будет ссылаться к первоисточникам в редакторе стилей

+ +

Редактирование первоисточников

+ +

Вы также можете редактировать первоисточники в редакторе стилей и видеть результаты сразу на странице. Чтобы это сделать есть два варианта.

+ +

Во-первых, настроить препроцессор так следит за оригиналом и автоматически восстанавливает CSS при изменении исходного кода. С Sass вы можете сделать это, просто передавая  в этой опции:

+ +
sass index.scss:index.css --sourcemap --watch
+ +

Затем сохраните оригинал в редакторе стилей, нажав на кнопку "Сохранить" рядом с файлом, и сохранение его на исходный файл.

+ +

Теперь, когда вы вносите изменения в исходный файл в редакторе стилей CSS регенерируется, и вы можете видеть изменения сразу.

+ +

Сочетания клавиш

+ +

Редактор исходного сочетания

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/ru/tools/tools_toolbox/index.html b/files/ru/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..6e7b6c8175 --- /dev/null +++ b/files/ru/tools/tools_toolbox/index.html @@ -0,0 +1,171 @@ +--- +title: Toolbox +slug: Tools/Tools_Toolbox +tags: + - инструменты +translation_of: Tools/Tools_Toolbox +--- +
{{ToolsSidebar}}

Окно Инструменты включает в себя все встроенные в Firefox инструменты.  Его можно открыть, выбрав «Инструменты разработки» из меню Веб разработка (в «Инструменты» на OS X и Linux, или «Firefox» в Windows), или активировав любой включённый туда инструмент (например, Отладчик JavaScript Debugger или Инспектор страниц).  Ещё можно нажать Ctrl + Shift + I на Windows и Linux, или Cmd + Opt + I на OS X.

+ +

По умолчанию окно появляется прикреплённым к нижнему краю окна Firefox, но его можно и отсоединить. Вот как оно выглядит прикреплённым:

+ +

Само окно разделено на две части: панель инструментов вверху и главная панель внизу:

+ +

+ +

Режим Прикрепления

+ +

По умолчанию Панель инструментов прикреплена к низу окна браузера. Используя иконки настройки Панели управления,  Вы можете прикрепить его к правой части окна браузера или открепить его и вывести в отдельное окно.

+ +

 

+ +

Панель инструментов

+ +

Панель содержит набор контролов (управляющих элементов интерфейса), с помощью которых можно выбрать инструмент или отсоединить/присоединить/закрыть окно.

+ +

 

+ +

+ +

Инструмент для выбора объекта

+ +

Крайняя левая иконка Панели инструментов служит для включения инструмента выбора различных элементов.  Она позволяет кликом выбрать элемент кода, который Вам необходим для исследования. См. «Выбор элемента».

+ +

Основной набор инструментов

+ +

Далее располагается раздел кнопок, позволяющий активировать основные инструменты Панели.  В этом разделе могут находится следующие инструменты:

+ + + +

Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).

+ +

Дополнительные инструменты

+ +

Дальше идёт ряд кнопок, которые можно добавлять и удалять через окно настроек инструментов разработки. По умолчанию этот ряд включает:

+ + + +

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

+ + + +

Toolbox controls

+ +

Наконец, ряд кнопок, позволяющих:

+ + + +

Настройки

+ +

Кнопка «Настройки» () даёт вам доступ к настройкам самого Набора инструментов и находящихся в нём инструментов:

+ +

Depicts the Toolbox options

+ +

Инструменты разработчика Firefox по умолчанию

+ +

Эта группа галочек определяет, какие инструменты включаются в набор инструментов.  Часто бывает, что новый инструмент добавляется в Firefox, но по умолчанию выключен.

+ +

Доступные кнопки инструментов

+ +

This group of checkboxes determines which "standalone tools" get buttons in the toolbar. This defaults to the node picker, the split console, and responsive design mode.

+ +

Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.

+ +

Темы

+ +

This enables you to switch between a light and a dark theme:

+ +

+ +

Общие настройки

+ +

Settings that apply to more than one tool. There's just one of these:

+ + + +

Инспектор

+ + + +

Редактор стилей

+ + + +

 

+ +

Профайлер JavaScript

+ +

 

+ + + +

Настройки редактора

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ + + +

Расширенные настройки

+ + + +

Главная панель

+ +

The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.

diff --git a/files/ru/tools/web_audio_editor/index.html b/files/ru/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..2638a12414 --- /dev/null +++ b/files/ru/tools/web_audio_editor/index.html @@ -0,0 +1,69 @@ +--- +title: Web аудио редактор +slug: Tools/Web_Audio_Editor +tags: + - API веб-аудио + - Firefox + - Mozilla + - Мозилла + - инструменты +translation_of: Tools/Web_Audio_Editor +--- +
{{ToolsSidebar}}

С помощью Web Audio API, разработчики создают {{domxref("AudioContext", " аудиоконтекст")}}. Затем в этом контексте они создают ряд {{domxref ("AudioNode", "audio nodes")}}, включая:

+ + + +

Каждый узел имеет ноль или более свойств {{domxref ("AudioParam")}} которые настраивают его работу. Например {{domxref ("GainNode")}} имеет одно свойство усиления, в то время как {{domxref ("OscillatorNode")}} имеет частоту и свойства насстройки.

+ +

Разработчик соединяет узлы в виде графика, а полный граф определяет поведение аудиопотока.

+ +

Web Audio Editor исследует аудиоконтекст, созданный на странице, и обеспечивает визуализацию его графика. Это дает вам представление о его работе на высоком уровне и позволяет вам убедиться, что все узлы подключены так, как вы ожидаете. Затем вы можете изучить и отредактировать свойства AudioParam для каждого узла на графике. Некоторые свойства non-AudioParam, например свойство типа OscillatorNode, отображаются, и вы также можете их редактировать.

+ +

Этот инструмент все еще экспериментальный. Если вы найдете ошибки, мы будем рады, если вы отправите их в Bugzilla. Если у вас есть вопросы или предложения по новым функциям, ffdevtools.uservoice.com или Twitter отличные места для их регистрации.

+ +

Открытие веб-аудиоредактора

+ +

Web Audio Editor по умолчанию не включен в Firefox 32. Чтобы включить его, откройте Настройки инструмента разработчика и отметьте «Web Audio». Теперь на панели инструментов Toolbox должна быть дополнительная вкладка с надписью «Web Audio». Щелкните вкладку и загрузите страницу, которая создает звуковой контекст. Два хороших демки:

+ + + +

Визуализация графа

+ +

Теперь Web Audio Editor отобразит график загруженного аудиоконтекста. Вот график демоверсии The Violent:

+ +

Вы можете видеть, что он использует три узла: {{domxref ("OscillatorNode")}} в качестве источника, {{domxref ("GainNode")}} для управления томом и {{domxref ("GainNode")}} в качестве места назначения.

+ +

Подключения к AudioParams

+ +
+

Отображение подключений к AudioParams является новым в Firefox 34.

+
+ +

Соединения между узлами отображаются сплошными линиями. Если вместо этого вы подключили узел к AudioParam в другом узле, то соединение будет показано пунктирной линией между узлами и будет помечено именем AudioParam:

+ +

Проверка и изменение AudioNodes

+ +

Если вы нажмете на узел, он подсветится, и вы получите инспектор узла справа. В этом списке перечислены значения свойств AudioParam этого узла. Например, вот как выглядит OscillatorNode:

+ +

В демоверсии Viplent, параметр частоты изменяется когда пользователь перемещает мышь влево и вправо, и вы можете увидеть это, отраженное в инспекторе узлов. Однако значение не обновляется в реальном времени: вам нужно снова щелкнуть узел, чтобы увидеть обновленное значение.

+ +

Если вы щелкнете значение в инспекторе узлов, вы можете изменить его: нажмите Enter или Tab и новое значение вступит в силу немедленно.

+ +

Обход узлов

+ +
+

Новое в Firefox 38.

+
+ +

В панели, которая показывает детали узла, есть кнопка включения / выключения:

+ +

Нажмите на него, и график будет изменен для обхода этого узла, поэтому он больше не будет иметь никакого эффекта. Узлы, которые обойдены, показаны заштрихованным фоном:

+ +

diff --git a/files/ru/tools/web_console/helpers/index.html b/files/ru/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..fd55c2d723 --- /dev/null +++ b/files/ru/tools/web_console/helpers/index.html @@ -0,0 +1,66 @@ +--- +title: Веб-Консоль Помощь +slug: Tools/Web_Console/Helpers +tags: + - Веб-консоль + - Веб-разработка + - Отладка +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}

Команды

+ +

Командная строка JavaScript, предоставляемая Веб-Консолью, предлагает несколько встроенных вспомогательных функций, которые делают определенные задачи проще.

+ +
+
$()
+
Ищет CSS-селектор, возвращая первый найденный элемент. Эквивалентно {{ domxref("document.querySelector()") }} или же вызывается функция $, в случае, если таковая найдена на странице.
+
$$()
+
Ищет CSS-селектор, возвращая перечень соответствующих ему DOM-узлов. Это упрощённый вариант, используемый вместо {{ domxref("document.querySelectorAll()") }}.
+
Начиная с билда Firefox 41 этот метод больше не является упрощением для {{ domxref("document.querySelectorAll()")}}, а наоборот возвращает массив элементов.
+
$0
+
Ныне исследуемый элемент страницы.
+
$_
+
Появилась в Firefox 39. Хранит результат последнего выражения, выполненного через командную строку. Например, если вы введёте "2+2 <enter>", затем "$_ <enter>", то консоль ответит "4".
+
$x()
+
Оценивает XPath-выражение и возвращает массив соответствующих ему узлов.
+
keys()
+
Задаёт объект, возвращает перечень ключей (или имён свойств) характерных объекту. Является упрощённым вариантом Object.keys.
+
values()
+
Задаёт объект, возвращает перечень значений объекта; является дополнением для keys().
+
clear()
+
Очищает область вывода консоли.
+
inspect()
+
Задаёт объект, открывает инспектор объектов.
+
pprint()
+
Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.
+
help()
+
Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведет вас к этой странице.
+
cd()
+
Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу работа с айфреймами.
+
copy()
+
Появилась в Firefox 38. Копирует аргумент в клипборд. Если аргумент является строкой, то он копируется как есть. Если аргумент является DOM-узлом, то копируется его outerHTML. Можно также использовать функцию JSON.stringify, которая также вызовет аргумент и скопирует его значение в клипборд.
+
clearHistory()
+
Появилась в Firefox 39. Как и любая другая командная строка, Веб-консоль помнит введённые вами команды. Используйте функцию для очистки истории командной строки.
+
Пожалуйста, обратитесь к тексту API консоли для получения большей информации о записи контента.
+
+ +

Примеры

+ +

Пример: Смотрим на содержимое DOM-узлов

+ +

Допустим, у вас есть DOM-узел с ID "title". На самом деле такой ID есть и у страницы, которую вы сейчас читаете, т.е. вы можете открыть Веб-консоль и попробовать прямо сейчас.

+ +

Давайте посмотрим на содержимое этого узла, используя функции: $() и inspect()

+ +
inspect($("#title"))
+ +

Автоматически откроется окно объектного инспектора, показывающее содержимое DOM-узла, соответствующего CSS-селектору "#title", являющемуся элементом ID "title".

+ +

Пример: Дамп содержимого DOM-узла

+ +

Это нормально и хорошо, если вы столкнулись с какими-то проблемами, используя браузер, но, давайте представим, что вы делаете удалённую отладку для пользователя и должны посмотреть на содержимое узла. В таком случае, ваш пользователь может открыть Веб-консоль, сделать дамп содержимого узла, затем скопировать текст получившегося лога, и отправить его вам по электронной почте, используя для всех своих действий функцию pprint()

+ +
pprint($("#title"))
+
+ +

Консоль изрыгнёт содержимое узла, так что, вы сможете взглянуть на него. Конечно, полезней использовать функцию не для DOM-узлов, но вы уже поняли идею...

diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html new file mode 100644 index 0000000000..db38988978 --- /dev/null +++ b/files/ru/tools/web_console/index.html @@ -0,0 +1,719 @@ +--- +title: Веб-консоль +slug: Tools/Web_Console +tags: + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - Веб-консоль + - Отладка + - Руководство + - 'веб-разработка:инструменты' +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}

Веб-консоль:

+ +
    +
  1. Выводит информацию, связанную с веб-страницей: сетевые запросы, ошибки и предупреждения JavaScript и CSS, а также сообщения об ошибках, предупреждения и информационные сообщения, выдаваемые кодом JavaScript, выполняющимся в контексте страницы;
  2. +
  3. Позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в её контексте.
  4. +
+ +

Это часть замены старой Консоли Ошибок, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определенной веб-странице и показывает только связанную с ней информацию.

+ +

На другой половине Консоли ошибок заменили — Консоль браузера, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.

+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +

Как открыть Веб Консоль

+ +

Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш CtrlShiftK (CommandOptionK в OS X).

+ +

Внизу окна браузера появится Набор инструментов с выбранной Веб-консолью (в Панели инструментов разработчика она называется просто «Консоль»):

+ +

+ +

Под панелью инструментов окна инструментов разработчика, интерфейс веб-консоли разделён на три части:

+ + + +

Поле вывода сообщений

+ +

Большую часть Веб-консоли занимает поле вывода сообщений:

+ +

+ +

В поле вывода сообщений можно увидеть:

+ + + +

Каждое сообщение показывается в отдельной строке:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Время (Time)Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в настроках Инструментов.
Категория (Category) +

Категория: указывает на тип сообщения:

+ +
    +
  • чёрный: HTTP-запрос
  • +
  • голубой: CSS: предупреждения/ошибки/лог
  • +
  • оранжевый: JavaScript: предупреждения/ошибки
  • +
  • красный: безопасность: предупреждения/ошибки
  • +
  • светло-серый: сообщения которые выводятся в консоль с помощью консольного API cс использование  кода JavaScript
  • +
  • Dark Gray: input/output из интерфейса интерпретатора командной строки
  • +
+
Тип (Type)Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i).
Сообщение (Message)Само сообщение.
Количество повторов (Occurrences)Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.
Имя файля и номер строки
+ (Filename:Line number)
+

Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения..

+ +

Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке.

+
+ +

По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в Настройках.

+ +

HTTP запросы

+ +

HTTP запросы записываются следующим образом:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Время (Time)Время записи сообщения
Категория (Category)Показывает что сообщение является HTTP запросом.
Метод (Method)Вид запроса HTTP
URIцелевая ссылка URI
Резюме (Summary)Версия и статус HTTP протокола, время выполнения запроса.
+ +

 

+ +

Нажав мышкой на сообщение вы увидите следующее окно с более детальной информацией о запросе и ответе на него:

+ +

Прокрутка вниз показывает заголовки ответа. По умолчанию веб-консоль не записывает в журнал запрос и ответ тела: чтобы сделать это, войдите в контекстное меню веб-консоли и выберите "Log Request and Response Bodies", перезагрузите страницу, а затем вы увидите их в окне " Inspect Network Request ".

+ +

Только первый мегабайт данных регистрируется для каждого запроса или ответа тела, поэтому очень большие запросы и ответы будут обрезаны.

+ +

Сообщения журнала сети не отображаются по умолчанию. Используйте filtering  чтобы показать их.

+ +

XHR

+ +

С Firefox 38 и далее, веб-консоль показывает, когда сетевой запрос был сделан как XMLHttpRequest:

+ +

+ +

Кроме того, с Firefox 38 и далее, вы можете filter сетевые запросы так, чтобы только видеть XMLHttpRequests.

+ +

Как и обычный журнал запроса сетевых сообщений, журналы запросы XMLHttpRequest не отображаются по умолчанию. Использовать filtering feature to show them.

+ +

JavaScript ошибки и предупреждения

+ +

JavaScript ошибки выглядят вот так:

+ +

+ +

CSS ошибки, сообщения и переформатирование сообщения

+ +

CSS сообщения выглядят так:

+ +

+ +

По умолчанию, CSS предупреждения и регистрирования сообщений не отображаются.

+ +

Отправка-события

+ +

Веб-консоль также регистрирует события переформатированые в CSS категорию. Переформатирование это название операции, которой браузер вычисляет расположение части или всей страницы. Переформатирования происходят, когда изменение произошли на странице, чтобы браузер считал, что влияет на расположение. . Многие события могут вызвать переформатирование, в том числе: изменение размера окна браузера, активируя как псевдо-классы :hover, или манипулирование DOM в JavaScript.

+ +

Поскольку переформатирования могут быть дорогостоящими вычислениями и непосредственно влияют на пользовательский интерфейс, они могут иметь большое влияние на отзывчивость веб-сайта или веб-приложения. При переформатировании события веб-консоль может дать вам понять в какой момент оно начинает инициацию, как долго они принимаются к выполнению и, если есть переформатирования synchronous reflows сработавшие от JavaScript, то какой код вызвал их .

+ +

  Переформатирования события регистрируются как "Журнал" сообщений, в отличие от ошибок CSS или предупреждений. По умолчанию они отключены. Вы можете включить их, нажав на кнопку "CSS" в toolbar и выбрать "Журнал".

+ +

Каждое сообщение маркируется "переформатирование" и показывает время, необходимое для выполнения переформатирования :

+ +

Если переформатирование является синхронным переформатированием, вызванным JavaScript, будет также показанна ссылка на строку кода, инициировавшего переформатирование:

+ +

Нажмите на ссылку, чтобы открыть файл в Debugger.

+ +

Синхронные и асинхронные переформатирования

+ +

Если сделанное изменение аннулирует текущую схему - например, окно браузера изменяется или некоторые JavaScript изменяют CSS элемент - макет не пересчитывается немедленно. Вместо переформатирования в асинхронном режиме, в следующий раз браузер решает что это должно быть сделано (как правило, в следующий раз браузер перекрашивается). Таким образом, браузер может накопить коллекцию основаную на недействующих изменениях и пересчитать их эффект сразу.

+ +

Тем не менее, если какой-то JavaScript код читает что стиль был изменен, то браузер должен выполнить синхронное переформатирование в порядке вычисленным расчетом стиля чтобы вернуться. Например, код как этот хочет  вызовать немедленное, синхронное, переформатирование, когда вызовет window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Из-за этого, эта хорошая идея избежать чередования чтения и записи вызовов выше указанных основ стилей, когда воздействует DOM, потому что каждый раз, когда вы возвращаете стиль, который был недействительным в ранее вызваной записи, вы принуждаете к  синхронному переформатированию.

+ +

Предупреждения безопасности и ошибки

+ +

Предупреждения безопасности и ошибки выглядят следующим образом :

+ +

Сообщения безопасности показанные в веб-консоли помогают разработчикам найти потенциальные или фактические уязвимости в своих сайтах. Кроме того, многие из этих сообщений помогают обучающимся разработчикам, потому что они заканчиваются "Подробной" ссылкой ведущей вас на страницу со справочной информации и рекомендациями для смягчения этой проблемы.

+ +

Полный список сообщений безопасности выглядит следующим образом :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СообщениеПодробности
Blocked loading mixed active contentСтраница содержит смешанные активные доли: то есть, главная страница была подана через HTTPS, но попросил браузер для загрузки "активные доли", такие как скрипты, через HTTP. Браузер заблокировал активные доли. Смотрите Mixed Content чтобы узнать подробнее.
Blocked loading mixed display contentСтраница содержит смешанное отображение долей: то есть, главная страница была подана через HTTPS, но попросил браузер, чтобы загрузить "отображение долей", таких как изображения, через HTTP. Браузер заблокировал эти отображения долей. Смотрите Mixed Content чтобы узнать подробнее.
Loading mixed (insecure) active content on a secure pageСтраница содержит смешанные активные доли: то есть, главная страница была подана через HTTPS, но попросил браузер для загрузки "активные доли", такие как скрипты, через HTTP. Браузер загрузил эти активные доли. Смотрите Mixed Content чтобы узнать подробнее.
Loading mixed (insecure) display content on a secure pageСтраница содержит смешанное отображение долей: то есть, главная страница была подана через HTTPS, но попросил браузер, чтобы загрузить "отображение долей", таких как изображения, через HTTP. Браузер загрузил эти отображения долей. Смотрите Mixed Content чтобы узнать подробнее.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.Смотрите Content Security Policy чтобы узнать подробнее.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.Смотрите Content Security Policy чтобы узнать подробнее.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Страницы, содержащие регистрационные формы должны быть поданы через HTTPS, а не HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Формы, содержащие поля пароля должны представить их через HTTPS, а не HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.плавающие фреймы, содержащие регистрационные формы должны быть поданы через HTTPS, а не HTTP.
The site specified an invalid Strict-Transport-Security header.Смотрите HTTP Strict Transport Security чтобы узнать подробнее.
+
+

Новое в Firefox 36

+
+ +

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+
+

Сайт использует сертификат чья подпись использует алгоритм хеширования SHA-1.

+ +

SHA-1 по-прежнему до сих пор широко используется в сертификатах, но он начинает показывать свой возраст. Веб-сайтам и центрам сертификации рекомендуется перейти на более сильные хэш-алгоритмы в будущем. Смотрите Weak Signature Algorithm статью рассказывающюю подробнее.

+ +

Обратите внимание, что сертификат SHA-1 не может быть собственным сертификатом вашего сайта, но может свидетельствовать о принадлежности к сертификации, которая использовалась для подписи сертификата вашего сайта.

+
+ +

Bug 863874 это мета-ошибка для регистрации соответствующих сообщений о проблемах безопасности в веб-консоль. Если у вас есть идеи для полезных функций, таких как те, что обсуждаемые здесь, или заинтересованы в содействии, проверьте мета-ошибку и ее зависимости.

+ +

Сообщения консоли API

+ +


+

+ +

This section describes the Web Console output for those console API calls that actually result in output. For more general documentation on the console API, please refer to its documentation page.

+ +

From Firefox 40 onwards, the Web Console can display console messages from Shared Workers, Service Workers, and Chrome Workers. Check the relevant options in the Filtering dropdown menu to see them.

+ +

Сообщения об ошибках

+ + + + + + + + + + + + + + + + + + + + + + +
APIMessage content
error() +

The argument to error().

+ +
+console.error("an error");
+ +

The console will display a full stack trace for errors:

+ +
+function error() {
+  console.error("an error");
+}
+
+function call_error() {
+  error();
+}
+
+call_error();
+ +

+
exception()An alias for error().
assert() +

If the assertion succeeds, nothing. If the assertion fails, the argument:

+ +
+console.assert(false, "My assertion always fails");
+ +

The console will display a full stack trace for assertions:

+ +
+function assertion() {
+  console.assert(false, "assertion failed");
+}
+
+function call_assertion() {
+  assertion();
+}
+
+call_assertion();
+ +

+
+ +

Предупреждающие сообщения

+ + + + + + + + + + + + + + +
APIMessage content
warn() +

The argument to warn().

+ +
+console.warn("a warning");
+
+ +

Информативные сообщения

+ + + + + + + + + + + + + + +
APIMessage content
info() +

The argument to info().

+ +
+console.info("some info");
+
+ +

Журнальные сообщения

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIMessage content
count() +

The label supplied, if any, and the number of times this occurrence of count() has been called with the given label:

+ +
+console.count(user.value);
+ +

+
dir() +

Listing of the object's properties:

+ +
+var user = document.getElementById('user');
+console.dir(user);
+
dirxml()Aliased to log().
log() +

The argument to log().

+ +
+console.log("logged");
+ +

 

+ +

Если аргумент — это узел DOM, консоль выдаст его в виде инспектируемого rich text:

+ +

+
table() +

Display tabular data as a table.

+
time() +

Notification that the specified timer started.

+ +
+console.time("t");
+
timeEnd() +

Duration for the specified timer.

+ +
+console.timeEnd("t");
+
trace() +

Stack trace:

+ +
+console.trace();
+
+ +

Группировка сообщений

+ +

Вы можете использовать console.group() для создания indented groups в выводе консоли. Смотрите Использование групп в консоли для более детальной информации.

+ +

Оформление сообщений

+ +

Начиная с Firefox 31, вы можете использовать спецификатор формата "%c" для стилизации консольных сообщений:

+ +
console.log("%cMy stylish message", "color: red; font-style: italic");
+ +
+ +

Сообщения ввода/вывода

+ +

Команды, отправленные браузеру через командную строку, как и результаты их выполнения, выводятся в поле вывода сообщений Веб-консоли в следуюем виде:

+ +

Темно-серая полоса служит индикатором того, что это сообщения ввода/вывода, тогда как направление стрелки обозначает разлчия между вводом и выводом.

+ +

Фильтрация и поиск

+ +

Фильтрация по типу

+ +

Для фильтрации сообщений в поле вывода сообщений Веб-консоли используется панель вверху.

+ +

Чтобы увидеть только сообщения определённого типа, нажмите на кнопку, название которой соответствует желаемому типу сообщений ("Net", "CSS", и т.д.). Нажатие на основную часть кнопки включает/выключает отображение сообщений выбранного типа, тогда как нажатие на стрелку в правой части кнопки вызывает выпадающее меню с более специфическими вариантами фильтров для сообщений выбранного типа (например, вывод только предупреждений и сообщений об ошибках).

+ +

Начиная с Firefox 40, можно настроить опции фильтра "Logging", чтобы видеть сообщения от workers и add-ons:

+ +

+ +

Фильтрация по тексту

+ +

Чтобы видеть только сообщения, содержащие определённую строку, введите её в поле с меткой "Filter output".

+ +

Очистка содержимого

+ +

Наконец, Вы можете использовать эту панель для очистки всех выведенных сообщений.

+ +
+
+ +

Интерпретатор командной строки

+ +

Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.

+ +

+ +

Ввод выражений

+ +

Для ввода выражений просто введите в командную строку и нажмите Enter. Для ввода выражений, состоящих из нескольких строк, используйте комбинацию ShiftEnter вместо Enter.

+ +

Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:

+ +

+ +

Accessing variables

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

+ +

+ +

Автозавершение

+ +

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

Type Enter or Tab to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

+ +

The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

+ +

You get autocomplete suggestions for array elements, as well:

+ +

+ +

Объявление переменных

+ +

Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:

+ +

+ +

История команд

+ +

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

+ +

Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте clearHistory() helper function.

+ +

Работа с iframes

+ +

If a page contains embedded iframes, you can use the cd() command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using cd():

+ +

You can pass the iframe DOM element:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

You can pass a CSS selector that matches the iframe:

+ +
cd("#frame1");
+ +

You can pass the iframe's global window object:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

To switch the context back to the top-level window, call cd() with no arguments:

+ +
cd();
+ +

For example, suppose we have a document that embeds an iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

The iframe defines a new function:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

You can switch context to the iframe like this:

+ +
cd("#frame1");
+ +

Now you'll see that the global window's document is the iframe:

+ +

And you can call the function defined in the iframe:

+ +

+ +

Helper commands

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}

+ +

Rich output for objects

+ +

When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:

+ + + +

Type-specific rich output

+ +

The Web Console provides rich output for many object types, including the following:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Object
Array
Date
Promise +
+

Новое в Firefox 36

+
+ +

+
RegExp
Window
Document
Element
+ +

Examining object properties

+ +

When an object is logged to the console it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:

+ +

To dismiss this panel press Esc..

+ +

Выделение и инспектирование узлов DOM

+ +

If you hover the mouse over any DOM element in the console output, it's highlighted in the page:

+ +

In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the Inspector with that node selected.

+ +

The split console

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

You can use the console alongside other tools. While you're in another tool in the Toolbox, just press Esc or press the "Toggle split console" button in the Toolbar. The toolbox will now appear split, with the original tool above and the web console underneath.

+ +

As usual, $0 works as a shorthand for the element currently selected in the Inspector:

+ +

When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

+ +

+ +

Клавиши быстрово вызова

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Global shortcuts

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/ru/tools/web_console/opening_the_web_console/index.html b/files/ru/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..41f3e760cc --- /dev/null +++ b/files/ru/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,23 @@ +--- +title: Opening the Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}

To open the Web Console:

+ + + +

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

+ +

+ +

The Web Console's interface is split into three horizontal sections:

+ + diff --git a/files/ru/tools/web_console/split_console/index.html b/files/ru/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..8085c9a199 --- /dev/null +++ b/files/ru/tools/web_console/split_console/index.html @@ -0,0 +1,18 @@ +--- +title: Разделённая консоль +slug: Tools/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +

Вы можете использовать консоль вместе с другими инструментами. Находясь в другом инструменте панели инструментов, просто нажмите клавишу Esc или выберите команду «Показать разделенную консоль» в меню панели инструментов. Панель инструментов теперь будет разделена, с исходным инструментом вверху и веб-консолью внизу.

+ +

Вы можете закрыть разделенную консоль, снова нажав Esc или выбрав команду меню «Скрыть разделенную консоль».

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Как обычно, $0 работает как сокращение для элемента, выбранного в данный момент в Инспекторе:

+ +

При использовании разделенной консоли с отладчиком, областью действия консоли является текущий выполняемый кадр стека. Таким образом, если вы нажмете точку останова в функции, область действия будет областью действия функции. Вы получите автозаполнение для объектов, определенных в функции, и сможете легко изменять их на лету:

+ +

diff --git a/files/ru/tools/webide/index.html b/files/ru/tools/webide/index.html new file mode 100644 index 0000000000..f8c0ab40fd --- /dev/null +++ b/files/ru/tools/webide/index.html @@ -0,0 +1,252 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - Firefox OS + - WebIDE + - tool + - Отладка + - инструменты +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

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 секции:

+ + + +

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

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

+ +

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

+ +

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

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

Добавление Симулятора 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.

+ +

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

+ +

{{ 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:

+ +

+ +


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

+ + + +

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

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

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

    +
  2. +
  3. +

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

    + +
    stop b2g
    +
  4. +
  5. +

    Смените текущую директорию:

    + +
    cd /data/b2g/mozilla/*.default/
    +
  6. +
  7. +

    Добавьте следующую строку в файл prefs.js :

    + +
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    +
  8. +
  9. +

    Перезапустите B2G:

    + +
    start b2g
    +
  10. +
  11. +

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

    +
  12. +
+ +

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

+ +

 

+ +

 

diff --git a/files/ru/tools/webide/monitor/index.html b/files/ru/tools/webide/monitor/index.html new file mode 100644 index 0000000000..0f7a579909 --- /dev/null +++ b/files/ru/tools/webide/monitor/index.html @@ -0,0 +1,110 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +tags: + - Monitor +translation_of: Archive/WebIDE/Monitor +--- +
{{ToolsSidebar}}

WebIDE Monitor инструмент предназначеный помочь вам отслеживать эффективность работы Firefox OS  приложений и устройств.

+

The WebIDE Monitor

+

Monitor способен отображать существующие, интерактивные графики для визуализации временных рядов.

+

Доступные графики

+

Monitor поставляется с несколькими различными графиками. Они появляются сразу после того, как WebIDE подключается к Firefox OS.

+

Обычный пример

+

Unique Set Size

+

График показывает работу всех процессов Firefox OS в течение данного времени. Если вас интересует потребление памяти приложением в Firefox OS, запустите приложения, и процесс использования памяти отобразится на графике.

+

Отображение ваших данных

+

Отображать любые данные на Monitor очень легко, он принимает отформатированные обновления из разных источников.

+

Устройства Firefox OS

+

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

+

Примечание: Если вы хотите сделать это в сертифицированном приложении пожалуйста, следуйте этой инструкции.

+

JavaScript

+

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+

Вы можете отправить данные из любого кода JS с chrom привилегией. Пример измерения времени выполнения определенного кода JS:

+

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop }
;
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+

C++

+

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+

Вы можете отправить данные из любого места в Gecko. Пример измерения времени выполнения определенного кода:

+

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+

С вашего компьютера

+

 

+

Можно легко передавать данные на Monitor по серверу WebSockets. Это может быть полезно, если вы пишете расширение Firefox, инструмент командной строки или веб-service.

+

По умолчанию Monitor ищет сервер работающий на порту 9000 вашего компьютера. Вы можете изменить это путем обновления

+

devtools.webide.monitorWebSocketURL preference.

+

Вы также можете в этот момент принимать данные из локальной сети или из любой точки мира через Интернет.

+

Node.js

+

TODO

+

Python

+

TODO

+

Поддерживаемые форматы

+

Monitor принимает данные в виде объектов JSON, которые обычно выглядят следующим образом:

+

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+

Этот формат предназначен для большего удобства. Если указано, что График или кривая не существует, он будет создан автоматически.

+

Произвольные имена

+

Неопознанные записи будут рассматриваться как имя кривой и стоимости.

+

Для маленького пакета данных вы можете использовать что-то вроде:

+

{ "myCurve": 42 }

+

Это добавит данные указывающие на "myCurve" в графе no name. Отсутствует time по умолчанию, когда Monitor получил пакет.

+

Для повышения точности лучше всегда указывать метку времени "timestamp" для хранения данных:

+

{
+   "current": 60,

+   "voltage": 500,
+   "time": 1234567890
+ }

+

Несколько значений

+

В одном обновлении, вы можете отправить данные для нескольких кривых:

+

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+

Или несколько точек данных для одной кривой:

+

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+

Multiple обновления

+

И вы также можете отправить несколько обновлений данных в виде массива:

+

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+

Специальное событие

+

Чтобы отметить специальное событие в графе с вертикальной чертой, добавьте ключ событий для обновления вашего:

+

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/ru/tools/webide/setting_up_runtimes/index.html b/files/ru/tools/webide/setting_up_runtimes/index.html new file mode 100644 index 0000000000..2fd78e6f57 --- /dev/null +++ b/files/ru/tools/webide/setting_up_runtimes/index.html @@ -0,0 +1,132 @@ +--- +title: Настройка времени выполнения +slug: Tools/WebIDE/Setting_up_runtimes +tags: + - Боковая панель + - Операционная Система + - Руководство + - Симуляторы +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +

{{ToolsSidebar}}

+ +

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

+ + + +

В WebIDE, вы будете использовать боковую панель в правой стороне для управления временами выполнения:

+ +

+ +

В этой боковой панели времена выполнения сгрупирированны в четыре типа:

+ +
+
USB УСТРОЙСТВА
+
Устройства Firefox OS подключены через USB. С Firefox 36 это также позволяет вам подключиться к Firefox for Android over USB.
+
WI-FI УСТРОЙСТВА
+
Устройства Firefox OS подключены через Wi-Fi. Новое в Firefox 39.
+
СИМУЛЯТОРЫ
+
Экземпляры установленного вами симулятора Firefox OS.
+
ДРУГИЕ
+
Удаленные среды выполнения для подключения WebIDE к произвольному хосту и порту. Если у вас есть Valence надстройка установлена, этот раздел также перечислит additional runtimes it enables.
+
+ +

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

+ +

Подключение Firefox OS устройства

+ +

Если у вас достаточно свежая версия Firefox и Firefox OS, вы можете подключиться по WI-FI. В противном случае вы должны подключиться через USB.

+ + + +

Подключение к Firefox для Android

+ +

Устройства Android, подключенные через USB и работающие с Firefox для Android, отображаются как среда выполнения в разделе «Устройства USB». Начиная с Firefox 42, вы можете подключаться к Firefox для Android через Wi-Fi.

+ + + +

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

+ +

Firefox OS Simulator

+ +

является версией более высоких уровней ОС Firefox, которая имитирует устройство с ОС Firefox, но работает на рабочем столе. Он работает в окне того же размера, что и устройство с ОС Firefox, включает в себя пользовательский интерфейс ОС Firefox и встроенные приложения, а также имитирует многие API-интерфейсы устройства с ОС Firefox.

+ +

Это означает, что во многих случаях вам не нужно реальное устройство для тестирования и отладки вашего приложения.

+ +

Симулятор поставляется не внутри Firefox, а как Firefox дополнение.Если вы нажмете «Установить симулятор» на боковой панели «Runtime», вы перейдете на страницу, с которой вы можете установить симуляторы для различных версий Firefox OS.

+ +

Вы можете установить сколько вам угодно. Однако будьте терпеливы: Симулятор может занять несколько минут для скачивания.

+ +

Заметьте для того чтобы запустить Firefox OS Симулятор 2.6 или позднюю версию, вы должны использовать Firefox 45 или позднюю версию.

+ +

Один раз установя некоторые Симуляторы вы можете закрыть это "Extra Components" окно, и Симуляторы которые вы установили появляются как опция в панели времён выполнения:

+ +

+ +

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

+ +

Конфигурирование Симуляторов

+ +

Новое в Firefox 42

+ +

Начиная с Firefox 42, в боковой панели рядом с каждым перечисленным Симулятором вы увидите иконку настроек:

+ +

+ +

Кликните его, и вы увидите экран позволяющий вам управлять Симулятором:

+ +

Вы можете:

+ + + +

Другие времена выполнения

+ +

Удалённое время выполнения

+ +

С помощью удаленной среды выполнения вы можете использовать произвольное имя хоста и порт для подключения к удаленному устройству.

+ +

Устройства Firefox OS и Android подключаются к рабочему столу с помощью программы, называемой Android Debug Bridge, или ADB. По умолчанию в WebIDE используется надстройка, которая называется ADB Helper: это упрощает процесс, устанавливая ADB и настраивая переадресацию портов, чтобы инструменты рабочего стола Firefox могли обмениваться сообщениями с устройством.

+ +

В большинстве случаев это удобно, но иногда вам может понадобиться использовать ADB вне WebIDE: например, вы можете запускать ADB непосредственно из командной строки. В этом случае вы подключитесь к устройству, указав хост и порт, используя adb forward команду (пример: adb forward tcp:6000 localfilesystem:/data/local/debugger-socket).
+
+Если вы затем хотите использовать WebIDE для подключения, вам следует разблокировать дополнения и подключить WebIDE, используя опцию Custom runtime, указав хост и порт, которые вы передали в adb forward (пример: localhost:6000).

+ +

Кроме того, до Firefox 36 помощник ADB еще не поддерживает подключение к Firefox для Android, поэтому, если вы хотите подключить WebIDE к Firefox для Android, вам нужно настроить собственную переадресацию портов и использовать пользовательскую среду выполнения. узнайте больше о подключении FireFox для Android c использованием .

+ +

Valence-enabled времена выполнения

+ +

Если у вас установлено дополнение Valence, вы увидите три дополнительных среды выполнения:

+ + + +

Инструкции по подключению к этим средам выполнения см. В соответствующей записи в удаленной отладке.

+ +

Выбор времени выполнения

+ +

После настройки среды выполнения вы можете выбрать ее с помощью боковой панели «Runtime».

+ + + +

Теперь кнопка «играть» в центре панели инструментов WebIDE включена: нажмите ее, чтобы установить и запустить приложение в выбранной среде выполнения.

diff --git a/files/ru/tools/webide/troubleshooting/index.html b/files/ru/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..f4aed2ec9d --- /dev/null +++ b/files/ru/tools/webide/troubleshooting/index.html @@ -0,0 +1,155 @@ +--- +title: Решение проблем с WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

Подключение устройства на Firefox OS по USB

+ +

Если вы пытаетесь подключить устройство на Firefox OS к WebIDE и его не видно, вот некоторые вещи, которые вы можете попробовать:

+ + + +

Подключение к устройству Firefox OS по Wi-Fi

+ + + +

Подключение к Firefox для Android

+ +

Если вы пытаетесь подключиться к Firefox, работающему на Android OS и устройство не отображается, то вот несколько вещей, которые вы можете попробовать:

+ + + +

Подключение Firefox для Android по Wi-Fi

+ + + + + +

Подключение к другим браузерам (Chrome, Safari)

+ +

WebIDE использует Valence (бывший Firefox Tools Adapter) для подключения к другим браузерам, например, Chrome and Safari.

+ +

При возникновении проблем с подключением к другим браузерам, проверьте настройки, а также примечания касаемо этих браузеров на странице Valence.

+ +

Не удаётся отладить некоторые приложения

+ +

Если вы понимаете, что вам не удаётся отладить сертифицированные приложения, встроенные приложения или приложения уже установленные на реальном устройстве, то вы вероятно столкнулись с ограниченными привилегиями политики безопасности WebIDE. Чтобы узнать больше, посмотрите раздел Unrestricted app debugging (including certified apps, main process, etc.).

+ +

Не удаётся загрузить список проектов

+ +

Если открыть WebIDE в одной версии Firefox, а потом откатиться до предыдущей версии Firefox с тем же профилем, вы можете увидеть сообщение об ошибке "не удается загрузить список проектов" при открытии WebIDE в предыдущей версии Firefox.

+ +

Это случается, когда система хранения данных, которую использует WebIDE (IndexedDB), требует переместить и реструктурировать внешние файлы для новой версии Firefox. Список проектов становится фактически недоступным для старых версий Firefox.

+ +

Данные не теряются, но вам придётся продолжить использовать самую новую версию Firefox, с которой использовался ваш профиль, чтобы получить список проектов обратно.

+ +

Если вы очень хотите использовать старую версию Firefox, вы можете попытаться удалить только список проектов следующим образом, но это не поддерживается и может привести к проблемам в дальнейшим или дополнительным потерям данных:

+ +
    +
  1. Закройте Firefox
  2. +
  3. Найдите вашу директорию профиля Firefox
  4. +
  5. Найдите папку storage внутри директории профиля
  6. +
  7. В некоторых местах этого древа файлов могут быть файлы и/или директории, которые начинаются с 4268914080AsptpcPerjo (хэшированное имя базы данных)) +
      +
    • +

      Например, они могут располагаться в <профиль>/storage/permanent/indexeddb+++fx-devtools/idb

      +
    • +
    +
  8. +
  9. Удалите все подобные файлы и директории
  10. +
  11. Запустите Firefox и WebIDE снова
  12. +
+ +

Включить ведение журнала

+ +

Вы также можете включить подробное протоколирование для сбора диагностических данных:

+ +
    +
  1. Откройте about:config, и добавьте новый параметр, называемый extensions.adbhelper@mozilla.org.sdk.console.logLevel со значением all и установите extensions.adbhelper@mozilla.org.debug в true.
  2. +
  3. В дополнениях, отключите и заново включите дополнение ADB Helper.
  4. +
  5. Откройте Веб-консоль и вы увидите сообщения с префиксом adb. Если эти сообщения ничего для вас не значат, попросите помощи.
  6. +
+ +

Получить помощь

+ +

Зайдите на IRC-канал #devtools, и мы постараемся вам помочь.

diff --git "a/files/ru/tools/webide/\320\267\320\260\320\277\321\203\321\201\320\272_webide/index.html" "b/files/ru/tools/webide/\320\267\320\260\320\277\321\203\321\201\320\272_webide/index.html" new file mode 100644 index 0000000000..929a74b817 --- /dev/null +++ "b/files/ru/tools/webide/\320\267\320\260\320\277\321\203\321\201\320\272_webide/index.html" @@ -0,0 +1,29 @@ +--- +title: Запуск WebIDE +slug: Tools/WebIDE/Запуск_WebIDE +tags: + - Tools + - WebIDE +translation_of: Archive/WebIDE/Opening_WebIDE +--- +
{{ToolsSidebar}}

Есть три способа открытия WebIDE:

+ + + +

+ +

Нажмите на него и вы увидите как откроется WebIDE:Ниспадающий список слева с надписью «Открыть Приложение» (Open App) позволяет открывать существующие приложения или создавать новые. Ниспадающий список справа с надписью «Выбрать Runtime» (Select Runtime) позволяет выбрать среду исполнения или установить и настроить новую.

+ +

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

+ +

You can change the font size throughout WebIDE using the standard keyboard shortcuts (use Command instead of Control on OS X):

+ + diff --git a/files/ru/tools/working_with_iframes/index.html b/files/ru/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..c1985d882a --- /dev/null +++ b/files/ru/tools/working_with_iframes/index.html @@ -0,0 +1,28 @@ +--- +title: Работа с фреймами +slug: Tools/Working_with_iframes +tags: + - фрейм +translation_of: Tools/Working_with_iframes +--- +
{{ToolsSidebar}}
+

Эта особенность является новинкой в Firefox 34.

+
+ +

From Firefox 34 и далее, вы можете указать инструменты разработчика на конкретный iframe в пределах документа .

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

Эта функция отключена по умолчанию: чтобы включить ее, откройте developer tool settings и выберите "Select an iframe as the currently targeted document":

+ +

Вы не увидите новую кнопку на панели инструментов:

+ +

Нажмите на него, и вы увидите всплывающее окно со списком всех вложенных фреймов в документе, а также самого главного документа.

+ +

+ +
+

Обратите внимание, что на данный момент вам нужно обновить страницу или закрыть и снова открыть инструменты разработчика, чтобы видеть всплывающее окно. Это отслеживается, как bug 1062233.

+
+ +

При выборе записи в списке, все инструменты на панели инструментов InspectorConsoleDebugger и так далее - теперь нацелены только этот фрейм, и по существу, ведут себя так, как будто остальная часть страницы не существует.

diff --git "a/files/ru/tools/\320\270\320\275\321\201\320\277\320\265\320\272\321\202\320\276\321\200_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\320\276\321\201\321\202\320\270/index.html" "b/files/ru/tools/\320\270\320\275\321\201\320\277\320\265\320\272\321\202\320\276\321\200_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\320\276\321\201\321\202\320\270/index.html" new file mode 100644 index 0000000000..a375a027ae --- /dev/null +++ "b/files/ru/tools/\320\270\320\275\321\201\320\277\320\265\320\272\321\202\320\276\321\200_\320\264\320\276\321\201\321\202\321\203\320\277\320\275\320\276\321\201\321\202\320\270/index.html" @@ -0,0 +1,166 @@ +--- +title: Инспектор доступности +slug: Tools/Инспектор_доступности +translation_of: Tools/Accessibility_inspector +--- +
{{ToolsSidebar}}
+ +

Инспектор доступности предоставляет средства для доступа к важной информации, предоставляемой вспомогательным технологиям на текущей странице, через дерево доступности, позволяя вам проверить, что отсутствует или иным образом требует внимания. В этой статье вы узнаете основные функции инспектора доступности и способы его использования.

+ +

Очень краткое руководство по доступности

+ +

Доступность - это средство, позволяющее использовать ваши сайты как можно большему числу людей. Это означает, что вы стараетесь изо всех сил не ограничивать кого-либо в доступе к информации из-за какой-либо имеющейся инвалидности, или любых других личных особенностей, таких как используемое устройство, скорости их сетевого подключения или их географического местоположения или языка.

+ +

Здесь мы в основном говорим о том, чтобы донести информацию людям с нарушениями зрения - это делается с помощью API доступности, доступных внутри веб-браузеров, которые раскрывают информацию о том, какие роли играют разные элементы на вашей странице (например, они являются текстом или кнопками, ссылками, элементами форм и т. д.?).

+ +

Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые имеют свое предназначение. Иногда приходится использовать некоторую не семантическую разметку (например, {{htmlelement ("div")}}) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для обозначения своих собственных ролей.

+ +

Роли и другая информация, предоставляемая API-интерфейсами браузера, представлена в иерархической структуре, называемой деревом доступности. Это немного похоже на дерево DOM, за исключением того, что оно содержит более ограниченный набор элементов и немного другую информацию о них.

+ +

Вспомогательные технологии, такие как скринридеры, используют эту информацию, чтобы узнать, что находится на веб-странице и сообщают своим пользователям и  это позволяет им взаимодействовать со страницей. Инспектор доступности также использует эту информацию для обеспечения возможностей для отладки доступности в DevTools.

+ +

Доступ к инспектору доступности

+ +

The accessibility inspector (available since Firefox 61) is not shown by default in the DevTools. To turn it on, you need to go to DevTools Settings (press F1, or go to the "three dots" menu and choose Settings) and check the Accessibility checkbox under the Default Developer Tools heading. This will cause the Accessibility tab to appear in the main DevTools display, which can be clicked on to display the accessibility panel:

+ +

Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features

+ +

Initially the DevTools accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as Memory and Performance as well as overall browser performance. For this reason you should keep it turned off when you aren't specifically using it.

+ +

You can turn the features on using the Turn On Accessibility Features button.

+ +

Once the panel content loads, you can then turn it off again using the Turn Off Accessibility Features button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabed.

+ +
+

Note: If are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.

+
+ +

Особенности панели доступности

+ +

The enabled accessibility panel looks like so:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features

+ +

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

+ + + +

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

+ + + +
+

Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.

+
+ +

Keyboard controls

+ +

The Accessibility tab is fully keyboard-accessible:

+ + + +

Вывод дерева доступности в JSON-формате

+ +

You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting Print to json:

+ +

+ +

When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:

+ +

+ +

Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw json data on a separate tab in the viewer.

+ +

Известные связанные особенности

+ +

When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:

+ +

Context menu options

+ +

An extra context menu option is added, both for the general context menu on the web page when right/Ctrl + clicking a UI feature, and the HTML pane of the page inspector when right/Ctrl + clicking a DOM element:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.

+ +
+

Note: Some DOM elements do not have accessibility properties — in such a case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.

+
+ +

Выделение элементов интерфейса

+ +

In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.

+ +

In the following example, you can see that the image has been highlighted and its role, graphic, and name, "Road, Asphalt, Sky, Clouds, Fall" appears in the information bar above it.

+ +

+ +

Цветовой контраст

+ +

Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as color blindness will be unable to read the text. The Web Content Accessibility Guidelines (WCAG) 2.0 defines 4.5:1 as the minimum suggested contrast ratio between the foreground and background colors for smaller text on a web page. For example:

+ +

+ +

The color contrast in the image above is 2.77, potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio. Compare that to the following:

+ +

+ +

In this example, the contrast is 12.63. This time the number is followed by AAA and a checkmark in green, indicating that the text has a contrast ratio of 7:1 or more, meaning it meets the criteria for enhanced contrast, or Level AAA.

+ +

Accessibility picker

+ +

In a similar way to the Page Inspector HTML pane picker, when the Accessibility tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.

+ +

The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.

+ +

When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.

+ +

Типичное использование

+ +

The accessibility inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

+ +

A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null

+ +

It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or whether a link is really a link).

+ +

A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null

+ +

Смотри также

+ + + +
 
diff --git "a/files/ru/tools/\320\272\320\276\320\275\321\201\320\276\320\273\321\214_\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\260/index.html" "b/files/ru/tools/\320\272\320\276\320\275\321\201\320\276\320\273\321\214_\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\260/index.html" new file mode 100644 index 0000000000..487bc2eb5e --- /dev/null +++ "b/files/ru/tools/\320\272\320\276\320\275\321\201\320\276\320\273\321\214_\320\261\321\200\320\260\321\203\320\267\320\265\321\200\320\260/index.html" @@ -0,0 +1,180 @@ +--- +title: Консоль браузера +slug: Tools/Консоль_браузера +tags: + - Tools + - Web Development + - Браузер + - Отладка + - 'веб-разработка:инструменты' + - консоль +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}

Консоль браузера — как Веб-консоль, но для работы со всем браузером, а не с отдельной его вкладкой.

+ +

То есть, она протоколирует такую же информацию, что и Веб-консоль: сетевые запросы, ошибки и предупреждения JavaScript и CSS, ошибки и предупреждения о безопасности, и информационные сообщения, выдаваемые непосредственно кодом JavaScript. Однако она протоколирует эту информацию не только для одной вкладки с контентом, но для всех вкладок с контентом, для дополнений, и для кода самого браузера.

+ +

Если вы хотите использовать и другие инструменты, доступные в обычном наборе инструментов веб-разработки, с кодом дополнений или браузера, вам может пригодиться Панель инструментов браузера.

+ +

В Консоли браузера можно также выполнять и выражения JavaScript. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

+ +
+

Внимание: начиная с Firefox 30, командная строка Консоли браузера (куда вставляются выражения JavaScript) по умолчанию выключена. Чтобы её включить, присвойте настройке about:config devtools.chrome.enabled значение true, либо поставьте галочку «Включить инструменты отладки browser chrome и дополнений» (начиная с Firefox 40) / «Включить отладку chrome и дополнений» (по Firefox 38.0.5 включительно) в настройках панели инструментов разработчика.

+
+ +

Открытие Консоли браузера

+ +

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

+ +
    +
  1. из меню: выбрать «Консоль браузера» из меню Разработка в меню Firefox (или меню Инструменты, если оно включено или на OS X)
  2. +
  3. с клавиатуры: нажать Ctrl+Shift+J (или Cmd+Shift+J на Mac).
  4. +
+ +

Note that until Firefox 38, if the Browser Console has become hidden by a normal Firefox window and you select it again, either from the menu or from the keyboard, then it will be closed. From Firefox 38 onwards, this instead has the effect of switching the focus back to the Browser Console, which is more likely to be what you wanted.

+ +

You can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

The Browser Console looks like this:

+ +

+ +

You can see that the Browser Console looks and behaves very much like the Web Console:

+ + + +

Browser Console logging

+ +

The Browser console logs the same sorts of messages as the Web Console:

+ + + +

However, it displays such messages from:

+ + + +

Messages from add-ons

+ +

The Browser Console displays messages logged by all Firefox add-ons.

+ +

Console.jsm

+ +

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

+ +

One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.

+ +
Components.utils.import("resource://gre/modules/devtools/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Learn more:

+ + + +

HUDService

+ +

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla Cross-Reference. We see we can not only access the Browser Console but also Web Console.

+ +

Here is an example on how to clear the contents of the Browser console:

+ +
Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

+ +
Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Bonus Features Available

+ +

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

+ +

Click the icon. You'll see output like this in the Browser Console:

+ +

+ +

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

+ +

Browser Console command line

+ +
+

From Firefox 30, the Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

+
+ +

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

+ +

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

+ +

+ +

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

+ +

Controlling the browser

+ +

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

+ +

Modifying the browser UI

+ +

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

On OS X, this similar code will add a new item to the "Tools" menu:

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git "a/files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" "b/files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" new file mode 100644 index 0000000000..c8d17fffac --- /dev/null +++ "b/files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" @@ -0,0 +1,24 @@ +--- +title: Линейки +slug: Tools/Линейки +translation_of: Tools/Rulers +--- +
{{ToolsSidebar}}

Новое в Firefox 40.

+ +

Начиная с Firefox 40, можно отобразить горизонтальную и вертикальную линейки на странице:

+ +

Единица измерения - пиксели (точки, px).

+ +

Есть два способа включить линейки:

+ + + +

Нужно помнить при пользованиями линейками:

+ + diff --git "a/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/index.html" "b/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/index.html" new file mode 100644 index 0000000000..ba11369101 --- /dev/null +++ "b/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/index.html" @@ -0,0 +1,95 @@ +--- +title: Производительность +slug: Tools/Производительность +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}

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

+ +

Вы получите четыре набора инструментов для более подробного изучения аспектов профиля:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Приступая к работе

+ +
+
+
+
UI Tour (Пользовательский интерфейс)
+
+

Чтобы найти свой вариант производительности инструмента, вот краткий обзор пользовательского интерфейса UI.

+
+
+
+ +
+
+
How to (Как)
+
Основные задачи: откройте инструмент создать, сохранить, загрузить и настроить записи.
+
+
+
+ +
+

Компоненты инструмента производительности

+ +
+
+
+
Frame rate (Частота кадров)
+
Исследование Вашего сайта на отзывчивость.
+
Call Tree (Дерево вызовов)
+
Поиск узких мест Вашего сайта на JavaScript.
+
+
+ +
+
+
Waterfall (Водопад)
+
Исследует работу браузера на взаимодействие пользователей с Вашим сайтом.
+
Flame Chart (Диаграмма)
+
Обзор выполнения функций JavaScript во времени.
+
Allocations (Распределение)
+
Просмотр распределений сделанных вашим кодом во время записи.
+
 
+
 
+
+
+
+ +
+

Сценарии

+ +
+
+
+
Animating CSS properties (Свойства анимации CSS)
+
Использует водопад чтобы понять как браузер обновляет страницу, и как меняя разные свойства CSS можно улучшить производительность.
+
 
+
+
+ +
+
+
Intensive JavaScript (Интенсивный JS)
+
Использует частоту кадров и инструменты водопада для выделения проблем с производительностью, вызванные длительной загрузкой JavaScript и каким образом с помощью инструментов разработчика  возможно исправить ситуацию.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git "a/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/waterfall/index.html" "b/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/waterfall/index.html" new file mode 100644 index 0000000000..1531a44a10 --- /dev/null +++ "b/files/ru/tools/\320\277\321\200\320\276\320\270\320\267\320\262\320\276\320\264\320\270\321\202\320\265\320\273\321\214\320\275\320\276\321\201\321\202\321\214/waterfall/index.html" @@ -0,0 +1,386 @@ +--- +title: Waterfall +slug: Tools/Производительность/Waterfall +translation_of: Tools/Performance/Waterfall +--- +
{{ToolsSidebar}}
+

Водопад (Waterfall) дает вам представление о различных процессах, которые происходят внутри браузера, когда вы открывайте ваш сайт или запускаете ваше приложение. Он основан на идее разделения всех происходящих внутри браузера процессов на различные типы  - запуск JavaScript, обновление layout и так далее - и что в любой момент времени браузрер выполняет один из этих процессов.

+ +

Поэтому если вы увидите признаки проблем с производительностью  - например, падения частоты кадров - вы можете запустить Waterfall, чтобы увидеть, что делает браузер в этот момент.

+
+ +

+ +

Ось X это ось времени. Записанные операции и вызванные маркеры отображаются в виде горизонтальных прямоуголников, расположенных в виде водопада, чтобы подчеркнуть последовательность выполнения внутри браузера.

+ +

При выборе маркера вы увидите подробную информацию о нем на панели справа. В этой панели вы сможете узнать продолжительность и другую специфичную для конктреного типа процесса инофрмацию .

+ +

Markers

+ +

The markers for operations are color-coded and labeled. The following operations are recorded:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Name and descriptionColorDetailed information
+

DOM Event

+ +

JavaScript code that's executed in response to a DOM event.

+
+
+
Event Type
+
For example, "click" or "message".
+
+ +
+
Event Phase
+
For example, "Target" or "Capture".
+
+
+

JavaScript functions executed in the page are labeled with the reason the function was called:

+ +

Script Tag
+ setInterval
+ setTimeout
+ requestAnimationFrame
+ Promise Callback
+ Promise Init
+ Worker
+ JavaScript URI
+ Event Handler

+
+
+
Stack
+
Call stack, with links to functions.
+
+
+

Parse HTML

+ +

Time spent parsing the page's HTML.

+
+
+
Stack
+
Call stack, with links to functions.
+
+
+

Parse XML

+ +

Time spent parsing the page's XML.

+
+
+
Stack
+
Call stack, with links to functions.
+
+
+

Recalculate Style

+ +

Calculating the computed styles that apply to page elements.

+
+
+
Restyle Hint
+
A string indicating what kind of restyling is needed. The hint may be any of:
+ Self
+ Subtree
+ LaterSiblings
+ CSSTransitions
+ CSSAnimations
+ SVGAttrAnimations
+ StyleAttribute
+ StyleAttribute_Animations
+ Force
+ ForceDescendants
+
+
+

Layout

+ +

Calculating the position and size of page elements. This operation is sometimes called "reflow".

+
 
+

Paint

+ +

Drawing pixels to the screen.

+
 
+

GC Event

+ +

Garbage collection event. Non-incremental GC events are labeled "(Non-incremental)".

+
+
+
Reason
+
A string the indicating the reason GC was performed.
+
Non-incremental Reason
+
If the GC event was non-incremental, a string the indicating the reason non-incremental GC was performed.
+
+
+

Console

+ +

The period between matching calls to console.time() and console.timeEnd().

+
+
+
Timer name
+
The argument passed to the console functions.
+
Stack at start
+
Call stack console.time(), with links to functions.
+
Stack at End
+
(New in Firefox 41). Call stack at console.timeEnd(). If this is inside a callback from a Promise, this will also show the "Async stack".
+
+
+

Timestamp

+ +

A single call to console.timeStamp().

+
+
+
Label
+
The argument passed to timeStamp().
+
+
+ +

The markers, and their colors, are the same in the Waterfall tool as in the Waterfall overview, making is easy to correlate from one to the other.

+ +

Filtering markers

+ +

You can control which markers are displayed using a button in the Toolbar:

+ +

+ +

Waterfall patterns

+ +

Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.

+ +

Rendering waterfall

+ +

One pattern that you'll often see in the Waterfall view is something like this:

+ +

+ +

This is a visualization of the basic algorithm the browser uses to update the page in response to some event:

+ +
    +
  1. JavaScript Function Call: some event - for example, a DOM event - causes some JavaScript in the page to run. The JavaScript changes some of the page's DOM or CSSOM.
  2. +
  3. Recalculate Style: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.
  4. +
  5. Layout: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled "layout" but is also sometimes called "reflow".
  6. +
  7. Paint: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "Composition".
  8. +
+ +

This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.

+ +

Importantly for responsiveness, the browser doesn't always have to go through every step:

+ + + +

The Animating CSS properties article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.

+ +

Blocking JavaScript

+ +

By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.

+ +

Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:

+ +

+ +

The Intensive JavaScript article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.

+ +

Expensive paints

+ +

Some paint effects, such as box-shadow, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.

+ +

Garbage collection

+ +

Red markers in the Waterfall represent garbage collection (GC) events, in which SpiderMonkey (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.

+ +

To help reduce the length of pauses, SpiderMonkey implements incremental GC: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.

+ +

When the Waterfall records a GC marker it indicates:

+ + + +

In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:

+ + + +

Adding markers with the console API

+ +

Two markers are directly controlled by console API calls: "Console" and "Timestamp".

+ +

Console markers

+ +

These enable you to mark a specific section of the recording.

+ +

To make a console marker, call console.time() at the start of the section, and console.timeEnd() at the end. These functions take an argument which is used to name the section.

+ +

For example, suppose we have code like this:

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+
+  console.timeEnd("calculating...");
+
+  return primes;
+}
+ +

The Waterfall's output will look something like this:

+ +

+ +

The marker is labeled with the argument you passed to console.time(), and when you select the marker, you can see the program stack in the right-hand sidebar.

+ +

Async stack

+ +

New in Firefox 41.

+ +

Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point console.timeEnd() was called. If console.timeEnd() was called from the resolution of a Promise, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.

+ +

For example, consider code like this:

+ +
var timerButton = document.getElementById("timer");
+timerButton.addEventListener("click", handleClick, false);
+
+function handleClick() {
+  console.time("timer");
+  runTimer(1000).then(timerFinished);
+}
+
+function timerFinished() {
+  console.timeEnd("timer");
+  console.log("ready!");
+}
+
+function runTimer(t) {
+  return new Promise(function(resolve) {
+    setTimeout(resolve, t);
+  });
+}
+ +

The Waterfall will display a marker for the period between time() and timeEnd(), and if you select it, you'll see the async stack in the sidebar:

+ +

+ +

Timestamp markers

+ +

Timestamps enable you to mark an instant in the recording.

+ +

To make a timestamp marker, call console.timeStamp(). You can pass an argument to label the timestamp.

+ +

For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:

+ +
var iterations = 70;
+var multiplier = 1000000000;
+
+function calculatePrimes() {
+  console.time("calculating...");
+
+  var primes = [];
+  for (var i = 0; i < iterations; i++) {
+
+    if (i % 10 == 0) {
+      console.timeStamp(i.toString());
+    }
+
+    var candidate = i * (multiplier * Math.random());
+    var isPrime = true;
+    for (var c = 2; c <= Math.sqrt(candidate); ++c) {
+      if (candidate % c === 0) {
+          // not prime
+          isPrime = false;
+          break;
+       }
+    }
+    if (isPrime) {
+      primes.push(candidate);
+    }
+  }
+  console.timeEnd("calculating...");
+  return primes;
+}
+ +

In the Waterfall you'll now see something like this:

+ +

+ +

 

diff --git "a/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" "b/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" new file mode 100644 index 0000000000..2046bd6a74 --- /dev/null +++ "b/files/ru/tools/\321\207\320\265\321\200\320\275\320\276\320\262\320\270\320\272/index.html" @@ -0,0 +1,123 @@ +--- +title: Черновик +slug: Tools/Черновик +tags: + - Scratchpad + - Блокнот + - Веб-разработка + - Редактор + - 'веб-разработка:инструменты' + - инструменты +translation_of: Archive/Tools/Scratchpad +--- +
{{ToolsSidebar}}
+ +

Простой редактор (Scratchpad, блокнот) JavaScript обеспечивает среду для экспериментов с JavaScript-кодом. Вы можете писать и запускать в нём код, взаимодействующий с содержимым веб-страницы, и проверять результаты его выполнения.

+ +

В отличие от Веб-консоли, которая позволяет интерпретировать только одну строку кода за раз, этот редактор позволяет вам редактировать большие фрагменты кода на JavaScript, затем запускать их разными способами в зависимости от того, как вы хотите использовать вывод результата.

+ +

{{EmbedYouTube("Pt7DZACyClM")}}

+ +

Использование

+ +

Открываем редактор в отдельном окне

+ +

Чтобы открыть окно редактора JavaScript в отдельном окне:

+ + + +

Открытие Редактора в окне Инструменты разработки

+ +
Новое в Firefox 47.
+ +

Начиная с Firefox 47, вы можете открыть редактор внутри окна "Инструменты разработки". Вначале установите галочку напротив «Простой редактор JavaScript», которая находится  в настройках окна "Инструменты разработки" в области "Инструменты разработчика Firefox по умолчанию".

+ +

Теперь Редактор будет доступен в окне "Инструменты", наряду с Инспектором, Консолью, Отладчиком и другими. Это особенно удобно в режиме раздельной консоли: например, можно использовать редактор как постоянный многострочный редактор, и консоль для взаимодесствия со страницей.

+ +

Редактирование

+ +

Окно Редактора выглядит так (на Mac OS X строка меню находится сверху экрана):

+ +

A screenshot of the Scratchpad

+ +

Меню File предлагает варианты для сохранения и загрузки фрагментов  JavaScript-кода, так что вы можете повторно использовать код позже, если захотите.

+ +

Автозавершение кода

+ +

Редактор интегрирует анализатор кода Tern,  и использует его для предоставления автодополнений и всплывающих подсказок с информацией о текущем символе. Для просмотра автодополнений нажмите Ctrl + Space.

+ +

Например, напишите d, после нажмите Ctrl + Space. Вы увидите окно с вариантами автодополнений: 

+ +

+ +

Иконка рядом с каждым вариантом указывает на тип выбираемого элемента. Здесь же по выбранному элементу отображается полезная информация. Можно выбирать разные варианты предложений клавишами and . Для утверждения и вставки слова в текст нажмите Enter or Tab.

+ +

Inline documentation

+ +

Для просмотра всплывающего окна с документацией нажмите Ctrl + Shift + Space, когда курсор на идентификаторе (Javascript). Например, если вы напишите document.addEventListener, нажмёте Ctrl + Shift + Space, то увидите всплывающее окно, которое показывает краткую информацию о синтаксисе этой функции и краткое описание:

+ +

+ +

Ссылка [документация] откроет в окне документацию MDN по элементу.

+ +

Выполнение кода

+ +
+

После того, как вы написали свой код, выделите код, который вы хотите запустить. Если вы ничего не выделите, будет запущен весь код в окне. Затем выберите способ, которым хотите запустить, с помощью одной из кнопок наверху, меню Выполнить в строке меню, или контекстного меню. Код выполняется в контексте выбранной в данный момент вкладке. Все переменные, которые вы определили вне функции, будут добавлены в глобальный объект этой вкладки.

+
+ +

Доступны четыре варианта выполнения.

+ +

Запуск

+ +

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

+ +

Исследовать

+ +

Опция Исследовать выполняет код так же, как и Запустить; однако затем открывается объект Инспектор, чтобы вы могли узнать возвращенное кодом значение.

+ +

Например, если вы введете код:

+ +
window
+
+ +

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

+ +

Inspecting an object in the Scratchpad

+ +

Отобразить

+ +

Опция «Отобразить» выполняет выделенный код, затем вставляет результат непосредственно в окно редактора в качестве комментария, так что его можно будет использовать согласно циклу REPL для дальнейшего программирования.

+ +

Перезагрузить и запустить

+ +

Опция «Перезагрузить и запустить» доступна только в меню Выполнить. Она сначала перезагружает страницу, затем выполняет код по событию страницы «load». Это полезно для выполнения кода в первоначальном окружении.

+ +

Запуск Редактора в контексте браузера

+ +

Вы можете запустить блокнот в контексте браузера в целом, а не для конкретной веб-страницы. Например, если вы работаете над самим Firefox или разработкой дополнений. Для этого поставьте галочку "Включить инструменты отладки browser chrome и дополнений" в настройках "Инструментов разработки". После этого в меню "Окружение" (в Редакторе) появится опция "Браузер"; как только это произойдет, вашей сферой станет весь браузер, а не только содержимое страницы. Ниже рассмотрен пример, где объект window доступен в любом режиме Окружения, а объект gBrowser только в режиме "Браузер" (иначе появится сообщение об ошибке):

+ +
window
+/*
+[object ChromeWindow]
+*/
+
+gBrowser
+/*
+[object XULElement]
+*/
+ +

Контекст выполнения Реактора установлен на "Браузер". Если вы открываете файл со скриптом в редакторе, и он первой строкой имеет // -sp-context: browser, то окружение автоматически переключится в режим "Браузер". Это происходит только при открытии.

+ +

+ +

Сочетания клавиш

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

Сочетания клавиш редактора исходного кода

+ +

{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}

-- cgit v1.2.3-54-g00ecf