Vvmebel.com

Новости с мира ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Консоль разработчика в браузере

Учимся работать с панелью разработчика браузера. Ликбез для чайников.

Решил написать эту статью под впечатлением от некоторых пользователей, являющихся администраторами нескольких сайтов, но не имеющими представления о консоли браузера, поэтому постоянно достающими вопросами типа «как мне сменить цвет кнопки» или «у меня не работают личные сообщения, что мне делать?». А на вопросы «какие ошибки выводятся в консоли?» или «что возвращает сервер?» лишь предлагают самому посмотреть.

Вебмастер, который не умеет пользоваться инструментами или вообще не знает о них, никуда не годится, ему стоит приложить определенные усилия в своем развитии и в перерывах между созданием очередного веб-шедевра прочитать данную статью, дабы самостоятельно решать проблемы на своем сайте или, по крайней мере, давать более полную информацию на запросы службы поддержки.

Скажу сразу, в данной статье не будет описываться весь функционал панели, но подробно будет рассмотрен функционал и возможности нескольких, наиболее интересных для начинающего веб-мастера вкладок.

Панель разработчика браузера — наверное самый главный инструмент настоящего вебмастера, который позволяет сложить полную картину происходящего при загрузке страницы сайта и после нее.

Информации получаемой из панели зачастую достаточно, чтобы указать на причину возникновения практически любой проблемы на сайте, пренебрегать этой информацией, как минимум, неразумно.

В наше время, разработчики браузеров не забывают о панели разработчика, она обязательно имеется в любом, более менее современном браузере и можно сказать, что ее наличие является стандартом, так что вы, скорее всего, найдете ее в своем браузере, даже если ранее не подозревали о ее существовании.

Браузеров много, нюансов работы с ними еще больше, но в качестве примера я буду приводить панель браузера Chrom, но пугаться не стоит, принцип ее работы практически у всех браузеров одинаков и сравнивая функционал одного браузера с другим, вы зачастую найдете много общего между их панелями.

Итак, давайте посмотрим на эту панель.

Нажмите клавишу F12 и появиться панель разработчика.

Сразу разбежались глаза, куда смотреть, на что нажимать непонятно. Давайте будем идти по порядку.

По-умолчанию открыта первая вкладка «Elements».

В этой вкладке выводиться html-код текущей страницы.

Внутри вкладки можно получить полную информацию не только о расположении html-блоков, но и просмотреть какие именно js и css-файлы подключаются при ее загрузке и даже ознакомиться с содержимым этих файлов, просто нажав на соответствующую ссылку в коде страницы.

Справа от кода страницы выводится колонка с css-стилями и правилами действующими для текущей страницы или html-блока, который будет вами выделен.

Вот тут и начинаются чудеса. Вкладка позволяет редактировать как html-код, так и css-правила.

Выберите интересующий html-блок, выделите его и в правой колонке отобразятся его css-стили. Нажмите правой кнопкой мыши на этом блоке и выберите одно из предложенных действий «Edit as HTML» и вы сможете редактировать html-код данного блока. Результат данного редактирования вы увидите сразу по завершению, все редактирование происходит, так сказать, в режиме онлайн, сразу на странице выводится результат.

Такая же картина с редактированием css-правил для выделенного блока. Вы можете просмотреть какие стили действуют на этот блок в данный момент и, при необходимости скорректировать их, отключить ненужные или наоборот — добавить какое-то свое правило. Результат этих действий будет применен к элементу сразу же.

Не стоит думать, что изменения html и css в этой вкладке каким то образом влияют на реальное положение дел на вашем сервере и вы реально редактируете html и css файлы вашего сайта. Все это происходит лишь в браузере и все изменения вам надо будет перенести в эти файлы самостоятельно.

Если с html-файлами вроде все понятно, один файл — одна страница, то стили страницы могут складываться из множества css-файлов и какие именно файлы надо править необходимо знать точно.

Смотрим в колонку со стилями и замечаем, что рядом с каждым стилевым блоком выводится не только ссылка на css-файл, но и строка, где это правило размещается внутри указанного файла. Воспользовавшись этой информацией вы легко найдете нужный файл на сервере и место для редактирования внутри этого файла.

Освоив данную вкладку вы сможете решать вопросы связанные с внесением небольших изменений в верстку страницы и стилевое отображение ее отдельных элементов, что существенно сэкономит ваше личное время и нервы. Данная вкладка обязательна к изучению в первую очередь.

Переходим к следующей вкладке — «Network».

Данная вкладка не дает таких больших возможностей по редактированию как предыдущая, но информация, получаемая в ней не менее ценна. Тут мы можем отслеживать все запросы, отправляемые к нашему серверу во время загрузки текущей страницы и получить ответы нашего сервера в результате этого запроса. Возможно, эта информация слишком сложна для начинающих вебмастеров, где еще мы можем узнать ответ на вопрос «Почему когда я отправляю личное сообщение в чате оно не отправляется?») Если вы решите найти ответ на этот вопрос и вопросы подобные этому сами, то смотрим во вкладку «Network» во все глаза.

Страницы современных сайтов уже не являются статичными html-болванками как это было ранее, скрипты страницы могут сами постоянно посылать различные запросы к серверу или при определенных действиях пользователя, вот они то и будут нам интересны в первую очередь.

Давайте рассмотрим, какое то пользовательское действие которое отправит запрос на сервер и получит от сервера ответ, например, изменение отправление личного сообщения из приватного чата. Открываем страницу чата, открываем панель разработчика на вкладке «Network» и пытаемся отправить сообщение в чате.

Сразу после того, как будет нажата кнопка «Отправить» во вкладке панели мы сможем наблюдать запрос к файлу сервера, а если нажмем на него, то получим полную информацию о том в какой именно файл отправлялись данные и какие именно данные.

Ответ от сервера можно получить во вкладке Preview данного запроса. Очень важно, чтобы ответ был ожидаемым, тогда и произведенное пользователем действие будет выполнено, иначе возникает ошибка. Если она возникает, то как раз ответ сервера и даст знать о причинах проблемы.

Читать еще:  Выскакивают баннеры в браузере

Сервер может возвратить текст ошибки типа «Warning. » или «Fatal Error. «, либо возвратить номер ошибки сервера, например 404 или 500, а может такое случиться, что вкладка ответа будет пуста — ответ не был получен. Эта информация очень поможет в решении возникшей проблемы в службе поддержки куда вы с ней обратитесь, она укажет на возможные причины ее возникновения, а зачастую явно покажет, куда надо копать.

Так что не проходим мимо этой вкладки стороной, информация получаемая из нее очень интересна и полезна, хотя бы для общего развития. Всегда полезно знать, что куда уходит и откуда что приходит)

Иногда бывает так, что вроде нажали на кнопку рейтинга или отправили сообщение в личном чате, а ничего не происходит, посмотрели во вкладку «Network» панели браузера, но запросы к серверу просто не отправляются, вероятнее всего, возник конфликт в js-скриптах сайта, значит самое время перейти во вкладку «Console».

Вкладка «Console» выводит лог проблем возникших при загрузке страницы в js-скриптах, чтобы их было можно отследить. Там же могут выводится ошибки возникшие при попытке загрузить отсутствующий файл при загрузке текущей страницы. Критичные проблемы отображаются красным цветом и зачастую именно их решение возвращает работоспособность всему сайту, если она была нарушена.

Информация из вкладки Console очень полезна для вебмастера, позволяет сразу отследить возникновение конфликтов в скриптах при загрузке страницы или банальные ошибки. Текст ошибки сообщает о ее типе и месте ее возникновения, указывается js-файл и место в этом файле, где ошибка была замечена, что помогает в решении этих ошибок.

Загляните в эту вкладку при загрузке страниц на своем сайте, что вы там увидите? Много ли красных сообщений? Очень часто достаточно только одного сообщения об ошибке в этой вкладке, чтобы все скрипты на сайте перестали работать, поэтому пренебрегать этой информацией явно не стоит, а если заметили записи в консоли, то стоит предпринять действия для выявления и устранения проблем. В идеале в консоли красного вообще не должно быть.

Надеюсь теперь, ознакомившись с перечисленными вкладками панели разработчика, вам станет проще работать со своими сайтами, выявлять и устранять возникшие проблемы не обращаясь к специалистам или предоставлять этим специалистам более исчерпывающую информацию о положении дел.

Консоль разработчика

Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но все же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.

Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.

Google Chrome

В её JavaScript-код закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.

  • В консоли мы можем увидеть сообщение об ошибке, отрисованное красным цветом. В нашем случае скрипт содержит неизвестную команду «lalala».
  • Справа присутствует ссылка на исходный код bug.html:12 с номером строки кода, в которой эта ошибка и произошла.

Под сообщением об ошибке находится синий символ > . Он обозначает командную строку, в ней мы можем редактировать и запускать JavaScript-команды. Для их запуска нажмите Enter .

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .

Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

  • Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
  • В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Консоль браузера Яндекс

Современные браузеры могут использоваться не только как программа для просмотра сайтов, но и для самостоятельной разработки веб-страниц. Не стал исключением и Яндекс Браузер, в котором разработчики сделали максимально удобный и понятный пользователям инструмент под названием консоль. С его помощью можно просматривать код веб-страницы, отслеживать выполнение скриптов, находить ошибки и многое другое. В этой статье будут рассказаны способы, как открыть консоль в Яндекс Браузере.

Читать еще:  Увидеть пароль под звездочками в браузере

Возможности консоли

Веб-разработчикам консоль будет полезна по ряду причин, ведь с ее помощью можно:

  • отслеживать работу скриптов;
  • наблюдать за всеми действиями пользователей на сайте;
  • находить ошибки в коде.

Для рядовых пользователей Яндекс Браузера этот инструмент может оказаться невостребованным. Тем не менее в некоторых ситуациях взаимодействие с консолью все-таки требуется. Например, если на сайте регулярно возникает ошибка или прекращен доступ к какой-нибудь странице. В этом случае пользователь может обратиться в техническую поддержку интернет-ресурса, где его могут попросить предоставить скриншоты логов.

Способы открытия

Воспользоваться этим инструментом Яндекс Браузера можно двумя способами:

  • через настройки;
  • с помощью горячих клавиш.

Открытие через настройки

В этом случае следует выполнять следующую последовательность действий:

1. Запустить Яндекс Браузер.

2. Открыть меню. Значок меню расположен в правом верхнем углу программы и выглядит как три полоски, расположенные горизонтально.

3. Выбрать раздел «Дополнительно» в конце списка.

4. Выбрать подраздел «Дополнительные инструменты».

Здесь содержатся все необходимые функции для взаимодействия с консолью.

Открытие с помощью горячих клавиш

Для более быстрого запуска инструментов браузера разработчиками предусмотрены сочетания горячих клавиш. Они работают независимо от выбранного в данный момент языка и включенной кнопки CapsLock. Такой способ позволяет запускать консоль, не отрываясь от работы с веб-страницами.

Находясь на каком-либо сайте, следует нажать следующие сочетания кнопок:

  • «Ctrl» + U – для просмотра исходного кода страницы;
  • «Ctrl» + «Shift» +I – открыть инструменты разработчика;
  • «Ctrl» + «Shift» +J – включить саму консоль JavaScript.

При запуске исходного кода перед пользователем предстает такая картина:

Непосвященному человеку будет сложно разобраться в этом наборе символов и команд. А вот люди, занимающиеся веб-разработкой, смогут найти здесь много полезного для себя.

Вызов инструментов разработчика откроет новое окно в правой части экрана.

Отсюда же можно будет перейти во вкладку консоли, нажав соответствующий раздел «Console».

Здесь перед пользователем предстает список проблем, возникших при открытии страницы. И также могут быть показаны ошибки при попытке скачать какой-либо файл или загрузить что-либо. Проблемные ситуации подсвечиваются красным, для того чтобы человек сразу мог увидеть их в списке. В некоторых случаях достаточно одной ошибки, для того чтобы работа браузера с данным сайтом была прекращена. В идеале красных элементов во вкладке «Console» быть не должно.

Веб-разаработчики по достоинству оценят вкладку «Console», ведь она поможет сразу отследить конфликтные ситуации в работе скриптов. На экране появляется информация о типе и месте нахождения ошибки, указывается js-file и проблемный элемент в нем.

Теперь, зная, как запустить консоль в Яндекс Браузере, станет проще взаимодействовать с веб-страницами и предпринимать действия по устранению возникающих ошибок. Если какой-то сайт перестает работать, то всегда можно будет написать в техническую поддержку и снабдить сотрудников всей необходимой информацией.

QA evolution

В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью», рассмотрим Консоль в браузере Chrome. Выглядит вот так:

Консоль в браузере Chrome

На самом деле Консоль в браузере Chrome — это инструмент, с помощью которого можно не только посмотреть наполнение страницы, выводимой браузером, а также существующие ошибки (что чаще всего и делают тестировщики), но и исправить эти ошибки намного проще и быстрее (что чаще всего делают девелоперы), замерять различные показатели и манипулировать страницей.

Как открыть консоль в браузере Chrome:

— нажав одновременно клавиши Ctrl + Shift + I;

— ПКМ по элементу страницы –> Просмотреть код;

— меню браузера –> Дополнительные Инструменты –> Инструменты Разработчика.

Располагаться она может внизу страницы или сбоку, можно открепить в отдельное окно. Итак, рассмотрим по отдельности каждую вкладку открытой консоли.

Итого в ней есть 8 вкладок, каждая из которых отображает определенные данные:

1 – Elements (содержит весь html/css код страницы и позволяет выбрать элементы для исследования, а также редактировать их)

2 – Console (отображает наличие/отсутствие ошибок/предупреждений в коде)

3 – Sources (позволяет выполнять операции с кодом страницы)

4 – Network (отслеживает время исполнения определенных запросов и сами запросы)

5 – Timeline (измеряет время загрузки страницы)

6 – Profiles (позволяет создавать JavaScript, профили CPU)

7 Resources (позволяет просмотреть определенные сохраненные данные)

8 – Audits (проводит проверки определенных параметров)

Теперь пройдемся по каждой из них в отдельности и поподробнее:

Панель Elements

Панель Elements показывает разметку страницы точно так же, как она рендерится в браузере. Можно визуально менять наполнение сайта посредством изменения html/css кода в панели элементов. Как вы, наверное, заметили (а может и нет), в левом окошке отображается html–документ, в правом – css. Проводя нехитрые манипуляции с данными можно изменить наполнение и дизайн открытой страницы. Например, можно поменять текст в окне, если редактировать его в теле html, а также изменить шрифт страницы поменяв его значение в поле css. Но это не сохранит введенных данных, а поможет просто визуально оценить примененные изменения. Помимо этого, можно просмотреть код конкретного элемента страницы. Для этого нужно райткликнуть его и выбрать команду «Посмотреть код».

В панели Elements есть одна очень прекрасная функция. Можно посмотреть, как бы выглядела открытая страница на каком-нибудь девайсе с другим расширением экрана. Кликом по иконке телефона слева от вкладки Elements вызывается окно, в котором можно менять размер предполагаемого экрана, таким образом эмулируя тот или иной девайс и контролировать отображение страницы на нем. Выглядит это так:

Эмулятор девайсов

При клике на кнопку Select Model выпадет дропдаун с огромнейшим выбором девайсов. Выбираете что вам нужно – и вуаля! Страница отображена так, как если бы это был девайс. Таким образом панель Elements можно использовать не только для просмотра или редактирования страницы, но и для эмуляции устройств отображения. Все унифицировано и доступно в Хроме!

Читать еще:  Почему пишет яндекс браузер не отвечает

Панель Console

Самая популярная вкладка тестировщиков, поскольку именно здесь мы видим найденные при выполнении скрипта ошибки в коде. Также данная панель отображает различного рода предупреждения и рекомендации (как на картинке выше). Все выводимые во вкладке сообщения можно фильтровать. В ошибке также отображается ее расположение и кликнув по нему вы переместитесь во вкладку Sources, где ошибка будет выведена в общей конструкции страницы.

Очистить поле вкладки Console (в случае, если вам требуется удалить сообщения о предыдущих ошибках) можно кликнув иконку перечеркнутого круга. Фильтровать сообщения в консоли можно по типу — ошибки, предупреждения, инфо, стандартный вывод, сообщения отладчика, исправленные — выбрав одну из доступных опций консоли.

Панель Sources

Как правило, в данной вкладке проводится отладка кода программистами. Она имеет 3 окна (слева направо):

  1. Зона исходных файлов. В ней находятся все подключённые к странице файлы, включая JS/CSS.
  2. Зона текста. В ней находится текст файлов.
  3. Зона информации и контроля.

Панель Sources

В зоне исходных файлов выбирается необходимый элемент, в зоне текст выполняется непосредственно его отладка, а в зоне информации и контроля можно запускать/останавливать отлаженный код.

Панель Network

Основная функция данной вкладки – запись сетевого журнала. Она дает представление о запрашиваемых и загружаемых ресурсах в режиме реального времени. Можно выявить, загрузка и обработка каких именно ресурсов занимает большее количество времени, чтобы впоследствии знать где и в чем именно можно оптимизировать страницу.

Также стоит отметить что именно в этой вкладке в режиме Large request rows можно просмотреть запросы, которые отправляются на сервер, а также ответы, которые приходят с него, их содержание и характеристики.

Панель Performance

Данная вкладка используется при необходимости полного обзора затраченного времени. На что оно было потрачено, как много его потребовалось на тот или иной процесс. Здесь отображается абсолютно вся активность, включая загрузку ресурсов и выполнение Javascript.

Панель Memory

Данная панель дает возможность профилировать время исполнения и использование памяти веб приложением или страницей, таким образом помогая понять где именно тратится много ресурсов и как можно оптимизировать код.

CPU profiler предоставляет информацию по времени, затраченному на выполнение Javascript.

Heap profiler отображает распределение памяти.

JavaScript profile детализирует, куда именно ушло время при выполнении скриптов.

Панель Application

Предназначена для исследования загруженных элементов. Позволяет взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и т.д. В данной вкладке можно почистить куки, открыв данную вкладку и кликнув иконку перечеркнутого круга

Панель Audits

Данная панель функционирует в качестве анализатора страницы во время ее загрузки. В результате проведенного аудита появляются рекомендации по оптимизации загрузки страницы, увеличению скорости отклика. Примеры способов оптимизации можно увидеть в окне ниже.

Панель Secuirity

Security Panel показывает информации о каждом запросе и подсвечивает те, из-за которых сайт не получает заветной зелёной иконки в статусе.

Кроме того можно получить следующую информацию:

  • о проверке сертификата, подтвердил ли сайт свою подлинность TLS-сертификатом;
  • TLS-соединении, обозначая использует ли ваш сайт современные безопасные протоколы;
  • безопасность подгружаемых второстепенных источников.

Как скопировать сообщение из консоли ошибок

Если при загрузке страниц или при работе с интерактивными элементами сайта возникла проблема, причину поломки поможет определить информация из консоли браузера. Воспользуйтесь инструкциями ниже, чтобы скопировать сообщение из консоли ошибок и передать его в службу поддержки. Для этого выберите браузер, в котором возникает проблема:

Яндекс.Браузер

Откройте меню → Дополнительно → Дополнительные инструменты → Консоль JavaScript .

Или нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Google Chrome

Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Opera

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Mozilla Firefox

Откройте меню → Веб-разработка → Инструменты разработки .

Или нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Microsoft Edge

Internet Explorer

  • 8 и выше
  • 7 и ниже

Нажмите правой кнопкой мыши в любой области экрана и выберите пункт Проверить элемент .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Safari

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Сеть .

Как скопировать сообщение из консоли ошибок

Если при загрузке страниц или при работе с интерактивными элементами сайта возникла проблема, причину поломки поможет определить информация из консоли браузера. Воспользуйтесь инструкциями ниже, чтобы скопировать сообщение из консоли ошибок и передать его в службу поддержки. Для этого выберите браузер, в котором возникает проблема:

Яндекс.Браузер

Откройте меню → Дополнительно → Дополнительные инструменты → Консоль JavaScript .

Или нажмите правой кнопкой мыши в любой области страницы, выберите пункт Исследовать элемент и перейдите на вкладку Console .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Google Chrome

Откройте меню → Дополнительные инструменты → Инструменты разработчика и перейдите на вкладку Console .

Если для просмотра требуется прокрутка по вертикали, сделайте несколько снимков.

Для получения дополнительной информации вы также можете сделать скриншот содержимого вкладки Network .

Ссылка на основную публикацию
Adblock
detector