aboutsummaryrefslogtreecommitdiff
path: root/files/ru/tools/web_console/index.html
blob: 2d7cd8497932d51270210ddd6554352ad2d680e8 (plain)
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
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
---
title: Веб-консоль
slug: Tools/Web_Console
tags:
  - NeedsTranslation
  - Tools
  - TopicStub
  - Web Development
  - Веб-консоль
  - Отладка
  - Руководство
  - 'веб-разработка:инструменты'
translation_of: Tools/Web_Console
---
<div>{{ToolsSidebar}}</div>

<p>Веб-консоль:</p>

<ol>
 <li>Выводит информацию, связанную с веб-страницей: сетевые запросы, ошибки и предупреждения JavaScript и CSS, а также сообщения об ошибках, предупреждения и информационные сообщения, выдаваемые кодом JavaScript, выполняющимся в контексте страницы;</li>
 <li>Позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в её контексте.</li>
</ol>

<p>Это часть замены старой <a href="/ru/docs/Error_Console" title="ru/docs/Error_Console">Консоли Ошибок</a>, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определенной веб-странице и показывает только связанную с ней информацию.</p>

<p>На другой половине Консоли ошибок заменили — <a href="/ru/docs/Tools/Browser_Console" title="/ru/docs/Tools/Browser_Console">Консоль браузера</a>, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.</p>

<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p>

<h2 id="Opening_the_Web_Console" name="Opening_the_Web_Console">Как открыть Веб Консоль</h2>

<p>Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> в OS X).</p>

<p>Внизу окна браузера появится <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window" title="/ru/docs/Tools/DevTools_Window">Набор инструментов</a> с выбранной Веб-консолью (в <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">Панели инструментов разработчика</a> она называется просто «Консоль»):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Под <a href="/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">панелью инструментов окна инструментов разработчика</a>, интерфейс веб-консоли разделён на три части:</p>

<ul>
 <li><a href="#filtering-and-searching" title="#filtering-and-searching">Панель инструментов</a>: вдоль верхнего края — панель инструментов с кнопками типа «Сеть» ("Net"), «CSS», «JS», "Защита" ("Security"), "Журнал" ("Logging") и "Сервер". Эта панель — для фильтрации выводимых сообщений.</li>
 <li><a href="#command-line" title="#command-line">Командная строка</a>: вдоль нижнего края — командная строка, в которую можно вводить выражения JavaScript</li>
 <li><a href="#message-display-pane" title="#message-display-pane">Поле вывода сообщений</a>: между панелью инструментов и командной строкой, занимая большую часть окна, располагается пространство, в которое Веб-консоль выводит сообщения.</li>
</ul>

<h2 id="Поле_вывода_сообщений"><a name="message-display-pane">Поле вывода сообщений</a></h2>

<p>Большую часть Веб-консоли занимает поле вывода сообщений:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>В поле вывода сообщений можно увидеть:</p>

<ul>
 <li><a href="/ru/docs/Tools/Web_Console#HTTP_requests">HTTP-запросы</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#JavaScript_errors_and_warnings">предупреждения и ошибки JavaScript</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">предупреждения, ошибки и события перерисовки CSS (event reflow)</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Security_warnings_and_errors">предупреждения и ошибки безопасности</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#console_API_messages">вызовы консольного API</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output сообщения</a>: команды посылаемые в браузер через командную строку Веб консоли, и их результат выполнения.</li>
</ul>

<p>Каждое сообщение показывается в отдельной строке:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td><strong>Время (Time)</strong></td>
   <td>Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в <a href="/ru/docs/Tools_Toolbox#Settings">настройках Инструментов</a>.</td>
  </tr>
  <tr>
   <td><strong>Категория (Category)</strong></td>
   <td>
    <p><strong>Категория</strong>: указывает на тип сообщения:</p>

    <ul style="margin-left: 40px;">
     <li><strong>чёрный</strong>: HTTP-запрос</li>
     <li><span style="color: #0099ff;"><strong>голубой</strong></span>: CSS: предупреждения/ошибки/лог</li>
     <li><strong><span style="color: #ff8c00;">оранжевый</span></strong>: JavaScript: предупреждения/ошибки</li>
     <li><span style="color: #ff0000;"><strong>красный</strong></span>: безопасность: предупреждения/ошибки</li>
     <li><span style="color: #a9a9a9;"><strong>светло-серый</strong></span>: сообщения которые выводятся в консоль с помощью <a href="/ru/docs/Web/API/console" title="/ru/docs/Web/API/console">консольного API </a>c использованием кода JavaScript</li>
     <li><span style="color: #696969;"><strong>Dark Gray</strong></span>: input/output из интерфейса <a href="/ru/docs/Tools/Web_Console#The_command_line_interpreter">интерпретатора командной строки</a></li>
    </ul>
   </td>
  </tr>
  <tr>
   <td><strong>Тип (Type)</strong></td>
   <td>Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i).</td>
  </tr>
  <tr>
   <td><strong>Сообщение (Message)</strong></td>
   <td>Само сообщение.</td>
  </tr>
  <tr>
   <td><strong>Количество повторов (Occurrences)</strong></td>
   <td>Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.</td>
  </tr>
  <tr>
   <td><strong>Имя файла и номер строки<br>
    (Filename:Line number)</strong></td>
   <td>
    <p>Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения..</p>

    <p>Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке.</p>
   </td>
  </tr>
 </tbody>
</table>

<p>По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в <a href="/ru/docs/Tools_Toolbox#Common_preferences">Настройках</a>.</p>

<h3 id="HTTP_запросы">HTTP запросы</h3>

<p>HTTP запросы записываются следующим образом:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<table class="fullwidth-table standard-table">
 <tbody>
  <tr>
   <td>Время (Time)</td>
   <td>Время записи сообщения</td>
  </tr>
  <tr>
   <td>Категория (Category)</td>
   <td>Показывает что сообщение является HTTP запросом.</td>
  </tr>
  <tr>
   <td>Метод (Method)</td>
   <td>Вид запроса HTTP</td>
  </tr>
  <tr>
   <td><strong>URI</strong></td>
   <td>целевая ссылка URI</td>
  </tr>
  <tr>
   <td>Резюме (Summary)</td>
   <td>Версия и статус HTTP протокола, время выполнения запроса.</td>
  </tr>
 </tbody>
</table>



<p>Нажав мышкой на сообщение вы увидите следующее окно с более детальной информацией о запросе и ответе на него:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;"> <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>Log Request and Response Bodies<span lang="ru"><span>",</span> <span>перезагрузите страницу</span><span>, а затем</span> <span>вы увидите их</span> <span>в окне "</span> </span>Inspect Network Request<span lang="ru"> <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></p>

<p><span id="result_box" lang="ru"><span>Сообщения журнала</span> <span>сети</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Используйте</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> <span class="short_text" id="result_box" lang="ru"><span> чтобы</span> <span>показать их</span></span>.</p>

<h4 id="XHR">XHR</h4>

<p><span id="result_box" lang="ru"><span>С</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>веб-консоль</span> <span>показывает, когда</span> <span>сетевой запрос</span> <span>был сделан</span> <span>как</span></span> <a href="/ru/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p>

<p><span class="short_text" id="result_box" lang="ru"><span>Кроме того, с</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>вы можете</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filter</a> <span class="short_text" id="result_box" lang="ru"><span>сетевые запросы</span> <span>так</span><span>, чтобы</span> <span>только</span> <span>видеть</span></span> XMLHttpRequests.</p>

<p><span id="result_box" lang="ru"><span>Как и обычный</span> <span>журнал</span> <span>запроса</span> <span>сетевых сообщений</span><span>,</span> <span>журналы</span> <span>запросы XMLHttpRequest</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Использовать</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p>

<h3 id="JavaScript_ошибки_и_предупреждения">JavaScript ошибки и предупреждения</h3>

<p>JavaScript ошибки выглядят вот так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="CSS_ошибки_сообщения_и_переформатирование_сообщения">CSS ошибки, сообщения и <span id="result_box" lang="ru"><span>переформатирование</span></span> сообщения</h3>

<p>CSS сообщения выглядят так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>По умолчанию, CSS предупреждения и регистрирования сообщений не отображаются.</p>

<h4 id="Отправка-события">Отправка-события</h4>

<p><span id="result_box" lang="ru"><span>Веб-консоль</span> <span>также регистрирует</span> <span>события</span> </span> <span id="result_box" lang="ru"><span>переформатированные</span></span> <span lang="ru"><span> в</span> <span>CSS категорию</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирование</span></span> <span lang="ru"> <span>это</span> <span>название</span> <span>операции,</span><span> которой браузер</span> <span>вычисляет</span> <span>расположение</span> <span>части или всей страницы</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирования</span></span><span lang="ru"> <span>происходят, когда</span> <span>изменение</span> <span>произошли</span> <span>на странице, чтобы</span> <span>браузер</span> <span>считал, что</span> <span>влияет на</span> <span>расположение</span><span>.</span></span> <span lang="ru"><span>.</span> <span>Многие</span> <span>события могут вызвать</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>, в том числе</span><span>:</span> <span>изменение размера окна браузера</span><span>, активируя</span> <span>как</span> </span> <span class="short_text" id="result_box" lang="ru"><span>псевдо-классы</span></span> <a href="/ru/docs/Web/CSS/:hover">:hover</a>, <span class="short_text" id="result_box" lang="ru"><span>или</span> <span>манипулирование</span></span> DOM в JavaScript.</p>

<p><span id="result_box" lang="ru"><span>Поскольку</span> <span>переформатирования</span></span><span 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 id="result_box" lang="ru"><span>переформатировании</span></span><span 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 id="result_box" lang="ru"><span>переформатирования</span></span> <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> <span class="short_text" id="result_box" lang="ru"><span>сработавшие</span> <span>от</span></span> JavaScript, то <span class="short_text" id="result_box" lang="ru"><span>какой код</span> <span>вызвал</span> <span>их</span></span> .</p>

<p>  <span id="result_box" lang="ru"><span>Переформатирования</span></span> <span 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>"CSS</span><span>"</span> <span>в</span></span> <a href="#filtering-and-searching">toolbar</a> и выбрать "Журнал".</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> :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;"> <span id="result_box" lang="ru"><span>Если</span> <span>переформатирование</span></span><span lang="ru"> <span>является синхронным</span> </span><span id="result_box" lang="ru"><span>переформатированием</span></span><span lang="ru"><span>, вызванным</span> <span>JavaScript</span><span>,</span> <span>будет также показана</span> <span>ссылка на</span> <span>строку кода</span><span>, инициировавшего</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>:</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;"> <span class="short_text" id="result_box" lang="ru"><span>Нажмите на ссылку</span><span>, чтобы открыть файл</span> <span>в</span></span> <a href="/ru/docs/Tools/Debugger">Debugger</a>.</p>

<h4 id="Синхронные_и_асинхронные_переформатирования"><a name="synchronous-and-asynchronous-reflows"></a> <span class="short_text" id="result_box" lang="ru"><span>Синхронные</span> <span>и асинхронные</span> </span><span id="result_box" lang="ru"><span>переформатирования</span></span> <a name="synchronous-and-asynchronous-reflows"></a></h4>

<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>JavaScript</span> <span>изменяют</span> <span>CSS</span> <span>элемент -</span> <span>макет</span> <span>не пересчитывается</span> <span>немедленно.</span> <span>Вместо</span></span><span lang="ru"> <span>переформатирования </span></span><span 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>сразу</span><span>.</span></span></p>

<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменен</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span 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 id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <code>window.getComputedStyle(thing).height</code>:</p>

<pre class="brush: js notranslate">var thing = document.getElementById("the-thing");
thing.style.display = "inline-block";
var thingHeight = window.getComputedStyle(thing).height;</pre>

<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>DOM</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 lang="ru"><span>.</span></span></p>

<h3 id="Предупреждения_безопасности_и_ошибки"><span class="short_text" id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span></span></h3>

<p><span id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span> <span>выглядят следующим образом</span></span> :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> <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>этой проблемы.</span></span></p>

<p><span id="result_box" lang="ru"><span>Полный список</span> <span>сообщений</span> <span>безопасности</span> <span>выглядит следующим образом</span></span> :</p>

<table class="standard-table" style="width: auto;">
 <tbody>
  <tr>
   <th scope="col">Сообщение</th>
   <th scope="col">Подробности</th>
  </tr>
  <tr>
   <td>Blocked loading mixed active content</td>
   <td><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>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>активные доли</span></span>. Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Blocked loading mixed display content</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Loading mixed (insecure) active content on a secure page</td>
   <td><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>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил эти</span> <span>активные доли</span></span><span lang="ru"><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Loading mixed (insecure) display content on a secure page</td>
   <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.</td>
   <td>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.</td>
   <td>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>Страницы, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>Формы</span><span>, содержащие</span> <span>поля пароля</span> <span>должны представить</span> <span>их через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td>
   <td><span id="result_box" lang="ru"><span>плавающие фреймы</span><span>, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td>
  </tr>
  <tr>
   <td>The site specified an invalid Strict-Transport-Security header.</td>
   <td>Смотрите <a href="/ru/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> чтобы узнать подробнее.</td>
  </tr>
  <tr>
   <td>
    <div class="geckoVersionNote">
    <p>Новое в Firefox 36</p>
    </div>

    <p>This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.</p>
   </td>
   <td>
    <p><span id="result_box" lang="ru"><span>Сайт</span> <span>использует сертификат</span> <span>чья подпись</span> <span>использует</span> <span>алгоритм хеширования</span> <span>SHA-1</span><span>.</span></span></p>

    <p><span id="result_box" lang="ru"><span>SHA-</span><span>1</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> Смотрите <a href="/ru/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> статью рассказывающую подробнее.</p>

    <p><span id="result_box" lang="ru"><span>Обратите внимание</span><span>, что сертификат</span> <span>SHA-</span><span>1</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>
   </td>
  </tr>
 </tbody>
</table>

<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</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></p>

<h3 id="Сообщения_консоли_API"><span class="short_text" id="result_box" lang="ru"><span>Сообщения</span> <span>консоли API</span></span></h3>

<p><br>
 <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>This section describes the Web Console output for those console API calls that actually result in output. For more general documentation on the console API, please refer to its <a href="/ru/docs/Web/API/console">documentation page</a>.</p>

<p>From Firefox 40 onwards, the Web Console can display console messages from <a href="/ru/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/ru/docs/Web/API/ServiceWorker_API">Service Workers</a>, and <a href="/ru/docs/Mozilla/ChromeWorkers">Chrome Workers</a>. Check the relevant options in the <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">Filtering dropdown menu</a> to see them.</p>

<h4 id="Сообщения_об_ошибках">Сообщения об ошибках</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.error"><code>error()</code></a></td>
   <td>
    <p>The argument to <code>error()</code>.</p>

    <pre class="brush: js notranslate">
console.error("an error");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>The console will display a full stack trace for errors:</p>

    <pre class="brush: js notranslate">
function error() {
  console.error("an error");
}

function call_error() {
  error();
}

call_error();</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.exception"><code>exception()</code></a></td>
   <td>An alias for <code>error()</code>.</td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.assert"><code>assert()</code></a></td>
   <td>
    <p>If the assertion succeeds, nothing. If the assertion fails, the argument:</p>

    <pre class="brush: js notranslate">
console.assert(false, "My assertion always fails");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;">
    <p>The console will display a full stack trace for assertions:</p>

    <pre class="brush: js notranslate">
function assertion() {
  console.assert(false, "assertion failed");
}

function call_assertion() {
  assertion();
}

call_assertion();</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p>
   </td>
  </tr>
 </tbody>
</table>

<h4 id="Предупреждающие_сообщения">Предупреждающие сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.warn"><code>warn()</code></a></td>
   <td>
    <p>The argument to <code>warn()</code>.</p>

    <pre class="brush: js notranslate">
console.warn("a warning");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Информативные_сообщения">Информативные сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.info"><code>info()</code></a></td>
   <td>
    <p>The argument to <code>info()</code>.</p>

    <pre class="brush: js notranslate">
console.info("some info");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Журнальные_сообщения">Журнальные сообщения</h4>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">API</th>
   <th scope="col">Message content</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.count"><code>count()</code></a></td>
   <td>
    <p>The label supplied, if any, and the number of times this occurrence of <code>count()</code> has been called with the given label:</p>

    <pre class="brush: js notranslate">
console.count(user.value);</pre>

    <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.dir"><code>dir()</code></a></td>
   <td>
    <p>Listing of the object's properties:</p>

    <pre class="brush: js notranslate">
var user = document.getElementById('user');
console.dir(user);</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></td>
   <td>Aliased to <code>log()</code>.</td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.log"><code>log()</code></a></td>
   <td>
    <p>The argument to <code>log()</code>.</p>

    <pre class="brush: js notranslate">
console.log("logged");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;">


    <p>Если аргумент — это узел DOM, консоль выдаст его в виде <a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">инспектируемого</a> rich text:</p>

    <p><img alt="" src="https://mdn.mozillademos.org/files/10807/console-log.png" style="display: block; height: 79px; margin-left: auto; margin-right: auto; width: 458px;"></p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.table"><code>table()</code></a></td>
   <td>
    <p>Display tabular data as a table.</p>
   </td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.time"><code>time()</code></a></td>
   <td>
    <p>Notification that the specified timer started.</p>

    <pre class="brush: js notranslate">
console.time("t");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td>
   <td>
    <p>Duration for the specified timer.</p>

    <pre class="brush: js notranslate">
console.timeEnd("t");</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
  <tr>
   <td><a href="/ru/docs/Web/API/Console.trace"><code>trace()</code></a></td>
   <td>
    <p>Stack trace:</p>

    <pre class="brush: js notranslate">
console.trace();</pre>
    <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td>
  </tr>
 </tbody>
</table>

<h4 id="Группировка_сообщений">Группировка сообщений</h4>

<p>Вы можете использовать <code>console.group()</code> для создания indented groups в выводе консоли. Смотрите <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">Использование групп в консоли</a> для более детальной информации.</p>

<h4 id="Оформление_сообщений">Оформление сообщений</h4>

<p>Начиная с Firefox 31, вы можете использовать спецификатор формата <code>"%c"</code> для стилизации консольных сообщений:</p>

<pre class="brush: js notranslate">console.log("%cMy stylish message", "color: red; font-style: italic");</pre>

<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div>

<h3 id="Сообщения_вводавывода">Сообщения ввода/вывода</h3>

<p>Команды, отправленные браузеру через <a href="#command-line">командную строку</a>, как и результаты их выполнения, выводятся в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли в следующем виде:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">Темно-серая полоса служит индикатором того, что это сообщения ввода/вывода, тогда как направление стрелки обозначает различия между вводом и выводом.</p>

<h3 id="Фильтрация_и_поиск"><a name="filtering-and-searching">Фильтрация и поиск</a></h3>

<h4 id="Фильтрация_по_типу">Фильтрация по типу</h4>

<p>Для фильтрации сообщений в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли используется панель вверху.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">Чтобы увидеть только сообщения определённого типа, нажмите на кнопку, название которой соответствует желаемому типу сообщений ("Net", "CSS", и т.д.). Нажатие на основную часть кнопки включает/выключает отображение сообщений выбранного типа, тогда как нажатие на стрелку в правой части кнопки вызывает выпадающее меню с более специфическими вариантами фильтров для сообщений выбранного типа (например, вывод только предупреждений и сообщений об ошибках).</p>

<p>Начиная с Firefox 40, можно настроить опции фильтра "Logging", чтобы видеть сообщения от workers и add-ons:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/10805/console-worker-filtering.png" style="display: block; height: 355px; margin-left: auto; margin-right: auto; width: 855px;"></p>

<h4 id="Фильтрация_по_тексту">Фильтрация по тексту</h4>

<p>Чтобы видеть только сообщения, содержащие определённую строку, введите её в поле с меткой "Filter output".</p>

<h4 id="Очистка_содержимого">Очистка содержимого</h4>

<p>Наконец, Вы можете использовать эту панель для очистки всех выведенных сообщений.</p>

<dl>
</dl>

<h2 id="Интерпретатор_командной_строки"><a name="command-line">Интерпретатор командной строки</a></h2>

<p>Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Ввод_выражений">Ввод выражений</h3>

<p>Для ввода выражений просто введите в командную строку и нажмите <kbd>Enter</kbd>. Для ввода выражений, состоящих из нескольких строк, используйте комбинацию <kbd>Shift</kbd><kbd>Enter</kbd> вместо <kbd>Enter</kbd>.</p>

<p>Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Получение_переменных">Получение переменных</h3>

<p>Вы можете получить доступ к переменным на странице; это могут быть как внутренние переменные например в объекте <code>window</code> , так и переменные, добавленные с помощью Javascript кода - например с помощью <code>jQuery</code>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Автоподстановка">Автоподстановка</h3>

<p>У командной строки есть функционал автоподстановки: начните вводить несколько начальных букв - и появится всплывающее окно с возможными вариантами завершения команды:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Нажмите <kbd>Enter</kbd> или <kbd>Tab</kbd>, чтобы принять нужную подсказку, перемещайтесь вверх/вниз с помощью стрелок к другим вариантам подсказок или просто продолжайте набирать текст, если Вам не подходит ни один из вариантов.</p>

<p>Консоль выдает подсказки из области видимости текущего активного фрейма. Это значит, что если Вы уже достигли точки останова в функции, то у Вас будут доступны автоподстановки только для объектов, которые находятся в одной области видимости с этой функцией.</p>

<p>Вы можете получать такие же подсказки для элементов массива:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Объявление_переменных">Объявление переменных</h3>

<p>Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="История_команд">История команд</h3>

<p>Командная строка запоминает введённые ранее команды: чтобы перемещаться вперёд и назад по истории, используйте стрелки вниз и вверх на клавиатуре.</p>

<p>Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте <code>clearHistory()</code> <a href="/ru/docs/Tools/Web_Console#Helper_commands">helper function</a>.</p>

<h3 id="Работа_с_iframes">Работа с iframes</h3>

<p>Если страница содержит встроенные <a href="/ru/docs/Web/HTML/Element/iframe">iframes</a>, Вы можете использовать команду <code>cd()</code> чтобы изменить область видимости в консоли на область определенного iframe, и после этого Вы сможете выполнять функции, которые содержит объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Document">document</a> в этом iframe. Существует три способа выбрать iframe используя <code>cd()</code>:</p>

<p>Вы можете передать DOM-элемент для определенного iframe :</p>

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame);</pre>

<p>Вы можете передать CSS селектор для определенного iframe:</p>

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Вы можете передать глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> для определенного iframe:</p>

<pre class="brush: js notranslate">var frame = document.getElementById("frame1");
cd(frame.contentWindow);
</pre>

<p>Для переключения контекста видимости обратно к окну верхнего уровня, введите <code>cd()</code> без аргументов:</p>

<pre class="brush: js notranslate">cd();</pre>

<p>Предположим у нас есть документ, который содержит iframe:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;iframe id="frame1" src="static/frame/my-frame1.html"&gt;&lt;/iframe&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>В этом iframe определена новая функция:</p>

<pre class="brush: html notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script&gt;
      function whoAreYou() {
        return "I'm frame1";
      }
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>

<p>Вы можете переключиться на контекст iframe например так:</p>

<pre class="brush: js notranslate">cd("#frame1");</pre>

<p>Сейчас Вы сможете видеть, что глобальный объект <a href="https://developer.mozilla.org/ru/docs/Web/API/Window">Window</a> это теперь наш iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">и сможете выполнить вызов функции, определенной в этом iframe:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p>

<h3 id="Helper_commands">Helper commands</h3>

<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p>

<h2 id="Rich_output_for_objects">Rich output for objects</h2>

<p>When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:</p>

<ul>
 <li><a href="/ru/docs/Tools/Web_Console#Type-specific_rich_output">provides extra information for certain types</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Examining_object_properties">enables detailed examination of the object's properties</a></li>
 <li><a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">provides richer information for DOM elements, and enables you to select them in the Inspector</a></li>
</ul>

<h3 id="Type-specific_rich_output">Type-specific rich output</h3>

<p>The Web Console provides rich output for many object types, including the following:</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td><code>Object</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Array</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Date</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Promise</code></td>
   <td>
    <div class="geckoVersionNote">
    <p>Новое в Firefox 36</p>
    </div>

    <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p>
   </td>
  </tr>
  <tr>
   <td><code>RegExp</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Window</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Document</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
  <tr>
   <td><code>Element</code></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td>
  </tr>
 </tbody>
</table>

<h3 id="Examining_object_properties">Examining object properties</h3>

<p>When an object is logged to the console it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press <kbd>Esc</kbd>..</p>

<h3 id="Выделение_и_инспектирование_узлов_DOM">Выделение и инспектирование узлов DOM</h3>

<p>If you hover the mouse over any DOM element in the console output, it's highlighted in the page:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p>

<h2 id="The_split_console">The split console</h2>

<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p>

<p>You can use the console alongside other tools. While you're in another tool in the Toolbox, just press <kbd>Esc</kbd> or press the "Toggle split console" button in the <a href="/ru/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p>

<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h2 id="Клавиши_быстрого_вызова">Клавиши быстрого вызова</h2>

<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "web-console") }}</p>

<h3 id="Global_shortcuts">Global shortcuts</h3>

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