diff options
Diffstat (limited to 'files/ru/learn/discover_browser_developer_tools/index.html')
| -rw-r--r-- | files/ru/learn/discover_browser_developer_tools/index.html | 172 |
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> |