From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../how_to/edit_css_shapes/index.html | 87 +++++++++ .../how_to/examine_and_edit_css/index.html | 195 +++++++++++++++++++++ .../how_to/examine_and_edit_html/index.html | 183 +++++++++++++++++++ .../examine_and_edit_the_box_model/index.html | 44 +++++ files/ru/tools/page_inspector/how_to/index.html | 13 ++ .../how_to/inspect_and_select_colors/index.html | 26 +++ .../how_to/otkrytie_inspektora/index.html | 19 ++ .../how_to/vybor_elementa/index.html | 29 +++ .../how_to/work_with_animations/index.html | 129 ++++++++++++++ .../index.html" | 28 +++ .../index.html" | 24 +++ files/ru/tools/page_inspector/index.html | 86 +++++++++ files/ru/tools/page_inspector/ui_tour/index.html | 96 ++++++++++ .../index.html" | 13 ++ 14 files changed, 972 insertions(+) create mode 100644 files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html create mode 100644 files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html create mode 100644 files/ru/tools/page_inspector/how_to/index.html create mode 100644 files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html create mode 100644 files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html create mode 100644 files/ru/tools/page_inspector/how_to/vybor_elementa/index.html create mode 100644 files/ru/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 "files/ru/tools/page_inspector/how_to/\320\270\321\201\321\201\320\273\320\265\320\264\320\276\320\262\320\260\321\202\321\214_event_listeners/index.html" create mode 100644 "files/ru/tools/page_inspector/how_to/\320\277\321\200\320\276\321\201\320\274\320\276\321\202\321\200_\321\210\321\200\320\270\321\204\321\202\320\276\320\262/index.html" create mode 100644 files/ru/tools/page_inspector/index.html create mode 100644 files/ru/tools/page_inspector/ui_tour/index.html create mode 100644 "files/ru/tools/page_inspector/\321\201\320\276\321\207\320\265\321\202\320\260\320\275\320\270\321\217_\320\272\320\273\320\260\320\262\320\270\321\210/index.html" (limited to 'files/ru/tools/page_inspector') diff --git a/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html new file mode 100644 index 0000000000..fb3888275d --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -0,0 +1,87 @@ +--- +title: Edit Shape Paths в CSS +slug: Tools/Page_Inspector/How_to/Edit_CSS_shapes +tags: + - Просмотр правил + - Редактор путей форм + - выделение + - инструменты + - фигуры +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes +--- +

{{ToolsSidebar}}

+ +

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

+ +

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

+ +

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

+ +

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ + + +

+ +

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

+ +

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

+ +

circle()

+ +

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

+ +

+ +

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

+ +

ellipse()

+ +

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

+ +

+ +

inset()

+ +

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

+ +

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

+ +

+ +

polygon()

+ +

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

+ + + +

+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

+ +

Rule display

+ +

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

+ +

+ + + +

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

+ +

+ +

Filtering rules

+ +

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

+ +

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

+ + + +

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

+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ + + +
+

New in Firefox 43

+
+ +

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

+ +

+ +

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

+ +

+ +

Displaying pseudo-elements

+ +

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

+ +

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

+ +

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

+ +

+ +

Clicking the triangle displays them:

+ +

+ +

Setting :hover, :active, :focus

+ +

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

+ +

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

+ +

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

+ +
+

New in Firefox 43

+
+ +

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

+ +

+ + + +

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

+ +

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

+ +

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

+ +

Get help for CSS properties

+ +

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

+ +

{{EmbedYouTube("qZRLqpJiUsI")}}

+ +

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

+ +

Overridden declarations

+ +

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

+ +
+

New in Firefox 43

+
+ +

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

+ +

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

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examine computed CSS

+ +

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

+ +

+ +

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

+ +

+ +

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

+ +

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

+ +

Edit rules

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Add rules

+ +

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

+ +

+ +

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

+ +

+ +

Copy rules

+ +

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

+ + + +

+ +

See also

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Поле поиска

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Дерево HTML

+ +

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

+ +

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

+ +

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

+ +

::before и ::after

+ +

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

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

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

+ +

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

+ +

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

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

Новое в Firefox 40

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

Новое в Firefox 40

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

Новое в Firefox 40

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

Новое в Firefox 40

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

Новое в Firefox 40

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

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +
+

Новое в Firefox 39.

+
+ +

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

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

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

+ +

+ +

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

+ +

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

+ +

+ +

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

+ +

+ +

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

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

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

+ +

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

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

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

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

+ +

{{ ListSubpages () }}

+ +

 

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

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

+ +

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ +

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

+ +

 

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

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

+ + + +

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

+ +

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

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

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

+ +

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

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

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

+ +

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

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

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

+ +

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

+ +

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

+ +

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

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

 

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

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

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

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

+ +

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ + + +

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

+ +

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

+ + + +

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

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

+ +

 

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

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

+ +

+ +

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

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

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

+ +

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

+ +

+ +

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

+ +

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

+ +

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

+ +

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

+ +

 

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

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

+ +

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

+ +
+

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

+ +

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

+ +
+

Как…

+ +

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

+ +
+
+
+
Открыть Инспектор
+
 
+
Исследовать и редактировать HTML
+
 
+
Examine and edit the box model
+
 
+
Исследовать и выбирать цвета
+
 
+
Смотреть шрифты
+
 
+
Visualize transforms
+
 
+
Использовать API Инспектора
+
 
+
+
+ +
+
+
Выбрать элемент
+
 
+
Исследовать и редактировать CSS
+
 
+
Исследовать слушатели событий
+
 
+
Работать с анимациями
+
 
+
Редактировать CSS'ные фильтры
+
 
+
Смотреть фоновые изображения (background-image)
+
 
+
Использовать Инспектор из Веб-консоли
+
+
+
+ +
+

Справка

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

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

+ +

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

+ +

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

+ +

Панель HTML

+ +

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

+ +

+ +

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

+ +

Панель CSS

+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

 

+ +

+ +

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

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

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

+ +

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

+ +

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

-- cgit v1.2.3-54-g00ecf