Tooprogram.ru

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

Visual studio отладка javascript

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.

Отладка для Internet Explorer (в Visual Studio)

Существует много инструментов для отладки javascript. Эта статья посвящена отладке на платформе Windows под Internet Explorer.

Есть два основных отладчика:

Microsoft Script Editor поставляется вместе с Microsoft Office. Есть бесплатная версия — это не то. Нужна именно та, которая в поставке Microsoft Office, причем она не ставится по умолчанию. Для установки нужно найти и включить соответствующий пункт в меню.

Microsoft Visual Studio — среда для разработки продуктов на самых разных языках. Она также позволяет отлаживать javascript-сценарии, как, впрочем, и многое другое.

На момент написания статьи автору приходилось для отладки редактор из Microsoft Office 2007 и Microsoft Visual Studio 2005. Существенных отличий в отладке, в общем-то, нет, но Visual Studio удобнее и предоставляет больше возможностей.

Оба этих редактора/отладчика настраиваются похожим образом, но в статье описана работа преимущественно с Visual Studio. Впрочем, настройка MSE примерно аналогична, поэтому инструкции отчасти применимы и там.

Установка

Microsoft Script Editor

При установке Microsoft Office, в подменю «средства Office», нужно отметить ветку редактор сценариев — веб-сценарии — веб-отладка, как показано на рисунке.

После этого, при стандартных путях, редактор/отладчик Microsoft Script Editor(MSE) будет установлен в C:Program FilesCommon FilesMicrosoft SharedOFFICE12MSE7.EXE.

Microsoft Visual Studio

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

Если у Вас, скажем, профессиональная версия Visual Studio, то при установке, чтобы не засорять систему неиспользуемыми компонентами, оставим только одну галочку — напротив web-development. В дальнейшем всегда можно будет поставить что-то еще, если, например, понадобится написать программу на C#.

Бесплатная редакция Visual Studio называется Visual Web Developer. Она также позволяет отлаживать javascript, но не обладает многими возможностями профессиональной версии.

Галочки для отладки

Чтобы вызывать отладчик из Internet Explorer, нужно убрать две галочки из свойств, запрещающие отладку. Здесь и далее, будет описан IE6, в 7ке все примерно аналогично.

Галочки находятся в меню «Свойства Обозревателя» — вкладка «Дополнительно».

После установки галочек и установки Visual Studio/MCE нужно перезапустить Internet Explorer, закрыв все окна.

Способы запуска отладчика

Для Visual Studio/MSE общие варианты такие:

1. Перед загрузкой страницы отметить в IE «Вид — Отладчик сценариев — прервать на следующей инструкции». Затем загрузка страницы автоматом вызовет отладчик на первой строке javascript-кода, если она есть. Там же можно напрямую выбрать «Отладчик сценариев — Открыть».

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

2. В javascript-коде поставить в нужное место оператор debugger. Например:

Когда выполнение дойдет до строки debugger — вызовется отладчик точно также, как в п.1. Этот способ, вообще говоря, входит в стандарт языка и работает со всеми отладчиками, включая firebug.

Вызов отладчика этим способом осуществляется через окошко с выбором:

В этом окошке можно выбрать между MSE/Visual Studio. Если отладчик уже запущен, то также можно выбрать, запускать ли новый экземпляр программы(New instance) или использовать работающий.

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

3. В Visual Studio Pro есть возможность подключаться к процессу: «Tools->Attach to process», и отлаживать код самого приложения или, например, запущенные скрипты. В MSE это делается через меню «Debug->Processes». При этом открывается список процессов, из них нужно выбрать соответствующий iexplore.exe и нажать Attach.

Отладка

После подключения браузера к отладчику, в Visual Studio можно открыть окно Script Explorer (в MSE: Running Documents), выбрать нужный javascript-файл, и поставить там breakpoint(ы), и они будут работать.

Если нужный breakpoint уже пройден на момент подключения — в браузере можно нажать refresh. Выполнение остановится на нужном месте.

Среди вспомогательных окон Visual Studio, для отладки javascript полезны:

  • Locals — список переменных в текущей области видимости
  • Watch — отслеживание переменных и, вообще говоря, любых выражений
  • Script Explorer — список текущих документов и скриптов
  • Call Stack — стек с возможностью перемещаться по нему
  • Immediate Window — javascript-консоль

Окошки можно включать-выключать из меню «Debug — Windows», или через выпадающий список на панели «Debug».

Если Script Explorer вдруг нигде нет, то его можно добавить. Для этого на свободном месте панели нужно кликнуть правой кнопкой, и выбрать Customize. В появившемся окошке слева в Categories выбрать Debug, а справа — найти кнопку Script Explorer, и перетащить ее, но не внутри окошка, а вне его — на панель Visual Studio.

Расположение и тип окон можно менять самыми разными способами, вот пример типичной конфигурации (Visual Studio открыта не на весь экран):

В зависимости от Вашего монитора, окошки Locals/Watch бывает удобно сделать плавающими(floating), или перенести вниз экрана.

Окно Immediate в этой конфигуранции спряталось внизу(опция auto-hide, ставится через правый клик по заголовку окна), и вызывается по клику на заголовке.

Горячие клавиши

Работают классические hotkeys:

  • F10 — выполнить строку и перейти к следующей (Step Over)
  • F11 — выполнить строку, а если это функция — перейти внутрь функции (Step Into)
  • Shift+F11 — выполнить остаток текущей функции и остановится сразу после return (Step Out)
  • F5 — продолжить выполнение до следующего breakpoint или ошибки (Continue)
  • Shift-F5 — прекратить отладку

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

Приложение. Видео.

В видео Первый запуск и настройка показан запуск первым способом и настройка Visual Studio сразу после ее установки.

В видео Отладка загруженной страницы открыт адрес в IE6, и показано как через attach подключить к нему Visual Studio и запустить отладку с breakpoint+refresh.

Читать еще:  Java setup что это

Отладка Node.js в Visual Studio

Quick start

Устанавливаем Node.js и экстеншен NodeVsDebugger. Также его можно установить из галереи расширений: Alt+T,U выбираем Online, вводим в поиск “node debug” и давим download.
Далее открываем js-документ, ставим брейкпоинт, давим Ctrl+E,Ctrl+D, вуаля!

Что уже готово

  • Уже есть Run/Step into/Step over/Step out/Run to line, Locals, Watches, инспекция любых идентификаторов в редакторе, Custom inspector для строк и ещё всякое по-мелочи;
  • Отладка отдельно болтающихся скриптов (Ctrl+E,Ctrl+D);
  • Отладка проекта с автоматическим выбором дебаггера (Ctrl+E,Ctrl+A, можно смело перебиндить на F5: проекты не настроенные на отладку в ноде это не затронет);
  • Просмотр (и отладка) встроенных в ноду скриптов (pic);
  • Подключение к ноде на удалённом хосте (только для проектов);
  • Маппинг удалённых скриптов, если удалённая папка подключена, например, через SAMBA или SSHFS.

Отладка поектов
На данный момент отладка проектов прикручена в виде костыля, и отлаживать в ноде можно практически любой проект, будь то веб-сайт, веб-приложение, или вообще C# или C++ makefile project. Для этого надо сначала настроить наш дебаггер, в меню Debug→Node.js Debugging, или просто нажав Alt+D,E,C.
У меня не было времени сделать нормальный UI для настроек, поэтому сейчас они представляют из себя просто JSON-файл (с комментами). В комменте в начале файла описаны доступные настройки и что они означают. Сохранются они в файл с именем «.nodevsdbg» в корне веб-сайта или рядом с файлом проекта.
После того, как настройки сделаны, можно запускать дебаггер с помощью Ctrl+E,Ctrl+A. Я рекомендую забиндидь на эту команду клавишу F5, и тогда для проектов где нет настроек нодного дебаггера, или он выключен в конфиге (mode=«off») будет запускаться стандартный дебаггер.
Естественно, я планирую потом сделать nodejs-project которому будет прописан кастомный дебаггер, и все эти костыли не понадобятся.

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

Чего пока не хватает

  • Редактирования значений;
  • Нормального отображения функций (с исходным кодом);
  • Code completion в watches;
  • Поддержки Immediate window;
  • Поддержки окна Autos, и отображения там контекстов;
  • Показывать где на самом деле был установлен брейкпоинт;
  • Условия и hit-count в брейкпоинтах;
  • Переключателя режима отлова эксепшенов;
  • Полноценного Attach to process для ноды, запущенной без —debug;
  • Нормального подключения к удалённой ноде (сейчас запускается фейковый процесс cmd.exe);
  • Отладки node cluster;
  • Edit and Continue (оно же LiveEdit в V8);
  • Отладки нативного кода и JS в одном экземпляре студии;
  • Отладки JS в хроме и производных от него браузерах (там тот же дебаг-протокол);
  • Поддержки source maps и отладки typescript;
  • Пакета для VS 2010;
  • Иконок.

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

Как это делалось

В ноде уже есть готовый бэкенд для дебаггера, к которому можно достучаться просто подключившись по http-подобному протоколу на порт 5858 (по-умолчанию). Протокол основан на обмене сообщениями в JSON-формате. Сам протокол не является нодо-специфичным, а унаследован от движка V8. Краткое описание можно найти здесь. Этого документа достаточно для первичного знакомства, однако, как выяснилось позже, там полно ошибок, недосказанности, и тупо опечаток.
В студии же есть готовый хороший GUI для дебаггера. Естественно, я решил не изобретать велосипед, а просто соединил эти две части. Интерфейсы и понятия обоих частей довольно похожи, ведь тут тяжело изобрести что-то новое. В протоколе V8 есть команды управления отлаживаемым процессом (Break, Go, Step), есть опрос текущего состояния (Stacktrace он же Backtrace), есть какие-то методы для просмотра переменных, выражений и выполнения кусочков кода. Да и много чего другого…

С какими проблемами я столкнулся:
— При первой же попытке отладки http-сервера я нарвался на зависание дебаггера при каждом шаге отладки. Виноват в этом был километровый backtrace, возникший из-за хитрой сериализации (она называется mirror), которая пытается сериализовать Buffer с отдельным описательным объектом на каждый байт буффера. Починилось это включением inlineRefs.
— По-умолчанию строки показываются сокращёнными, как на следующем скриншоте. Ничего плохого в этом нет, благо целиком строку можно тоже просмотреть: по запросу пользователя мы идём за строкой с maxStringLength = -1

Всё это можно понять, заглянув в debug-debugger.js там же можно посмотреть и другие команды, не описанные в документе на вики.
— Со стороны студии проблемой было отсутствие адекватных примеров по Custom Debug Engine. У меня не было времени на детальное изучение документации в MSDN (а там 100500 интерфейсов, структур, енумов и прочего), хотя в итоге я туда часто поглядывал. Единственный официальный пример — это написанный под старую студию простенький дебаггер нативного C, автоматически сконверченный в проект 2010 студии. Он состоит из большого куска на managed C++, который нам не нужен. И, собственно, обёрток над дебажными интерфейсами студии, написанными во времена C#2.0, ужасно многословно.
— Регистрацию движка я переделал, причём дважды. В примере регистрация движка была сделана старым regsvr32 «mixed-mode C++ сборка». От этой сборки мы избавились, и регистрацию я сделал просто явным добавлением ключей в реестр. Но с регистрацией тоже было не всё так просто, у 2012й студии немного поменялись места, где она ищет движки для отладки. В итоге всё само собой полечилось, когда я сделал пакет (package) для дебаггера и добавил ему RegistrationAttribute.
— Чехарда с названием кнопок, пунктов меню и команд. Разобраться помогла эта статья.
— Вместо стандартной библиотеки для парсинга/сериализации JSON я взял Newtonsoft.Json. Она мне больше нравится, да и работает шустрее.

Читать еще:  Как поставить java 64 bit

Как настроить VS Code для разработки на JavaScript

Создание удобного рабочего окружения.

Содержание

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

  • отладчик кода
  • встроенный терминал
  • удобные инструменты для работы с Git
  • подсветка синтаксиса для множества популярных языков и файловых форматов
  • удобная навигация
  • встроенный предпросмотр Markdown
  • умное автодополнение
  • встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

  1. Установите Node.js используя пакетный менеджер вашей операционной системы.
  2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
  3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json , то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

VS Code содержит встроенный отладчик кода. Вы можете, например, отметить брейкпойнты (точки остановки) и следить за состоянием приложения в реальном времени.

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

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Бесплатный курс по настройке окружения для работы в современной экосистеме JavaScript.

Hexlet — практические курсы по программированию.
Видео-курсы, настоящая практика, стажировка и сертификация.

Отладка JavaScript в Google Chrome и Visual Studio Code

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

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

В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.

Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.

Предустановки

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js ( как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

Примечание переводчика: видео на английском языке.

В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью — вы попали по адресу и правильно делаете, что читаете эту статью!

Основы отладки

Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова ( breakpoints) для того, чтобы остановить выполнение программы в определенном месте.

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

После установки точки останова ( breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:

  • продолжить выполнение программы
  • пошагово пройтись по всем этапам выполнения программы — строка за строкой
  • выйти из текущей функции, в которой вы находитесь
  • перейти к выполнению следующей функции

У вас также будет доступ к просмотру стека вызовов ( call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.

Отладка в Google Chrome

Чтобы начать отладку приложения в браузере ​​Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:

Когда выполнение программы дойдет до строки с оператором debugger , приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.

Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:

Давайте разберемся, что мы видим на вкладке Sources .

Вкладка Sources

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

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

Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.

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

Точка останова — преднамеренная остановка или приостановка выполнения программы

Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:

Вкладка Scope

На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости ( Local), глобальная область видимости ( Global) и раздел сценариев ( Script).

В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:

Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log() .

Вкладка Watch

Как уже упоминалось ранее, помимо просмотра переменных на вкладке «Scope», вы также можете определить переменные, значения которых вы хотели бы отслеживать на всем этапе выполнения программы.

Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).

Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :

Пошаговое выполнение, стек вызовов и список точек останова

Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов ( call stack) и т. д.

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

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

Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова ( conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.

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

Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === » :

В случае отладки приложения Quick Chat , если вы нажмете кнопку входа в систему без имени пользователя, будет запущена эта точка останова. В противном случае код будет продолжать выполняться как обычно.

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

Отладка в Visual Studio Code

Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.

Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.

Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.

Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :

Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок ( bug).

Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:

Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.

Теперь, когда мы познакомились с вкладкой Debug , нам необходимо создать конфигурацию, которая укажет редактору VS Code, как ему отлаживать наше приложение.

VS Code хранит конфигурацию отладки в файле launch.json внутри папки .vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки .vscode

Затем из этого списка выберите пункт «Chrome»:

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