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

Инструментарий разработчика

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

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

Откройте данный сервис с помощью сочетания кнопок «Ctrl» + «I» + «Shift», и кликните по пиктограмме в виде смартфона в левой части навигационного меню. Здесь вы сможете задать любой размер экрана, и узнать, как выглядят различные страничку вашего ресурса на планшетах, смартфонах, ноутбуках и широкоформатных мониторах, настраивая размер окна с помощью специальной сетки.

Приколюхи

Помните писал про то, что можно повеселиться немного? Так вот, делаю на примере своего сайта. например не нравится мне красная шапка, хочу зеленую.

1. Жмем по тому месту, которое хотим изменить, правой кнопкой мыши и выбираем исследовать элемент.
2. Автоматически подсвечивается то место в режиме разработчика. Там есть красный квадратик и написан код цвета в формате Hex #ff0000. Теперь, мы хотим зеленый, жмем дважды левой кнопки мыши по коду цвета. Окно ставится активным. Удаляем это «#ff0000» и пишем «green» (ну или в формате hex #00ff00). Вуаля, красный изменился на зеленый.

Чекни статью про Adobe Flash Player. Говорят его скоро не будет…

Какие вкладки есть в консоли и за что они отвечают

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

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

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

Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.

И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.

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

Elements

Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.

Console

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

Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.

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

Sources

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

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

Network

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

Performance

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

Memory

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

Application

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

Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.

Security

Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:

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

Lighthouse

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

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

Если нет опубликованных приложений

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

Если есть опубликованные приложения

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

1. Прежде чем отправить запрос на удаление, войдите в аккаунт и создайте резервную копию данных или скачайте их. Удалив аккаунт Play Console, вы потеряете доступ к информации, которая в нем хранится.
2. Отправьте в службу поддержки запрос на перенос приложений в другой аккаунт.
3. Подтвердите перенос приложений, чтобы удалить существующий аккаунт.

Примечания

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

• При удалении аккаунта Google аккаунт разработчика не удаляется автоматически.

Раздел «Статистика»

Доступны данные:

1.1. Установок на конкретный момент — количество устройств, на которое за весь период было установлено ваше приложение. Если взять дату за последний день, который вам доступен, то получите общее количество телефонов/планшетов, у которых установлено ваше приложение на данный момент. Параметр «Установок на данный момент (пользователей)» показывает аналогичную информацию, но по пользователям.

1.2. Установок за день (устройств) и установок за день (пользователей) — параметр показывает динамику ежедневных установок на устройства и уникальному пользователю. Стоит помнить, что один пользователь может иметь несколько девайсов с одной учетной записью и установить приложение сразу на два. Если сравнить между собой эти два параметра, то они будут отличаться.

1.3. Удалений за день — показатель количества пользователей, которые удалили ваше приложение за вчерашний день. Метрика очень полезная и по сути уникальная, так как в AppStore такого отчета нет, а трекинговые системы такие данные не предоставляют.

Как считать этот коэффициент?

1.4. Ежедневный рейтинг и общий рейтинг — средняя оценка приложения пользователями за день и за весь период.

1.5. Отчет «Активные пользователи» показывает количество пользователей, которые открыли приложение хотя бы раз в сутки, там же можно посмотреть и на динамику. Эти данные доступны только тем, кто поставил в приложение SDK Google Analytics. Об этом и других отчетах, доступных в Google Analytics, мы писали ранее.

1.6. Новые пользователи — это те, которые запустили приложение впервые. Отчет доступен также после связки консоли разработчика с Google Analytics. Читайте подробно о том, как различные трекеры считают установки.

Как управлять APK-файлами

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

У APK-файла может быть один из трех статусов:

• Черновик. Файлы APK, ещё не включенные в выпуск обновлений.
• Активно. Файлы APK, доступные пользователям в данный момент.
• Перемещено в архив. Ранее активные файлы APK, которые больше не доступны пользователям.

Как найти APK-файлы

Выполните следующие действия:

1. Откройте Play Console.
2. Выберите приложение.
3. Нажмите Версия > Устройства и версии > App Bundle Explorer. 
4. В правом верхнем углу страницы App Bundle Explorer находится фильтр объектов. Его можно использовать вместе с вкладками Сведения, Загрузки и Dynamic Delivery, чтобы проверить работу различных версий и конфигураций APK-файлов вашего приложения на разных устройствах. 

Примечание. В предыдущей версии Play Console фильтр объектов назывался «Библиотека объектов».

Подробнее о том, как проверить наборы Android App Bundle с помощью App Bundle Explorer…

Ограничения размеров для APK-файлов

У приложений в Google Play есть ограничение размера для APK-файлов на момент скачивания.

После загрузки APK-файла Play Console оценивает его размер при скачивании с помощью инструмента gzip. Поскольку в Google Play применяются современные инструменты сжатия, размер приложения при скачивании может быть меньше, чем в прогнозе Play Console.

Ограничения размеров APK-файлов отличаются для разных версий Android:

• 100 МБ: для Android 2.3 и более поздних версий (API уровней 9–10, 14 и выше);
• 50 МБ: для Android 2.2 и более ранних версий (API уровня 8 и ниже).

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

Как подписать приложение

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

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

Важно! Зарегистрируйтесь в программе подписания приложений в Google Play или поместите хранилище ключей в безопасное место. Если вы потеряете доступ к хранилищу, вам придется опубликовать приложение заново с другим названием пакета и новым ключом. Кроме того, потребуется обновить описание исходного приложения и закрыть к нему общий доступ.

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

Требования к нумерации версий APK-файла для Play Console

В манифесте любого APK-файла есть код версии (параметр ), который увеличивается с каждым обновлением приложения.

Чтобы APK-файл можно было загрузить в Play Console, значение параметра не должно превышать 2100000000.

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

Примечание. Подробную информацию о версиях APK-файлов можно найти на сайте для разработчиков Android. Требования к нумерации версий в Android () отличаются от требований Play Console.

Требования к целевому уровню API для Play Console

В манифесте любого APK-файла есть код (целевой уровень API), который указывает максимальную версию Android для приложения.

Настройка приложения на новый целевой уровень API повышает безопасность и производительность, при этом позволяя работать в более старых версиях Android (до ).

Перед загрузкой APK-файла убедитесь, что он соответствует требованиям Google Play в отношении целевого уровня API. Текущие и будущие требования перечислены ниже.

Требование к уровню API	Дата вступления в силу
Android 8.0 (API уровня 26)	С 1 августа 2018 года требуется для новых приложений. С 1 ноября 2018 года требуется для обновлений приложений.
Android 9 (API уровня 28)	С 1 августа 2019 года требуется для новых приложений. С 1 ноября 2019 года требуется для обновлений приложений.
Android 10 (API уровня 29)*	С 3 августа 2020 года требуется для новых приложений. С 2 ноября 2020 года требуется для обновлений приложений.
Android 11 (API уровня 30)*	С 2 августа 2021 года потребуется для новых приложений. С 1 ноября 2021 года потребуется для обновлений приложений.

*Требования об API уровня 29 и 30 не относятся к приложениям для Wear OS.

Как только эти требования вступят в силу, в Play Console нельзя будет загрузить новые APK-файлы с более ранними целевыми уровнями API.

Совет. Технические рекомендации о том, как изменить целевой уровень API в соответствии с требованиями, можно найти в этом руководстве.

Что такое консоль?

Консоль JavaScript — это механизм, интегрированный в современные браузеры, который поддерживает встроенные инструменты разработки в интерфейсе, напоминающем командную строку. С использованием консоли разработчик может делать следующее:

• Просматривать журналы ошибок и предупреждений, возникающих на веб-странице.
• Взаимодействовать с веб-страницей, используя команды JavaScript.
• Отлаживать приложения и работать с DOM непосредственно из браузера.
• Исследовать и анализировать сетевую активность.

В целом, консоль даёт разработчику возможность писать JavaScript-код прямо в браузере, наблюдать за тем, что происходит на страницах, и управлять этими процессами.

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

Существует несколько способов вызвать консоль в Яндекс браузере:

• Через «Настройки Яндекс.Браузера»;
• Из контекстного меню страницы;
• С помощью горячих клавиш.

Через меню браузера

Все нужные средства размещены в одном разделе «Дополнительные инструменты». Отсюда можем перейти сразу в консоль, инструменты разработчика или просто открыть HTML-код страницы.

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

1. Нажимаем на стек из трёх полос в правом верхнем углу.
2. Наводим курсор мыши на пункт «Дополнительно», а затем — на элемент «Дополнительные инструменты».
3. Кликаем на кнопку «Консоль JavaScript».

Таким же способом можем открыть и HTML-код после клика на «Просмотреть код страницы», а также перейти в «Инструменты разработчика», кликнув по соответствующему пункту.

Из контекстного меню

Это один из самых простых способов открыть нужный раздел, для его реализации от нас нужно сделать лишь 3 клика:

1. Делаем клик ПКМ по любому месту на странице сайта.
2. Выбираем «Исследовать элемент».
3. В меню, в открывшейся панели, нажимаем на «Console».

Посредством горячих клавиш

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

Как включить консоль с помощью комбинаций клавиш:

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

Ещё один способ перейти в нужную панель – нажать клавишу F12.

.

Опять же, после обновления страница примет прежний вид.

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

Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.

Сайты с отзывчивым дизайном быстро адаптируют свой вид и функции на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и ответ на прикосновения – факторы, которые следует учитывать при разработке адаптивных сайтов

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

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

Больше об этом можно узнать в руководствах браузеров:

Responsive Design Mode в Firefox

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

Консоль браузера и проверка ошибок JavaScript?

Если вы считаете, что проблема на вашем сайте вызвана ошибкой JavaScript, ваш браузер Chrome может легко это проверить. Вот как.

Шаг 1. Откройте консоль либо в виде отдельной панели, либо в виде ящика рядом с другой панелью.

У вас есть два варианта открытия панели консоли:

• Windows / Linux – Нажмите Ctrl + Shift + J.
• Mac – Нажмите Cmd + Opt + J.

У вас также есть два варианта открытия консоли в виде ящика рядом с другой панелью:

• Нажмите Esc при просмотре DevTools.
• Нажмите кнопку для настройки и управления DevTools, а затем нажмите Показать консоль.

Шаг 2: Теперь вы увидите данные, отображаемые в консоли. Вот пример на скриншоте.

Поиск ошибок JavaScript

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Можно ли открыть консоль инструментов разработчика в Chrome на телефон Android?

Приложение AngularJS отлично работает на настольном компьютере, но не отображается должным образом на мобильном устройстве (отображается фактический код). Это по телефону Android.

Я хотел бы посмотреть, какие ошибки отображаются в консоли.

Можно ли открыть консоль JS в приложении chrome на мобильном устройстве (например, на рабочем столе)?

4 Ответов

Вы можете сделать это с помощью удаленной отладки, вот официальная документация . Основной процесс:

1. Подключите устройство android
2. Выберите свое устройство: дополнительные инструменты > проверка устройств из dev tools на pc/mac.
3. Авторизуйтесь на своем мобильном телефоне.
4. Счастливой отладки!!

Если у вас нет PC под рукой, вы можете использовать Eruda, который является devtools для мобильных браузеров https://github.com/liriliri/eruda Он предоставляется как встраиваемый javascript, а также букмарклет (вставка букмарклета в chrome удаляет префикс javascript:, поэтому вам нужно ввести его самостоятельно)

Если вы хотите только посмотреть, что было напечатано в консоли, вы можете просто добавить часть «printed» где-то в вашем HTML, чтобы она появилась на веб-странице. Вы могли бы сделать это для себя, но есть файл javascript, который делает это для вас. Вы можете прочитать об этом здесь:

Код доступен с Github ; вы можете скачать его и вставить в файл javascipt и добавить его в свой HTML

Вы, вероятно, можете попробовать браузер Gear, он может проверять элементы и отлаживать веб-сайт только на мобильном устройстве.

Похожие вопросы:

Можно ли выбрать несколько элементов одновременно на панели элементов инструментов разработчика Chrome? Было бы полезно удалить несколько родственных элементов или быстро переупорядочить их. Я.

Я пытаюсь открыть консоль разработчика в chrome с помощью selenium webdriver. Я это делаю из selenium импорт webdriver из selenium.webdriver.common импорт action_chains, ключей . браузер =.

Я хочу спросить, Как открыть консоль разработчика Chrome во время выполнения тестов selenium. В настоящее время, когда тесты выполняются, и я открываю консоль вручную, нажимая F12, тесты немедленно.

Учитывая, что Selenium 2 закрывает окно инструментов разработчика, который содержит мой профиль эмулятора сохраняется в моем профиле пользователя для Chrome. Есть ли способ вызвать devtools для.

Проблема не в том, что мой console.log не печатается в консоли. Проблема в том, что консоль изначально пуста. Мне нужно переключать вкладки туда и обратно, чтобы заставить его работать. Шаги для.

При отладке браузерных приложений с помощью инструментов разработчика Google Chrome можно ли изменить расположение различных панелей? В частности, в панели скриптов (хотя я полагаю, что это общий.

Поэтому я пытаюсь переключиться с Firefox на Chrome, и одно большое препятствие для меня-это переход от Firebug к инструментам разработчика Chrome. Инструменты разработчика работают нормально, я.

Однажды я смотрел на разработчика Google Chrome, и я случайно держал Ctrl и прокручивал mousewheel , когда, бац – Итак, означает ли это, что инструменты разработчика Google Chrome не являются частью.

Существует ли ограничение на количество инструментов разработчика windows в Microsoft Edge? Я не могу открыть больше одного окна инструментов разработчика. У меня есть главное окно и всплывающее.

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

Инструментарий разработчика

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

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

Откройте данный сервис с помощью сочетания кнопок «Ctrl» + «I» + «Shift», и кликните по пиктограмме в виде смартфона в левой части навигационного меню. Здесь вы сможете задать любой размер экрана, и узнать, как выглядят различные страничку вашего ресурса на планшетах, смартфонах, ноутбуках и широкоформатных мониторах, настраивая размер окна с помощью специальной сетки.

Как включить режим разработчика в Google Chrome на Android

Google любит добавлять скрытые функции в свои приложение и Google Chrome не является исключением. Google Chrome позволяет отобразить секретное меню «Параметры разработчика» на странице расширенных настроек, используя очень простой прием, который мы обсудим в этой статье.

Для начала необходимо запустить приложение Google Chrome.

Откройте меню, нажав на три точки в правом верхнем углу.

В открывшемся меню выберите пункт «Настройки».

Прокрутите меню настроек в самый низ и нажмите на опцию «О браузере Chrome».

Нажмите на «Версия приложения» 7 раз пока не увидите всплывающее сообщение «Developer options are now enabled.».

Вернитесь в настройки и Вы увидите новый пункт «Developer options».

В данный момент в этом меню только одна опция «Tracing».

В трассировке доступны три раздела:

• Default categories: содержит 117 опций, и все они включены по умолчанию.
• Disabled-by-default categories: содержит 71 опцию, и все по умолчанию выключены.
• Tracing mode: по умолчанию для этого параметра установлено значение «Record until full». Вы можете изменить значение на «Record until full (large buffer)» или «Record continuously»

Вы также можете нажать на кнопку «Record trace», но учтите предупреждение: «Трассировки могут содержать данные пользователя или сайта, связанные с активным сеансом просмотра, включая вкладки инкогнито».

Если Вы нажмете кнопку «Record trace», Chrome начнет записывать трассировку, и на панели уведомлений будет отображаться уведомление о том, что трассировка Chrome записывается. Вы можете нажать на уведомление и нажать «Stop recording», чтобы остановить запись трассировки. В уведомлении будет отображаться ссылка «Share Trace», чтобы поделиться трассировкой с другими.

Инструментарий разработчика

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

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

Откройте данный сервис с помощью сочетания кнопок «Ctrl» + «I» + «Shift», и кликните по пиктограмме в виде смартфона в левой части навигационного меню. Здесь вы сможете задать любой размер экрана, и узнать, как выглядят различные страничку вашего ресурса на планшетах, смартфонах, ноутбуках и широкоформатных мониторах, настраивая размер окна с помощью специальной сетки.