From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/tools/accessibility_inspector/index.html | 166 +++++++++ files/ru/tools/add-ons/dom_inspector/index.html | 57 --- files/ru/tools/add-ons/index.html | 15 - files/ru/tools/browser_console/index.html | 180 ++++++++++ .../debugger/how_to/debug_eval_sources/index.html | 36 ++ .../how_to/pretty-print_a_minified_file/index.html | 10 + .../index.html" | 36 -- .../index.html" | 10 - .../page_inspector/how_to/edit_fonts/index.html | 24 ++ .../how_to/examine_event_listeners/index.html | 28 ++ .../how_to/open_the_inspector/index.html | 19 + .../how_to/otkrytie_inspektora/index.html | 19 - .../how_to/select_an_element/index.html | 29 ++ .../how_to/vybor_elementa/index.html | 29 -- .../index.html" | 28 -- .../index.html" | 24 -- .../page_inspector/keyboard_shortcuts/index.html | 13 + .../index.html" | 13 - files/ru/tools/performance/index.html | 95 +++++ files/ru/tools/performance/waterfall/index.html | 386 +++++++++++++++++++++ files/ru/tools/profiler/index.html | 169 --------- files/ru/tools/release_notes/index.html | 128 ------- files/ru/tools/responsive_design_mode/index.html | 100 ++++++ files/ru/tools/responsive_design_view/index.html | 100 ------ files/ru/tools/rulers/index.html | 24 ++ .../web_console/opening_the_web_console/index.html | 23 -- files/ru/tools/web_console/ui_tour/index.html | 23 ++ .../index.html" | 166 --------- .../index.html" | 180 ---------- .../index.html" | 24 -- .../index.html" | 95 ----- .../waterfall/index.html" | 386 --------------------- 32 files changed, 1133 insertions(+), 1502 deletions(-) create mode 100644 files/ru/tools/accessibility_inspector/index.html delete mode 100644 files/ru/tools/add-ons/dom_inspector/index.html delete mode 100644 files/ru/tools/add-ons/index.html create mode 100644 files/ru/tools/browser_console/index.html create mode 100644 files/ru/tools/debugger/how_to/debug_eval_sources/index.html create mode 100644 files/ru/tools/debugger/how_to/pretty-print_a_minified_file/index.html delete 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" delete 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/page_inspector/how_to/edit_fonts/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html create mode 100644 files/ru/tools/page_inspector/how_to/open_the_inspector/index.html delete mode 100644 files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html create mode 100644 files/ru/tools/page_inspector/how_to/select_an_element/index.html delete mode 100644 files/ru/tools/page_inspector/how_to/vybor_elementa/index.html delete 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" delete 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/keyboard_shortcuts/index.html delete 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/performance/index.html create mode 100644 files/ru/tools/performance/waterfall/index.html delete mode 100644 files/ru/tools/profiler/index.html delete mode 100644 files/ru/tools/release_notes/index.html create mode 100644 files/ru/tools/responsive_design_mode/index.html delete mode 100644 files/ru/tools/responsive_design_view/index.html create mode 100644 files/ru/tools/rulers/index.html delete mode 100644 files/ru/tools/web_console/opening_the_web_console/index.html create mode 100644 files/ru/tools/web_console/ui_tour/index.html delete 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" delete 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" delete mode 100644 "files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" delete 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" delete 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" (limited to 'files/ru/tools') diff --git a/files/ru/tools/accessibility_inspector/index.html b/files/ru/tools/accessibility_inspector/index.html new file mode 100644 index 0000000000..a375a027ae --- /dev/null +++ b/files/ru/tools/accessibility_inspector/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/add-ons/dom_inspector/index.html b/files/ru/tools/add-ons/dom_inspector/index.html deleted file mode 100644 index 0e2c41dc29..0000000000 --- a/files/ru/tools/add-ons/dom_inspector/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -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 deleted file mode 100644 index ab408aeb18..0000000000 --- a/files/ru/tools/add-ons/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -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/browser_console/index.html b/files/ru/tools/browser_console/index.html new file mode 100644 index 0000000000..487bc2eb5e --- /dev/null +++ b/files/ru/tools/browser_console/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. +
  2. с клавиатуры: нажать Ctrl+Shift+J (или Cmd+Shift+J на Mac).
    3. +
+ +

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/debugger/how_to/debug_eval_sources/index.html b/files/ru/tools/debugger/how_to/debug_eval_sources/index.html new file mode 100644 index 0000000000..29224f2590 --- /dev/null +++ b/files/ru/tools/debugger/how_to/debug_eval_sources/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/pretty-print_a_minified_file/index.html b/files/ru/tools/debugger/how_to/pretty-print_a_minified_file/index.html new file mode 100644 index 0000000000..e224f9d591 --- /dev/null +++ b/files/ru/tools/debugger/how_to/pretty-print_a_minified_file/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/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" deleted file mode 100644 index 29224f2590..0000000000 --- "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" +++ /dev/null @@ -1,36 +0,0 @@ ---- -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" deleted file mode 100644 index e224f9d591..0000000000 --- "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" +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Работа с минифицированным кодом -slug: Tools/Debugger/How_to/Работа_с_минифицированным_кодом -translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file ---- -
{{ToolsSidebar}}

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

- -

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

- -

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

diff --git a/files/ru/tools/page_inspector/how_to/edit_fonts/index.html b/files/ru/tools/page_inspector/how_to/edit_fonts/index.html new file mode 100644 index 0000000000..24b490e3d3 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/edit_fonts/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/how_to/examine_event_listeners/index.html b/files/ru/tools/page_inspector/how_to/examine_event_listeners/index.html new file mode 100644 index 0000000000..c5ea101f0b --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_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/open_the_inspector/index.html b/files/ru/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..a4e0927d76 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/open_the_inspector/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/otkrytie_inspektora/index.html b/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html deleted file mode 100644 index a4e0927d76..0000000000 --- a/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -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/select_an_element/index.html b/files/ru/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..16db872b70 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/select_an_element/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/vybor_elementa/index.html b/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html deleted file mode 100644 index 16db872b70..0000000000 --- a/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -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/\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" deleted file mode 100644 index c5ea101f0b..0000000000 --- "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" +++ /dev/null @@ -1,28 +0,0 @@ ---- -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" deleted file mode 100644 index 24b490e3d3..0000000000 --- "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" +++ /dev/null @@ -1,24 +0,0 @@ ---- -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/keyboard_shortcuts/index.html b/files/ru/tools/page_inspector/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..ae162ef628 --- /dev/null +++ b/files/ru/tools/page_inspector/keyboard_shortcuts/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/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" deleted file mode 100644 index ae162ef628..0000000000 --- "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" +++ /dev/null @@ -1,13 +0,0 @@ ---- -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/performance/index.html b/files/ru/tools/performance/index.html new file mode 100644 index 0000000000..ba11369101 --- /dev/null +++ b/files/ru/tools/performance/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/performance/waterfall/index.html b/files/ru/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..1531a44a10 --- /dev/null +++ b/files/ru/tools/performance/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. +
  2. Recalculate Style: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.
    3. +
  3. 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".
    4. +
  4. 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".
    5. +
+ +

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/profiler/index.html b/files/ru/tools/profiler/index.html deleted file mode 100644 index 10e4254907..0000000000 --- a/files/ru/tools/profiler/index.html +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Профилирование JavaScript -slug: Tools/Profiler -tags: - - Firefox - - Отладка - - Профайлер - - Профилирование - - Руководство - - инструменты -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -
{{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 deleted file mode 100644 index ba7f7887f2..0000000000 --- a/files/ru/tools/release_notes/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: Замечания к релизу -slug: Tools/Release_notes -translation_of: Mozilla/Firefox/Releases -translation_of_original: Tools/Release_notes ---- -
{{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/responsive_design_mode/index.html b/files/ru/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..e5acc43af0 --- /dev/null +++ b/files/ru/tools/responsive_design_mode/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/responsive_design_view/index.html b/files/ru/tools/responsive_design_view/index.html deleted file mode 100644 index e5acc43af0..0000000000 --- a/files/ru/tools/responsive_design_view/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -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/rulers/index.html b/files/ru/tools/rulers/index.html new file mode 100644 index 0000000000..c8d17fffac --- /dev/null +++ b/files/ru/tools/rulers/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/web_console/opening_the_web_console/index.html b/files/ru/tools/web_console/opening_the_web_console/index.html deleted file mode 100644 index 41f3e760cc..0000000000 --- a/files/ru/tools/web_console/opening_the_web_console/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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/ui_tour/index.html b/files/ru/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..41f3e760cc --- /dev/null +++ b/files/ru/tools/web_console/ui_tour/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/\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" deleted file mode 100644 index a375a027ae..0000000000 --- "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" +++ /dev/null @@ -1,166 +0,0 @@ ---- -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" deleted file mode 100644 index 487bc2eb5e..0000000000 --- "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" +++ /dev/null @@ -1,180 +0,0 @@ ---- -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. -
  2. с клавиатуры: нажать Ctrl+Shift+J (или Cmd+Shift+J на Mac).
    3. -
- -

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" deleted file mode 100644 index c8d17fffac..0000000000 --- "a/files/ru/tools/\320\273\320\270\320\275\320\265\320\271\320\272\320\270/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -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" deleted file mode 100644 index ba11369101..0000000000 --- "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" +++ /dev/null @@ -1,95 +0,0 @@ ---- -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" deleted file mode 100644 index 1531a44a10..0000000000 --- "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" +++ /dev/null @@ -1,386 +0,0 @@ ---- -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. -
  2. Recalculate Style: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.
    3. -
  3. 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".
    4. -
  4. 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".
    5. -
- -

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:

- -

- -

 

-- cgit v1.2.3-54-g00ecf