initial commit

14 files changed, 972 insertions, 0 deletions

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
+---
+<p>{{ToolsSidebar}}</p>
+
+<p class="summary">The Shape Path Editor - <span id="result_box" lang="ru"><span>это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью {{cssxref ("clip-path")}}, а также свойство CSS {{cssxref ("shape-outside")}} и {{cssxref ("&lt;basic-shape&gt;")}}. В этом руководстве вы найдете все доступные варианты.</span></span></p>
+
+<h2 id="Активация_деактивация_Shape_Path_Editor">Активация / деактивация Shape Path Editor</h2>
+
+<p>The Shape Path Editor <span id="result_box" lang="ru"><span>доступен через панель правил CSS, которую можно открыть, как описано в руководстве</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Opening the Inspector</a>. <span id="result_box" lang="ru"><span>После того как вы выбрали свой элемент, вы увидите значок формы рядом с любым допустимым значением, например</span></span> <span id="result_box" lang="ru"><span>один для</span></span> <code>shape-outside</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15915/enable-shapes-editor.png" style="border-style: solid; border-width: 1px; height: 370px; width: 1836px;"></p>
+
+<p><span id="result_box" lang="ru"><span>Щелчок по иконке заставит Редактор выделить фигуру.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15916/circle.png" style="height: 686px; width: 1210px;"></p>
+
+<p><span id="result_box" lang="ru"><span>Чтобы отключить </span></span>Shape Path Editor<span lang="ru"><span>, щелкните по иконке еще раз или выберите другой элемент или другой редактор.</span> <span>Обратите внимание, что </span></span>Shape Path Editor<span lang="ru"><span> не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.</span></span></p>
+
+<h2 id="Понимание_строк_нарисованных_редактором"><span class="short_text" id="result_box" lang="ru"><span>Понимание строк, нарисованных редактором</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.</span></span></p>
+
+<ul>
+ <li><strong>Сплошная линия</strong><span lang="ru"><span> показывает контур фигуры, которая обертывает текст.</span> <span>Это ваша форма.</span> <span>Если форма обрезается по </span></span>margin box<span lang="ru"><span>, то </span></span>margin box<span lang="ru"><span> будет составлять часть этой строки.</span></span></li>
+ <li><span id="result_box" lang="ru"><span><strong>Пунктирная линия</strong> демонстрирует контур формы, которая проходит мимо ссылки </span></span>margin box<span lang="ru"><span>;</span></span> <span id="result_box" lang="ru"><span>это область, которая будет обрезана по </span></span>margin box. <span id="result_box" lang="ru"><span>Чтобы понять </span></span>margin box<span lang="ru"><span> и другие поля, используемые формулой CSS, см.</span></span> <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">Shapes from box values</a>.</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p>
+
+<h2 id="Редактирование_основных_фигур"><span class="short_text" id="result_box" lang="ru"><span>Редактирование основных фигур</span></span></h2>
+
+<p><span id="result_box" lang="ru"><span>Параметры, предоставленные вам инструментом, будут различаться в зависимости от типа базовой формы, которую вы редактируете.</span></span> <span id="result_box" lang="ru"><span>Доступ к параметрам можно получить, активировав </span></span>Shape Path Editor<span lang="ru"><span> с помощью обычного щелчка по иконке, и вы можете использовать контекстное меню</span></span> (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + щелчёк) <span id="result_box" lang="ru"><span>для доступа к дополнительным функциям.</span></span></p>
+
+<h3 id="circle()">circle()</h3>
+
+<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>circle()</code>, значит <span id="result_box" lang="ru"><span>вы создаете </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">circle basic shape</a>. <span id="result_box" lang="ru"><span>При нажатии на иконку формы рядом со значением</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр.</span></span> <span id="result_box" lang="ru"><span>Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p>
+
+<p><span id="result_box" lang="ru"><span>В панели правил вы можете увидеть значения для</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>при изменении формы.</span> <span>Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, измененный путь формы.</span></span></p>
+
+<h3 id="ellipse()">ellipse()</h3>
+
+<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> равно <code>ellipse()</code><span id="result_box" lang="ru"><span>, значит вы используете </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse()">ellipse basic shape</a>. <span id="result_box" lang="ru"><span>Значение</span></span> <code>ellipse()</code> <span id="result_box" lang="ru"><span>работает так же, как</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>в </span></span>Shape Path Editor. <span id="result_box" lang="ru"><span>Эллипс представляет собой сжатый круг и, следовательно, имеет возможность изменять размер по горизонтали и вертикали, когда вы нажимаете на значок фигур.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15920/ellipse.png" style="height: 570px; width: 1216px;"></p>
+
+<h3 id="inset()">inset()</h3>
+
+<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> равно <code>inset()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset()">inset basic shape</a>, <span id="result_box" lang="ru"><span>которая позволяет создавать значения смещения, вытягивая содержимое из </span></span>margin box.</p>
+
+<p><span id="result_box" lang="ru"><span>Каждая сторона прямоугольника может быть нацелена после нажатия на значок формы, чтобы активировать </span></span> Shape Path Editor<span lang="ru"><span>, и перетаскивание каждой стороны будет обновлять значения для </span></span> top, right, bottom, и left <span lang="ru"><span> смещяя значения.</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15923/inset.png" style="height: 606px; width: 1214px;"></p>
+
+<h3 id="polygon()">polygon()</h3>
+
+<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>polygon()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">polygon basic shape</a>. <span id="result_box" lang="ru"><span>Это самый сложный из основных значений формы, поэтому инструмент дает вам больше возможностей при их редактировании:</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>Нажатие на значок формы активирует </span></span> Shapes Path Editor <span lang="ru"><span> и дает вам возможность перемещать любую из точек вашей фигуры многоугольника.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Дважды щелкните в любом месте линии формы, и вы получите новую точку для настройки.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Дважды щелкните по существующей точке, и она будет удалена.</span></span> <em>Помните, что многоугольник должен содержать не менее трех точек.</em></li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15918/polygon-edit.png" style="height: 660px; width: 1260px;"></p>
+
+<h3 id="Перемещение_и_масштабирование_фигур"><span class="short_text" id="result_box" lang="ru"><span>Перемещение и масштабирование фигур</span></span></h3>
+
+<p><span id="result_box" lang="ru"><span>Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмете</span></span> <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <span id="result_box" lang="ru"><span>щелчек на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее.</span></span> <span id="result_box" lang="ru"><span>Еще раз, произойдет отсечение, если вы превысите границы</span></span> margin box.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15924/scaled-circle.png"></p>
+
+<p>Если ваша форма является многоугольником, вы также получаете возможность вращать ее вокруг оси.</p>
+
+<h2 id="Поддержка_браузера"><span class="short_text" id="result_box" lang="ru"><span>Поддержка браузера</span></span></h2>
+
+<p>The Shape Path Editor<span id="result_box" lang="ru"><span> в настоящее время работает для форм, сгенерированных с помощью {{cssxref ("clip-path")}};</span></span> <span id="result_box" lang="ru"><span>он также будет работать для форм, созданных с помощью {{cssxref ("shape-outside")}} с Firefox 62.</span></span></p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<p>Просмотр и редактирование CSS в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">панели CSS</a> Инспектора.</p>
+
+<h2 id="Просмотр_CSS_правил">Просмотр CSS правил</h2>
+
+<p>На панели <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules(Правила)</a> отображаются все правила, применяемые к выбранному элементу, в порядке приоритета сверху-вниз:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>В списке правил так же будут отображены и стили браузера <a href="/en-US/docs/Web/CSS/Cascade">(user-agent styles)</a>, если данная опция выставлена в настройках панели разработчика <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">(developer tool settings)</a>. Заметьте, эта опция не зависит от опции "Browser styles" вкладки <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</p>
+
+<p>Начиная с Firefox 44 и выше, на панеле Rules отображаются все авторские стили, включая те, которые не поддерживаются или содержат ошибки. Это может помочь вам понять, почему определенные стили не применяются:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Rule_display">Rule display</h3>
+
+<p> It displays each rule as in a stylesheet, with a list of selectors followed by a list of <code>property:value;</code> declarations.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p>
+
+<ul>
+ <li><em>Highlight matched elements</em>: иконка цели сразу за селектором: кликнув по ней подсветятся все DOM-узлы на странице, совпадающие с этим селектором.</li>
+ <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Show cascade</em>: next to overridden declarations is a magnifying glass: click this to see the cascade of rules containing the overridden property. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li>
+ <li><em>Enable/disable</em>: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.</li>
+ <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link to CSS file</a>.</li>
+</ul>
+
+<p>User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix <code>(user agent)</code>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p>
+
+<h3 id="Filtering_rules">Filtering rules</h3>
+
+<p>Начиная с Firefox 40, это поле вверху вкладки Ruels подписан как "Filter Styles":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Как только вы что-нибудь напечатаете:</p>
+
+<ul>
+ <li>все правила, которые не содержат напечатанную строку, будут скрыты.</li>
+ <li>все объявления, которые содержат напечатанную строку, подсветятся</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Нажмите на "X" в конце поискового поля для сброса фильтра.</p>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Strict_search">Strict search</h4>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 43</p>
+</div>
+
+<p>По умолчанию, блок поиска подсвечивает все объявления, которые содержат любую часть строки. К примеру, для "color" подсветятся объявления, содержащие <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> и <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>, а также просто <code><a href="/en-US/docs/Web/CSS/color">color</a></code>.:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Starting in Firefox 43, if you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h3 id="Displaying_pseudo-elements">Displaying pseudo-elements</h3>
+
+<p>From Firefox 41, the Rule view displays the following <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, if they are applied to the selected element:</p>
+
+<p><code>:after<br>
+ :before<br>
+ :first-letter<br>
+ :first-line<br>
+ :selection<br>
+ :-moz-color-swatch<br>
+ :-moz-number-spin-box<br>
+ :-moz-number-spin-down<br>
+ :-moz-number-spin-up<br>
+ :-moz-number-text<br>
+ :-moz-number-wrapper<br>
+ :-moz-placeholder<br>
+ :-moz-progress-bar<br>
+ :-moz-range-progress<br>
+ :-moz-range-thumb<br>
+ :-moz-range-track<br>
+ :-moz-selection</code></p>
+
+<p>If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p>
+
+<p>Clicking the triangle displays them:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3>
+
+<p>From Firefox 41, there's a new button to the right of the filter box:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">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 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">popup menu in the HTML view</a>.</p>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 43</p>
+</div>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<h3 id="Link_to_CSS_file">Link to CSS file</h3>
+
+<p>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 <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p>
+
+<p>From Firefox 41 you can copy the location of the source file: right-click the link and select "Copy Location".</p>
+
+<p>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 <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p>
+
+<h3 id="Get_help_for_CSS_properties">Get help for CSS properties</h3>
+
+<p>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:</p>
+
+<p>{{EmbedYouTube("qZRLqpJiUsI")}}</p>
+
+<p>Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.</p>
+
+<h3 id="Overridden_declarations">Overridden declarations</h3>
+
+<p>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.</p>
+
+<div class="geckoVersionNote">
+<p>New in Firefox 43</p>
+</div>
+
+<p>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.</p>
+
+<p>This makes it easy to see which rule is overriding the declaration:</p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examine_computed_CSS">Examine computed CSS</h2>
+
+<p>To see the complete computed CSS for the selected element, switch to the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Computed view</a>. This shows the calculated value that each CSS property has for the selected element:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p>
+
+<p>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.</p>
+
+<h2 id="Edit_rules">Edit rules</h2>
+
+<p>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.</p>
+
+<p>Any changes you make are temporary: reloading the page will restore the original styling.</p>
+
+<p>You can use the arrow keys to increase/decrease numeric rules while editing. The <kbd>Up</kbd> arrow will turn "1px" to 2px, and <kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> will increment by 10. <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> change values by 0.1, and <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> will add or subtract 100 from the value.</p>
+
+<p>From Firefox 44, edits that you make in the Rules view are reflected in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, and vice versa.</p>
+
+<h2 id="Add_rules">Add rules</h2>
+
+<p>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.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<p>Starting in Firefox 41, there's a button that enables you to do the same thing:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p>
+
+<h2 id="Copy_rules">Copy rules</h2>
+
+<p>Starting in Firefox 41, there are extra context menu items in the Rules view to copy rules, and pieces of rules, to the clipboard:</p>
+
+<ul>
+ <li>Copy Rule</li>
+ <li>Copy Selector</li>
+ <li>Copy Property Declaration</li>
+ <li>Copy Property Name</li>
+ <li>Copy Property Value</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p>
+
+<h2 id="See_also">See also</h2>
+
+<p>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 <a href="/en-US/docs/Tools/Page_Inspector">how to guides</a>.</p>
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
+---
+<div>{{ToolsSidebar}}</div><p>Исследовать и редактировать HTML-код страницы можно в <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">панели HTML</a>.</p>
+
+<h2 id="Навигация_по_HTML-коду">Навигация по HTML-коду</h2>
+
+<p>Вверху панели HTML находится панель инструментов, состоящая из <a href="https://ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D1%86%D0%B5%D0%BF%D0%BE%D1%87%D0%BA%D0%B0">навигационной цепочки</a> и поля поиска.</p>
+
+<h3 id="Навигационная_цепочка_для_HTML-кода">Навигационная цепочка для HTML-кода</h3>
+
+<p>Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10813/inspector-breadcrumbs.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;"> Нажатие и удержание левой кнопки мыши на одном из элементов навигационной панели вызывает меню, позволяющее выбрать какой-либо из сиблингов этого элемента.  Кнопки со стрелками на левом и правом концах панели цепочки прокручивают цепочку, если она длиннее доступного пространства.</p>
+
+<p>С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.</p>
+
+<h3 id="Поле_поиска">Поле поиска</h3>
+
+<p>Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидете подсказку с результатами поиска.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10811/inspector-search-annotated.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 736px;">Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.</p>
+
+<p>Можно искать тег, или ввести любую другую <a href="/ru/docs/Glossary/CSS_Selector">строку селекторов CSS</a>, так что можно найти элемент с ID <code>myId</code>, введя строку <code>#myId</code>.</p>
+
+<p>Начиная с Firefox 40, можно искать по атрибутам class или id без учёта формата селекторов CSS, так что для поиска соответствующего элемента достаточно ввести просто <code>myId</code>.</p>
+
+<h3 id="Дерево_HTML">Дерево HTML</h3>
+
+<p>Остальная часть панели показывает HTML-код страницы в виде дерева.  Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел.  Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8541/inspector-html-tree.png" style="display: block; margin-left: auto; margin-right: auto;">Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.</p>
+
+<p>Узлы, скрытые с помощью <a href="/ru/docs/Web/CSS/display">display:none</a>, показываются бледнее (как и совсем не отображаемые узлы, например <a href="/ru/docs/Web/HTML/Element/head">&lt;head&gt;</a>).</p>
+
+<h3 id="before_и_after">::before и ::after</h3>
+
+<p>Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью <a href="/ru/docs/Web/CSS/::before"><code>::before</code></a> и <a href="/ru/docs/Web/CSS/::after"><code>::after</code></a>:</p>
+
+<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p>
+
+<h2 id="Контекстное_меню_элемента">Контекстное меню элемента</h2>
+
+<p>Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10541/inspector-popup-ru.png" style="display: block; height: 411px; margin-left: auto; margin-right: auto; width: 678px;">Меню содержит следующие пункты:</p>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;">Править как HTML</td>
+   <td><a href="#Editing_HTML">HTML-код элемента</a></td>
+  </tr>
+  <tr>
+   <td>Копировать внутренний HTML</td>
+   <td>Скопировать innerHTML элемента</td>
+  </tr>
+  <tr>
+   <td>Копировать внешний HTML</td>
+   <td>Скопировать outerHTML элемента</td>
+  </tr>
+  <tr>
+   <td>Копировать уникальный селектор</td>
+   <td>Скопировать CSS-селектор, выбирающий этот и только этот элемент.</td>
+  </tr>
+  <tr>
+   <td>Копировать URL данных изображения</td>
+   <td>Скопировать изображение в формате data:// URL, если выбранный элемент изображение.</td>
+  </tr>
+  <tr>
+   <td>Показать свойства DOM</td>
+   <td>Открыть <a href="/ru/docs/Tools/Web_Console#The_split_console">split console</a> и ввести туда команду «<code>inspect($0)»</code>, чтобы <a href="/ru/docs/Tools/Web_Console#Inspecting_objects">исследовать</a> текущий выбранный элемент.</td>
+  </tr>
+  <tr>
+   <td>Вставить внутренний HTML</td>
+   <td>Вставить содержимое буфера в узел в качестве его <a href="/ru/docs/Web/API/element.innerHTML">innerHTML</a>.</td>
+  </tr>
+  <tr>
+   <td>Вставить внешний HTML</td>
+   <td>Вставить содержимое буфера в узел в качестве его <a href="/ru/docs/Web/API/element.outerHTML">outerHTML</a>.</td>
+  </tr>
+  <tr>
+   <td>Вставить/Перед</td>
+   <td>Вставить содержимое буфера в документ прямо перед этим узлом.</td>
+  </tr>
+  <tr>
+   <td>Вставить/После</td>
+   <td>Вставить содержимое буфера в документ прямо после этого узла.</td>
+  </tr>
+  <tr>
+   <td>Вставить/Как первого потомка</td>
+   <td>Вставить содержимое буфера в документ в качестве первого дочернего элемента этого узла.</td>
+  </tr>
+  <tr>
+   <td>Вставить/Как последнего потомка</td>
+   <td>Вставить содержимое буфера в документ в качестве последнего дочернего элемента этого узла.</td>
+  </tr>
+  <tr>
+   <td>Прокрутить в вид</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Новое в Firefox 40</p>
+    </div>
+    Прокручивает веб-страницу, чтобы был виден выбранный узел.</td>
+  </tr>
+  <tr>
+   <td>Удалить узел</td>
+   <td>Удалить элемент</td>
+  </tr>
+  <tr>
+   <td>Открыть ссылку в новой вкладке</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Новое в Firefox 40</p>
+    </div>
+    (только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.</td>
+  </tr>
+  <tr>
+   <td>Открыть файл в Отладчике</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Новое в Firefox 40</p>
+    </div>
+    (только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.</td>
+  </tr>
+  <tr>
+   <td>Открыть файл в Редакторе стилей</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Новое в Firefox 40</p>
+    </div>
+    (только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.</td>
+  </tr>
+  <tr>
+   <td>Копировать адрес ссылки</td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Новое в Firefox 40</p>
+    </div>
+    (только в меню для URL) Скопировать URL.</td>
+  </tr>
+  <tr>
+   <td>:hover</td>
+   <td>Установить CSS’ный псевдо-класс CSS <a href="/ru/docs/Web/CSS/:hover" title="/ru/docs/Web/CSS/:hover">:hover</a></td>
+  </tr>
+  <tr>
+   <td>:active</td>
+   <td>Установить CSS’ный псевдо-класс <a href="/ru/docs/Web/CSS/:active" title="/ru/docs/Web/CSS/:active">:active</a></td>
+  </tr>
+  <tr>
+   <td>:focus</td>
+   <td>Установить CSS’ный псевдо-класс <a href="/ru/docs/Web/CSS/:focus" title="/ru/docs/Web/CSS/:focus">:focus</a></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Редактирование_HTML"><a name="Editing_HTML">Редактирование HTML</a></h2>
+
+<p>Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо в панели HTML: сделайте двойной щелчок по тексту, который Вы хотите изменить, измените его, нажмите Enter, — и изменения сразу же будут применены.</p>
+
+<p>Чтобы редактировать <a href="/ru/docs/Web/API/Element.outerHTML">outerHTML</a> элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:</p>
+
+<p><img alt="скриншот Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10545/inspector-editHTML-ru-mc20150426.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 749px;">Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.</p>
+
+<h3 id="Копирование_и_вставка">Копирование и вставка</h3>
+
+<p>Используя <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">контекстное меню</a>, можно копировать узлы в дереве HTML и потом вставлять их.</p>
+
+<h3 id="Drag_and_drop" name="Drag_and_drop">Перетаскивание</h3>
+
+<div class="geckoVersionNote">
+<p>Новое в Firefox 39.</p>
+</div>
+
+<p>С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:</p>
+
+<p>{{EmbedYouTube("oI-a035nfWk")}}</p>
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
+---
+<div>{{ToolsSidebar}}</div>
+
+<h2 id="Просмотр_Блоковой_модели">Просмотр Блоковой модели</h2>
+
+<p>Если использовать инструмент <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Кнопка выбора элемента" </a>и навести на элемент на странице, вы увидите <a href="/ru/docs/Web/CSS/box_model">блоковую модель</a> этого элемента, которая появится поверх него:</p>
+
+<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>
+
+<p>Также, если вы наведёте на элемент в  <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">панели HTML</a>, то поверх него появится <a href="/ru/docs/Web/CSS/box_model">блоковая модель</a>:</p>
+
+<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>
+
+<p>С  39той версии Firefox  строковые элементы разделяются на несколько строк-блоков, подсветка показывает каждую линию в индивидуальной строке-блоке:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p>
+
+<h3 id="Вкладка_блоковой_модели">Вкладка блоковой модели</h3>
+
+<p>Когда элемент выбран, вы сможете получить его блоковую модель во <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">вкладке блоковой модели</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10875/box-model-view.png" style="display: block; height: 330px; margin-left: auto; margin-right: auto; width: 515px;"></p>
+
+<p>С 40й версии Firefox если навести на значение можно увидить подсказку из какого правила оно приходит:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10877/box-model-view-tooltip.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 630px;"></p>
+
+<p>Если в этой вкладке навести на часть блоковой модели, то эта часть подсветится на странице:</p>
+
+<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p>
+
+<h2 id="Изменение_блоковой_модели">Изменение блоковой модели</h2>
+
+<p>Вы также можете изменять значения во <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">вкладке блоковой модели</a>, изменения мгновенно отобразятся на странице:</p>
+
+<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p>
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
+---
+<div>{{ToolsSidebar}}</div><p><span id="result_box" lang="ru"><span>Ссылки для</span> <span>различных</span> <span>КАК</span> <span>можно найти</span> <span>здесь.</span> <span>Эти ссылки</span> <span>описывают</span> <span>подробно</span> <span>Практические</span> <span>методы</span><span>.</span></span></p>
+
+<p>{{ ListSubpages () }}</p>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div><p>В <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view">view «Правила»</a> панели CSS, если правило содержит цветовое значение, рядом со значением показывается пример соответствующего цвета:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p>
+
+<p>Если щёлкнуть по примеру цвета, появится инструмент выбора цвета, позволяющий изменить цвет:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>Инструмент выбора цвета включает значок пипетки: щёлкнув по этому значку, можно использовать пипетку для взятия нового цвета для элемента со страницы:</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo", "16:9")}}</p>
+
+<p>Начиная с Firefox 40, для изменения формата отображения цвета надо, удерживая кнопку Shift, щёлчкнуть на образце цвета кнопкой мыши.</p>
+
+<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div><p>Есть два основных способа открытия Инспектора:</p>
+
+<ul>
+ <li><em>без выбора элемента</em>: выберите пункт «Инспектор» в меню «Разработка» или «Веб-разработка», или нажмите соответствующее <a href="https://developer.mozilla.org/ru/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">клавиатурное сокращение</a>.</li>
+ <li><em>с выбранным элементом</em>: щёлкните правой кнопкой мыши элемент на веб-странице и выберите «Исследовать элемент».</li>
+</ul>
+
+<p>Инспектор появится в нижней части окна браузера:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="width: 845px; display: block; margin-left: auto; margin-right: auto;">Чтобы начать первые шаги по Инспектору, см. <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">UI tour</a>.</p>
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
+---
+<div>{{ToolsSidebar}}</div><p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>
+
+<p>Если Вы <a href="/ru/docs/Tools/Page_Inspector/How_to/Otkrytie_Inspektora">открыли Инспектор</a> нажатием на «Исследовать элемент», элемент уже будет выбран.</p>
+
+<p>В противном случае, когда вы будете перемещать мышь по странице, элемент под курсором мыши будет подсвечиваться, а подсказка будет содержать его HTML-тег, атрибуты class и/или ID, а также размер.  Одновременно в левой панели Инспектора появится HTML-код элемента в его контексте:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8311/inspector-open.png" style="display: block; margin-left: auto; margin-right: auto;">С версии Firefox 39 можно использовать клавиши со стрелками для перехода между выбранными элементами:</p>
+
+<ul>
+ <li>Налево: подсветить элемент родительский текущему.</li>
+ <li>Направо: подсветить элемент дочерний текущему, или (если у текущего нет дочерних) следующий элемент одного родителя с текущим, или (если и сиблингов/сестринских нет) следующий узел в дереве.</li>
+</ul>
+
+<p>Это особенно полезно когда элемент и его родитель отображаются на одном и том же пространстве экрана, так что трудно выбрать один из них мышью.</p>
+
+<p>Нажатие на подсвеченный элемент выбирает его.  Когда элемент выбран, в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML pane</a> [en] в левой части Инспектора подсвечивается его разметка, а в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS pane</a> [en] в правой части Инспектора выводится информация о его стилях:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/8313/inspector-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Есть два способа выбрать другой элемент: или щёлкните его разметку в HTML pane, или нажмите <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a> [en], а потом щёлкните по элементу на веб-странице.</p>
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
+---
+<div>{{ToolsSidebar}}</div><h2 id="Редактор_ключевых_кадров">Редактор @ключевых кадров</h2>
+
+<p>Любые <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> <span id="result_box" lang="ru"><span>связанные</span> <span>с выбранным</span> <span>элементом</span> <span>отображаются</span> <span>в виде</span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> и редактируются:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Функция_изменения_строки">Функция изменения строки</h2>
+
+<p>Когда вы <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> вы можете задать <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: <span id="result_box" lang="ru"><span>это</span> <span>определяет скорость</span><span>, с которой анимация</span> <span>прогрессирует</span><span>.</span> <span>Один из способов</span> <span>определить функцию</span> <span>является синхронизация</span> <span>с кубической</span> <span>кривой Безье</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Временные</span> <span>функции</span><span>, определенные как</span> <span>кубические</span> <span>кривые</span> <span>Безье</span> <span>получают</span> <span>значок</span> <span>в правилах</span> <span>просмотра.</span> <span>При нажатии на</span> <span>иконку</span> <span>вы получаете</span> <span>визуальный редактор для</span> <span>кривой</span><span>, что позволяет</span> <span>перетащить</span></span> <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, и увидеть результат на странице:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<div id="gt-src-tools">
+<div id="tts_button"><span class="short_text" id="result_box" lang="ru"><span>Эта функция использует</span> <span>открытый</span> <span>исходный код</span></span><a href="http://cubic-bezier.com"> Lea Verou’s cubic-bezier.com</a>.</div>
+</div>
+
+<p> </p>
+
+<p><span id="result_box" lang="ru"><span>Кубический</span> <span>редактор</span> <span>Безье</span> <span>включает в себя ряд</span> <span>предварительных настроек</span><span>, сгруппированных</span> <span>в разделе</span></span> "Ease-in", "Ease-out", и "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
+
+<h2 id="Инспектор_Анимации">Инспектор Анимации</h2>
+
+<div class="note">
+<p><span id="result_box" lang="ru"><span>Хотя этот инструмент</span> <span>был введен в</span> <span>Firefox</span> <span>41</span><span>,</span> <span>его</span> <span>пользовательский интерфейс</span> <span>был</span> <span>переделан</span> <span>в</span> <span>Firefox</span> <span>43.</span> <span>В данной статье описывается</span> <span>инспектор анимации</span><span> появившийся в</span> <span>Firefox</span> <span>43 и</span> <span>последующих выпусках.</span> <span>Если вы</span> <span>хотите увидеть, как</span> <span>инспектор анимации</span> <span>выглядит в</span> <span>Firefox</span> <span>41 и 42</span> <span>см</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p>
+</div>
+
+<p>Из Firefox 41, Инспектор страниц включил в себя <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">extra view labeled "Animations"</a>.</p>
+
+<p> Этот вид <span id="result_box" lang="ru"><span>отображает как</span> <span>CSS</span> <span>переходы и</span> <span>CSS</span> <span>анимации</span> <span>синхронизированы</span> <span>по</span> <span>шкале времени</span><span>,</span> <span>перетаскивая</span> <span>виджет вы</span> <span>можете использовать для</span> <span>перемещения любую точку</span> <span>на временной шкале</span> <span>и увидеть</span> <span>страницу</span> <span>в этой точке.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Чтобы увидеть, как</span> <span>это работает,</span> <span>мы</span> <span>разберем пример</span><span>.</span> <span>Раздел данный ниже</span> <span>содержит три</span> серые <span>иконоки</span><span>,</span> <span>каждая из которых представляет</span> <span>разные</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. <span id="result_box" lang="ru"><span>Если щелкнуть</span> <span>значок</span><span>, он</span> <span>увеличивается</span> <span>измененяя</span> <span>цвет</span><span>,</span> <span>и</span> <span>на экране отображается название</span> <span>канала</span><span>.</span> <span>Нажмите на</span> <span>значок еще раз</span><span>, чтобы изменить</span> <span>эффект</span><span>.</span> <span>Эти анимации</span> <span>сделаны</span> <span>путем применения</span> <span>переходов</span> <span>к нескольким</span> <span>свойствам</span> <span>CSS</span><span>.</span></span></p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
+
+<p><span id="result_box" lang="ru"><span>Давайте использовать</span> <span>инспектор анимации</span><span>, чтобы увидеть</span><span>, что происходит на данном</span><span> примере</span><span>.</span></span></p>
+
+<ul>
+ <li><span id="result_box" lang="ru"><span>Используйте Firefox</span> <span>43</span> <span>или более позднюю версию</span><span>,</span> <span>щелкните правой кнопкой мыши</span> <span>один из значков</span> <span>и выберите пункт "</span><span>Проверить</span> <span>элемент"</span><span>.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Вы, вероятно,</span> <span>также хотите</span><span> настроить выбранный</span> <span>узел</span> <span>на один уровень вверх</span><span>,</span> <span>к</span><span> узлу.</span></span>
+  <div class="channel"> </div>
+ </li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Переключение</span> <span>на вкладку "</span><span>Animations</span><span>"</span></span> .</li>
+</ul>
+
+<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
+
+<p><span class="short_text" id="result_box" lang="ru"><span>Теперь</span> <span>воспроизведение анимации</span><span>:</span></span></p>
+
+<p>{{EmbedYouTube("CwXXXEllB3o")}}</p>
+
+<p><span id="result_box" lang="ru"><span>Давайте</span> <span>внимательнее посмотрим на</span> <span>содержание</span> <span>инспектора анимации</span> <span>здесь</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p>
+
+<p><span id="result_box" lang="ru"><span>Он показывает</span> <span>синхронизированный</span> <span>график</span> <span>для каждого</span> <span>перехода</span> <span>CSS</span> <span>свойств</span> <span>участвующих</span> <span>в анимации</span><span>.</span> <span>Шкала времени</span> <span>начинается с</span> <span>начала первого</span> <span>перехода</span><span>,</span> <span>и заканчивается</span> <span>в конце</span> <span>последнего</span> <span>перехода</span><span>,</span> <span>и</span> <span>помечена</span> <span>маркерами</span> <span>каждые 100 миллисекунд</span> <span>(</span><span>это</span> <span>зависит от</span> <span>временного масштаба</span> <span>анимации</span> <span>отображаемой в данный момент</span><span>)</span><span>.</span> <span>Вы можете</span> <span>видеть, что</span><span> приведенный выше пример</span> <span>занимает</span> <span>735</span> <span>миллисекунд</span> <span>для запуска</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Каждая анимация</span> <span>или</span> <span>переход</span> <span>показан в виде</span> <span>горизонтальной полосы</span><span>, установленной</span> <span>по</span> <span>шкале времени</span><span>:</span></span></p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Бар</span> <span>синий</span><span>, если</span></span> <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> <span id="result_box" lang="ru"><span>был использован для</span> <span>свойств анимации</span><span>,</span> <span>и оранжевый</span><span>, если</span></span> был использован <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a>.</li>
+ <li>
+  <div id="gt-src-tools">
+  <div id="tts_button"><span class="short_text" id="result_box" lang="ru"><span>С</span> <span>Firefox</span> <span>44</span><span>, строка</span> <span>содержит</span> <span>значок молнии</span></span>(<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) если свойства анимации используют набранные нити (посмотреть больше о <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</div>
+  </div>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Бар</span> <span>помечается</span><span> именем</span> <span>свойства</span> <span>существующей анимации</span> <span>или названием</span> <span>@keyframes анимации</span></span> .</li>
+ <li>
+  <div id="gt-src-tools">
+  <div id="tts_button"><span id="result_box" lang="ru"><span>Если в анимации</span> <span>или</span> <span>переходе</span> <span>произошла задержка</span><span>,</span> <span>это</span> <span>показано в виде</span> <span>заштрихованной</span> <span>части</span> <span>панели</span></span>.</div>
+  </div>
+ </li>
+ <li><span id="result_box" lang="ru"><span>При наведении курсора на</span> <span>панели</span> <span>появляется</span> <span>подсказка</span><span>, что дает вам</span> <span>более подробную информацию</span> <span>о</span> <span>анимации</span> <span>или</span> <span>переходе</span></span> .</li>
+</ul>
+
+<p>С левой стороны бара переключатель для узлов относящихся к анимации. если навести курсор на переключатель, то выделится узел на странице. <span id="result_box" lang="ru"><span>Нажмите</span> <span>переключатель</span> <span>для выбора</span> <span>узла в</span> <span>инспекторе</span></span></p>
+
+<p><span class="short_text" id="result_box" lang="ru"><span>Слева от</span> <span>переключателя имеется</span> <span>значок</span> <span>"</span><span>мишень</span><span>"</span></span> (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). <span id="result_box" lang="ru"><span>Из</span> <span>Firefox</span> <span>44</span><span>,</span> <span>нажав</span> <span>на этот значок</span> <span>будет блокировать</span> <span>фломастер</span> <span>на элементе</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="ru"><span>Применяя</span> <span>все это</span> <span>к нашему примеру</span><span>,</span> <span>мы можем</span> <span>видеть, что</span></span> :</p>
+
+<ul>
+ <li><span class="short_text" id="result_box" lang="ru"><span>В анимации</span> <span>участвуют</span> <span>два элемента</span></span> , <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. <span id="result_box" lang="ru"><span>Проходя</span> <span>над этими</span> <span>переключателями</span><span>,</span> <span>мы</span> <span>видим</span> <span>эти элементы</span><span>,</span> <span>соответственно</span><span>,</span> <span>название канала</span> <span>"</span><span>Firefox</span> <span>Nightly</span><span>"</span> <span>и значок</span> <span>канала</span></span> : {{EmbedYouTube("EOUjHt0V1No")}}</li>
+ <li><span class="short_text" id="result_box" lang="ru"><span>Каждый элемент</span> <span>имеет</span> <span>два свойства</span> <span>анимации</span></span> :
+  <ul>
+   <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> и <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> <span class="short_text" id="result_box" lang="ru"><span>для</span> <span>названия канала</span></span></li>
+   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> для значка</li>
+   <li><code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> <span class="short_text" id="result_box" lang="ru"><span>свойство</span> <span>оживлялось</span> <span>на</span> <span>наборщике</span> <span>нити</span><span>.</span></span></li>
+  </ul>
+ </li>
+ <li><span id="result_box" lang="ru"><span>Свойство</span> <span>фильтра</span> <span>имеет задержку</span> <span>0,25 секунды</span><span>, применяемых</span> <span>к нему</span><span>.</span></span></li>
+ <li><span id="result_box" lang="ru"><span>Преобразование</span> <span>перехода</span> <span>свойства</span> <span>заканчивается</span> <span>через 0,5 секунды</span><span>.</span></span></li>
+</ul>
+
+<h3 id="Воспроизведение_анимации">Воспроизведение анимации</h3>
+
+<p><span class="short_text" id="result_box" lang="ru"><span>В</span> <span>верхней части</span> <span>инспектора</span></span> анимации:</p>
+
+<ul>
+ <li><strong>there are buttons to play/pause and rewind the animation (new in Firefox 44)</strong></li>
+ <li><span id="result_box" lang="ru"><span>текущее время</span> <span>в анимации</span> <span>отображается</span> <span>(новое в</span> <span>Firefox</span> <span>44</span><span>)</span><span>.</span></span></li>
+</ul>
+
+<p><span id="result_box" lang="ru"><span>И, наконец</span><span>,</span> <span>если вы</span> <span>щелкните внутри</span> <span>панели в верхней</span> <span>части шкалы времени</span><span>,</span> <span>вы получаете</span> <span>скруббер</span><span>, который</span> <span>вы можете перетащить</span> <span>влево и вправо</span> <span>для перемотки анимации</span> <span>назад и вперед</span><span>,</span> <span>и</span> <span>точно определить</span><span>, что происходит</span><span>, когда</span><span>:</span></span></p>
+
+<p>{{EmbedYouTube("1hqNaMsB48g")}}</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/ru/tools/page_inspector/how_to/исследовать_event_listeners/index.html b/files/ru/tools/page_inspector/how_to/исследовать_event_listeners/index.html
new file mode 100644
index 0000000000..c5ea101f0b
--- /dev/null
+++ b/files/ru/tools/page_inspector/how_to/исследовать_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
+---
+<div>{{ToolsSidebar}}</div><p>Начиная с Firefox 33 вы увидите значок «ev» в области HTML, напротив элементов, у которых есть связаные с ними Event Listeners:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p>
+
+<p>Нажмите на иконку, затем вы увидите всплывающее окно со списком всех Event Listeners, связанных с этим элементом:<img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Каждая строка содержит:</p>
+
+<ul>
+ <li>кнопка паузы: щелкните на нее, чтобы перейти к "event Listener" в <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Отладчик</a>, где вы сможете установить контрольную точку в нем</li>
+ <li>название события</li>
+ <li>название и номер строки обработчика: нажмите, чтобы увидеть функцию обработчика во всплывающем окне</li>
+ <li>метка, указывающая, является ли событие высплывающим</li>
+ <li>метка, указывающая систему, которая определяет событие. Firefox может отображать:
+  <ul>
+   <li>стандартные DOM события</li>
+   <li><a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery events</a></li>
+   <li><a href="https://facebook.github.io/react/docs/events.html">React events</a> (new in Firefox 53)</li>
+  </ul>
+ </li>
+</ul>
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..24b490e3d3
--- /dev/null
+++ b/files/ru/tools/page_inspector/how_to/просмотр_шрифтов/index.html
@@ -0,0 +1,24 @@
+---
+title: Просмотр шрифтов
+slug: Tools/Page_Inspector/How_to/Просмотр_шрифтов
+tags:
+  - Guide
+  - Инспектор
+  - инструменты
+translation_of: Tools/Page_Inspector/How_to/Edit_fonts
+---
+<div>{{ToolsSidebar}}</div><h2 id="Всплывающая_подсказка_у_font-family">Всплывающая подсказка у font-family</h2>
+
+<p>Если навести указатель на свойство <a href="/ru/docs/Web/CSS/font-family"><code>font-family</code></a> на <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view">вкладке «Правила»</a>, всплывёт подсказка с примером написанным соответствующим шрифтом:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9957/font-popup.png" style="width: 565px; display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Вкладка_«Шрифты»">Вкладка «Шрифты»</h2>
+
+<p><a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Режим просмотра шрифтов</a> показывает все шрифты, используемые выбранным элементом. Заметьте, что он показывает шрифты, используемые на вашей системе, и они могут отличаться от шрифтов, указанных в CSS:</p>
+
+<p><img alt="Скриншот вкладки Шрифты инспектора Nightly 2014-04-26 40.0a1.ru.linux-x86_64." src="https://mdn.mozillademos.org/files/10547/css-fonts-ru-20150426.png" style="width: 494px; display: block; margin-left: auto; margin-right: auto; height: 313px;"></p>
+
+<p>Образец шрифта по умолчанию «Abc», но до Firefox 36 он был <strong><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></strong> и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">свободно редактировался</a>.</p>
+
+<p> </p>
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
+---
+<div>{{ToolsSidebar}}</div><p>Используйте Инспектор, чтобы исследовать и модифицировать HTML и CSS страницы.</p>
+
+<p>Вы можете исследовать страницы, загруженные в локальном Firefox или где-то удалённо, например в устройстве на Firefox OS или на Firefox для Android. См. <a href="/ru/docs/Tools/Remote_Debugging">удалённая отладка</a> о том, как подключить инструменты разработчика к чему-то удалённому.</p>
+
+<hr>
+<h2 id="Тур_по_интерфейсу_пользователя">Тур по интерфейсу пользователя</h2>
+
+<p>Чтобы осмотреться в Инспекторе, см. <a href="/ru/docs/Tools/Page_Inspector/UI_Tour">небольшой тур по интерфейсу пользователя</a>.</p>
+
+<hr>
+<h2 id="Как…">Как…</h2>
+
+<p>Что можно делать с помощью Инспектора, читайте в следующих руководствах:</p>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Otkrytie_Inspektora">Открыть Инспектор</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Исследовать и редактировать HTML</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Исследовать и выбирать цвета</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Просмотр_шрифтов">Смотреть шрифты</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Использовать API Инспектора</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">Выбрать элемент</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследовать и редактировать CSS</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Исследовать слушатели событий</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Работать с анимациями</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Редактировать CSS'ные фильтры</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/View_background_images">Смотреть фоновые изображения (background-image)</a></dt>
+ <dd> </dd>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Использовать Инспектор из Веб-консоли</a></dt>
+</dl>
+</div>
+</div>
+
+<hr>
+<h2 id="Справка">Справка</h2>
+
+<div class="column-container">
+<div class="column-half">
+<dl>
+ <dt><a href="/ru/docs/Tools/Page_Inspector/Сочетания_клавиш">Сочетания клавиш</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+
+<div class="column-half">
+<dl>
+ <dt><a href="/ru/docs/Tools/Tools_Toolbox#Inspector">Настройки</a></dt>
+ <dd> </dd>
+</dl>
+</div>
+</div>
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
+---
+<div>{{ToolsSidebar}}</div><p>Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.</p>
+
+<p>Она охватывает три основных компонента интерфейса Инспектора:</p>
+
+<ul>
+ <li>кнопка выбора элемента</li>
+ <li>панель HTML</li>
+ <li>панель CSS</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">Это руководство нарочно как можно более короткое.  В нём ссылки на другие руководства, с подробностями об использовании Инспектора.</p>
+
+<h2 id="Select_element_button" name="Select_element_button">Кнопка выбора элемента</h2>
+
+<p>Инспектор даёт вам подробную информацию о выбранном сейчас элементе.  Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p>
+
+<p>Заметьте: она на <a href="/ru/docs/Tools/Tools_Toolbox#Панель инструментов">главной панели инструментов веб-разработчика</a>, так что быстро доступна из любого инструмента, не только Инспектора.</p>
+
+<p>Чтобы научиться выбирать элемент, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">выбору элемента</a>.</p>
+
+<h2 id="HTML_pane" name="HTML_pane">Панель HTML</h2>
+
+<p>Инспектор разделён на две половины.  Левую половину занимает панель HTML:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p>
+
+<p>Чтобы узнать больше о структуре панели HTML, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">исследованию и редактированию</a>.</p>
+
+<h2 id="CSS_pane" name="CSS_pane">Панель CSS</h2>
+
+<p>Правую сторону Инспектора занимает панель CSS:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">Панель CSS имеет 5 режимов для просмотра различных данных:</p>
+
+<ul>
+ <li>Правила</li>
+ <li>Вычислено</li>
+ <li>Шрифты</li>
+ <li>Блоковая модель</li>
+ <li>Анимации</li>
+</ul>
+
+<p>Переключаться между этими режимами можно с помощью вкладок наверху панели.</p>
+
+<h3 id="Rules_view" name="Rules_view">Просмотр правил</h3>
+
+<p>Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:</p>
+
+<p><img alt="Вкладка Правила Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10555/css-rules-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
+
+<h3 id="Computed_view" name="Computed_view">Просмотр вычисленного</h3>
+
+<p>Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.</p>
+
+<p><img alt="Вкладка Вычислено Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10553/css-computed-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p>
+
+<h3 id="Fonts_view" name="Fonts_view">Просмотр шрифтов</h3>
+
+<p>Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">которые до Firefox 36 можно было редактировать</a>).</p>
+
+<p><img alt="Вкладка Шрифты Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10549/css-fonts-ru-20150426-2.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/View_fonts">Просмотр шрифтов</a>.</p>
+
+<h3 id="Box_Model_view" name="Box_Model_view">Вкладка «Блоковая модель»</h3>
+
+<p>Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.</p>
+
+<p><img alt="Вкладка Блоковая модель Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10551/css-box-model-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>.</p>
+
+<h3 id="Animations_view" name="Animations_view">Вкладка «Анимации»</h3>
+
+<p>Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:</p>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p>
+
+<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a>.</p>
diff --git a/files/ru/tools/page_inspector/сочетания_клавиш/index.html b/files/ru/tools/page_inspector/сочетания_клавиш/index.html
new file mode 100644
index 0000000000..ae162ef628
--- /dev/null
+++ b/files/ru/tools/page_inspector/сочетания_клавиш/index.html
@@ -0,0 +1,13 @@
+---
+title: Клавиатурные сокращения
+slug: Tools/Page_Inspector/Сочетания_клавиш
+tags:
+  - Инспектор
+  - инструменты
+translation_of: Tools/Page_Inspector/Keyboard_shortcuts
+---
+<div>{{ToolsSidebar}}</div><p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Глобальные_сокращения">Глобальные сокращения</h3>
+
+<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>