initial commit

1 files changed, 172 insertions, 0 deletions

diff --git a/files/ru/learn/discover_browser_developer_tools/index.html b/files/ru/learn/discover_browser_developer_tools/index.html
new file mode 100644
index 0000000000..8cd514efcd
--- /dev/null
+++ b/files/ru/learn/discover_browser_developer_tools/index.html
@@ -0,0 +1,172 @@
+---
+title: Обзор инструментов разработки в браузерах
+slug: Learn/Discover_browser_developer_tools
+tags:
+  - Beginner
+  - Browser
+  - CSS
+  - CodingScripting
+  - Dev Tools
+  - HTML
+  - JavaScript
+  - Браузер
+  - Новичку
+  - Обучение
+translation_of: Learn/Common_questions/What_are_browser_developer_tools
+---
+<div>{{IncludeSubnav("/ru-RU/Learn")}}</div>
+
+<p>{{Previous("Learn/Getting_started_with_the_web")}}</p>
+
+<div class="summary">
+<p>Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит Вас использовать базовые функции инструментов разработчика в Вашем браузере.</p>
+</div>
+
+<div class="note">
+<p><strong>Заметка</strong>: Прежде чем начать заниматься с примерами, откройте <a href="http://mdn.github.io/beginner-html-site-scripted/">пример сайта для начинающих</a>, с которым мы работали на <a href="/en-US/Learn/Getting_started_with_the_web">предыдущих занятиях</a>. Вам следует держать его открытым, чтобы выполнить описанные ниже действия.</p>
+</div>
+
+<h2 id="Как_открыть_инструменты_веб-разработчика_в_Вашем_браузере">Как открыть инструменты веб-разработчика в Вашем браузере?</h2>
+
+<p>Панель разработчика находится в нижней части Вашего браузера :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p>
+
+<p>Как её отобразить? Есть три варианта:</p>
+
+<ul>
+ <li><em><strong>Клавиатура.</strong></em> <em>Ctrl + Shift + I</em>, кроме
+
+  <ul>
+   <li><strong>Internet Explorer. </strong><em>(клавиша - F12) </em></li>
+   <li><strong>Mac OS X. </strong><em><span class="Unicode">(сочетание клавиш - ⌘ + ⌥ + I )</span></em></li>
+  </ul>
+ </li>
+ <li><span class="Unicode"><em><strong>Панель Меню. </strong></em></span>
+  <ul>
+   <li><strong>Firefox. </strong>Открыть меню <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <span class="Unicode"><em><span class="Unicode">➤ <img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></span></em><em><span class="Unicode">➤ Инструменты разработки, или</span></em><span class="Unicode"> </span><em>Инструменты ➤</em></span><em> Веб-разработка ➤ Инструменты разработки</em></li>
+   <li><strong>Chrome.</strong> <em><span class="Unicode">Дополнительные инструменты ➤</span> Инструменты разработчика</em></li>
+   <li><strong>Safari.</strong> <em>Разработка <span class="Unicode">➤</span> Показать Web Inspector .</em> Если Вы не видите меню "Разработка", зайдите в  <em>Safari<span class="Unicode"> ➤</span> Настройки ➤ Дополнительно, </em> и проверьте стоит ли галочка <em>напротив "Показать меню разработки"</em>. </li>
+   <li><strong>Opera</strong>. <em><span class="Unicode">Меню </span></em> <em><span class="Unicode">➤</span> </em> <em><span class="Unicode">Разработка ➤</span> Инструменты разработчика. </em> Если Вы не видите меню "Разработка",  включите его отображение, перейдя в Меню <em><span class="Unicode">➤</span> </em> Другие инструменты <em><span class="Unicode">➤</span> </em>Показать меню разработчика.</li>
+  </ul>
+ </li>
+ <li><strong><em>Контекстное меню.</em></strong> Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором Вам нужно выбрать пункт <em>Исследовать Элемент</em>. (<em>дополнение: </em>этот способ отобразит Вам код того элемента, на котором вы щёлкнули правой кнопкой.)</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+
+<h2 id="Inspector_DOM_обозреватель_и_CSS_редактор">Inspector: DOM обозреватель и CSS редактор</h2>
+
+<p>По-умолчанию, в панели открывается вкладка<em> </em>Inspector, Вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет Вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет Вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+
+<p>Если Вы н<em>е видите</em> Inspector,</p>
+
+<ul>
+ <li>Нажмите на вкладку <em>Inspector </em>.</li>
+ <li>В Internet Explorer, нажмите на <em>DOM Обозреватель, </em>или нажмите Ctrl + 1.</li>
+ <li>В Safari, элементы управления представлены не так чётко, но Вы должны увидеть HTML код, если Вы не выбрали что-то другое в окне разработки. Нажмите на кнопку <em>Стиль,</em> чтобы увидеть CSS.</li>
+</ul>
+
+<h3 id="Обзор_DOM_inspector">Обзор DOM inspector</h3>
+
+<p>Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p>
+
+<ul>
+ <li><strong>Удалить узел</strong> (иногда <em>Удалить элемент</em>). Удаляет текущий элемент.</li>
+ <li><strong>Править как HTML</strong> (иногда <em>Добавить атрибут</em>/<em>Править текст</em>). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.</li>
+ <li><strong>:hover/:active/:focus</strong>. Заставляет элементы переключить своё состояние на то, к которому применён Ваш стиль.</li>
+ <li><strong>Копировать/Копировать как HTML</strong>. Копирует текущий выделенный HTML.</li>
+</ul>
+
+<p>Попробуйте изменить что-нибудь через окно Inspector на Вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите <em>Править как HTML </em>из контекстного меню. Вы можете сделать любые изменения, какие захотите, но Вы не сможете их сохранить.</p>
+
+<h3 id="Обзор_CSS_редактора">Обзор CSS редактора</h3>
+
+<p>По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p>
+
+<p>Эти функции особенно удобны:</p>
+
+<ul>
+ <li>Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.</li>
+ <li>Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.</li>
+ <li>Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.</li>
+ <li>Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.</li>
+ <li>Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.</li>
+ <li>Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где Вы сможете написать совершенно новую декларацию для Вашей страницы.</li>
+</ul>
+
+<p>Вы должно быть уже заметили другие вкладки в  CSS редакторе:</p>
+
+<ul>
+ <li><em>Вычислено</em>: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).</li>
+ <li><em>Блоковая модель</em>: Отображает блочную модель выделенного элемента, здесь Вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.</li>
+ <li><em>Анимации</em>: В Firefox, на вкладке <em>Анимации</em> Вы можете увидеть анимации применённые к выделенному элементу.</li>
+</ul>
+
+<h3 id="Узнать_больше">Узнать больше</h3>
+
+<p>Узнать больше об Inspector в различных браузерах:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Inspector в Opera схож с Inspector в Chrome)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li>
+</ul>
+
+<h2 id="Консоль_JavaScript">Консоль JavaScript </h2>
+
+<p>Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите <em>Ctrl + 2</em>.) Откроется окно, как показано ниже:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p>
+
+<p>Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!');</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.</p>
+
+<ol>
+ <li>
+  <pre class="brush: js">alert('hello!);</pre>
+ </li>
+ <li>
+  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
+ </li>
+ <li>
+  <pre class="brush: js">var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+document.querySelector('h1').appendChild(myImage);</pre>
+ </li>
+</ol>
+
+<p>Вы увидите некоторые ошибки, которые сообщит Вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!</p>
+
+<h3 id="Узнать_больше_2">Узнать больше</h3>
+
+<p>Узнать больше о JavaScript консоли в различных браузерах:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
+ <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
+ <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Inpector в Opera схож с Inspector в Chrome)</li>
+ <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
+</ul>