1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
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>
|
