Как открыть консоль в хроме горячие клавиши
Перейти к содержимому

Как открыть консоль в хроме горячие клавиши

  • автор:

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

В каждом браузере есть свой инструмент разработчика – это то, что многие называют просто «консолью», рассмотрим Консоль в браузере 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

Панель console

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

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

Панель Sources

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

Панель Sources

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

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

Панель Network

Панель Network

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

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

Панель Performance

Performance панель

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

Панель Memory

Панель Memory

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

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

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

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

Панель Application

Панель Application

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

Панель Audits

Аудит панель

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

Панель Secuirity

Security панель

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

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

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

На самом деле, инструменты разработчика ( Консоль в браузере Chrome ) – очень полезная штука, которая и нам, тестировщикам, частенько может пригодиться. Еще больше полезной информации на сайте https://developers.google.com/web/tools/chrome-devtools/

Все о тестировании и качестве ПО
  • Тестирование безопасности веб приложений
  • Тестирование производительности
  • Баги на 1 апреля
  • Тестировщик может справиться лучше?
  • Качество программного обеспечения

Инструменты разработчика (Chrome DevTools)

Инструменты разработчика (Chrome Dev Tools) можно найти в Chrome через меню Дополнительные инструменты | Инструменты разработчика или вызвать через горячие клавиши Ctrl+Shift+I.

Elements

Drag-and-drop

В панели «Элементы» вы можете перетащить любой HTML-элемент и изменить его положение на странице

Ссылка на текущий выбранный элемент в консоли

Выберите узел в панели «Элементы» и введите в консоли $0, чтобы сослаться на него. Если вы используете jQuery, вы можете ввести $($0) для доступа к API jQuery этого элемента.

Добавление CSS и редактирование состояние элемента

В панели «Элементы» есть две полезные кнопки. Первая позволяет добавить новое свойство CSS для любого выбранного вами селектора.

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

Скриншот одного элемента

Выберите элемент и нажмите cmd-shift-p (или Ctrl-Shift-P в Windows), чтобы открыть контекстное меню, и выберите «Сделать снимок элемента».

Поиск элемента с помощью селекторов CSS

При нажатии cmd-f (Ctrl-F в Windows) откроется окно поиска в панели «Элементы». Вы можете ввести любую строку, чтобы найти соответствия в исходном коде, или вы можете использовать селектор CSS, чтобы Chrome показал вам искомый элемент.

Console

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

Если команд несколько, то используйте Shift+Enter для перехода на новую строку, иначе будет выполнена команда в строке.

console.log()

Самый простой способ вывести текст в лог — это команда console.log():

 console.log("Hello Kitty"); 

Можно подставлять переменные в строку, используя символ %s.

 var cat = "Murzik"; console.log("Hello %s", cat); 

Если использовать %c, то можно управлять стилями вывода сообщения.

 console.log("%c Hello Kitty", 'font-size: 24px; background: teal'); 

console.warn()

Кроме стандартного log() можно выводить сообщение в виде предупреждения командой warn(). У сообщения слева появляется значок с восклицательным знаком, а цвет фона и теста будут окрашены в жёлтый и коричневый цвет.

 console.warn("Последнее китайское предупреждение"); 

console.error()

Аналогично работает команда error() — выводится значок с крестиком. Цвет сообщения: розовый и красный.

 console.error("Большая ошибка!"); 

console.info()

Для вывода информации используется команда info() с синим значком с буквой i.

 console.info("Пора кормить кота"); 

console.assert()

Для проверки вычислений можно использовать команду assert():

 console.assert(1 === 3, 'Чушь собачья!'); 

console.clear()

Чтобы не засорять вкладку, можно очистить её от предыдущих логов командой clear():

 console.clear(); 

Можно очистить консоль с помощью кнопки «Очистить» в верхнем левом углу консоли или нажав Ctrl+L или cmd-k.

console.count()

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

 console.count("cat"); console.count("cat"); console.count("dog"); console.count("cat"); console.count("dog"); console.count("cat"); 

console.time()

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

 console.time("fetch"); fetch('https://api.github.com/users/alexanderKlimov') .then(data => data.json()) .then(data => < console.timeEnd("fetch") console.log(data); >); 

Используйте значение последней операции в консоли

Используйте $_ для ссылки на возвращаемое значение предыдущей операции, выполненной в консоли

Sources

Сохранение в файл измененного CSS

Нажмите имя редактируемого файла CSS. Инспектор откроет его в панели «Источники», и оттуда вы можете сохранить его со всеми изменениями, которые вы применили. Этот прием не работает для новых селекторов, добавленных с помощью + или в свойства element.style, только для модифицированных, существующих.

Открытие консоли разработчика в браузере

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

Открытие консоли разработчика в браузерах

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

Способ 1: Горячие клавиши

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

    Google Chrome / Opera: Ctrl + Shift + J
    Mozilla Firefox: Ctrl + Shift + K

Есть и универсальная горячая клавиша — F12. Она запускает консоль почти во всех веб-обозревателях.

Способ 2: Контекстное меню

Через контекстное меню также можно вызвать консоль разработчика. Сами действия абсолютно одинаковы.

Google Chrome

  1. Нажмите правой кнопкой мыши по пустому месту на любой странице и выберите «Просмотреть код». Вызов консоли разработчика через контекстное меню Google Chrome
  2. Переключитесь на вкладку «Console». Переключение на вкладку с консолью в инструментах разработчика Google Chrome

Opera

  1. Кликните ПКМ по пустому месту и выберите «Просмотреть код элемента». Запуск инструментов разработчика для переключения на консоль через контекстное меню Opera
  2. Там переключитесь на «Console». Переключение на вкладку консоль в инструментах разработчика Opera

Mozilla Firefox

  1. Правым кликом мыши вызовите контекстное меню и нажмите на «Исследовать элемент». Вызов инструментов разработчика для открытия консоли через контекстное меню Mozilla Firefox
  2. Переключитесь на «Консоль». Вкладка консоль в инструментах разработчика Mozilla Firefox

Способ 3: Меню браузера

Через меню также не составит труда попасть в искомый раздел.

Google Chrome

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

Вызов инструментов разработчика для перехода в консоль через меню браузера Google Chrome

Opera

Щелкните по иконке меню в верхнем левом углу, наведите курсор на пункт меню «Разработка» и выберите «Инструменты разработчика». В появившемся разделе переключитесь на «Console».

Переход в инструменты разработчика для открытия консоли через меню браузера Opera

Mozilla Firefox

  1. Вызовите меню и щелкните по «Веб-разработка». Переход в раздел веб-разработка через меню браузера Mozilla Firefox
  2. В списке инструментов выберите «Веб-консоль». Вызов консоли через раздел меню веб-разработка браузера Mozilla Firefox
  3. Переключитесь на вкладку «Консоль». Переключение на вкладку консоль в инструментах разработчика Mozilla Firefox

Способ 4: Запуск при старте браузера

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

Google Chrome

  1. Кликните по ярлыку программы правой кнопкой мыши и перейдите в «Свойства». Если ярлыка нет, щелкните по самому EXE-файлу ПКМ и выберите пункт «Создать ярлык». Переход в свойства браузера через контекстное меню
  2. На вкладке «Ярлык» в поле «Объект» поместите текстовый указатель в конец строки и вставьте команду —auto-open-devtools-for-tabs . Щелкните «ОК».

Ввод параметра запуска браузера для автоматического открытия инструментов разработчика

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

Mozilla Firefox

Обладателям этого браузера позволяется вызывать консоль в новом окне, что может быть гораздо удобнее. Для этого им понадобится перейти в «Свойства» ярлыка, как это было показано выше, но вписать уже другую команду — -jsconsole .

Параметр запуска браузера для автоматического открытия консоли Mozilla Firefox

Она откроется отдельно вместе с Файрфокс.

Запущенная консоль в новом окне Mozilla Firefox

Теперь вы знаете все актуальные способы запуска консоли в нужный момент или автоматически.

Chrome DevTools

Chrome DevTools — это набор инструментов, встроенных в браузер Google Chrome, для создания и отладки сайтов. С их помощью можно просматривать исходный код сайта, отлаживать работу frontend: HTML, CSS и JavaScript. Также DevTools позволяет проверять сетевой трафик, быстродействие сайта и многое другое.

Освойте профессию «Frontend-разработчик»

Как начать работу с DevTools

Инструмент используют инженеры по тестированию, веб-разработчики и другие специалисты. Открыть DevTools из браузера Google Chrome можно тремя способами:

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

  1. Сочетанием горячих клавиш: для Windows и Linux Ctrl + Shift + I, для macOS cmd + Shift + I.
  2. В контекстном меню: на странице в любом месте кликнуть правой кнопкой мыши и выбрать «Просмотреть код». Главное — не путать с «Просмотр кода страницы», эта опция покажет исходный код вне DevTools.
  3. Через меню браузера: в правом верхнем углу нажать на три точки, в меню выбрать раздел «Дополнительные инструменты» и далее «Инструменты разработчика».

Профессия / 9 месяцев
Frontend-разработчик

Создавайте интерфейсы сервисов, которыми пользуются все

Group 1321314347 (1)

Какие вкладки есть в DevTools

Elements. Здесь отображается весь HTML- и CSS-код открытой страницы. На данной вкладке можно просмотреть и внести исправления в файлы CSS и JavaScript, изменить элементы DOM (программного интерфейса (API) для HTML- и XML-документов). Отредактировать HTML-элементы на странице, открытой в браузере, можно, кликнув по нужному элементу правой кнопкой мыши и выбрав пункт Edit as HTML. Изменения можно наблюдать в режиме реального времени. Манипуляции отображаются только в браузере и не видны другим пользователям. Для того чтобы применить исправленное, необходимо поработать с соответствующими файлами на веб-сервере.

редактирование html кода в Google Chrome devtools

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

ошибки при загрузке страницы в Chrome devtools

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

вкладка source в консоли разработчика Google Chrome devtools

Network. На вкладке отображаются сетевые запросы, который делает сайт. Как правило, ее используют при оптимизации скорости загрузки страницы, а также для мониторинга выполняемых запросов. Запросы к данным представлены в виде таблицы. Сверху расположены инструменты: очистка таблицы, включение и отключение записи запросов и другие. Под таблицей можно увидеть количество запросов, общее время загрузки всех данных, время загрузки DOM и ресурсов, участвующих в отображении текущей страницы.

вкладка network в Chrome devtools

Performances. Вкладка отображает нагрузку, которую создает сайт на компьютер пользователя. Здесь можно увидеть показатели FPS, загрузки CPU и сетевые запросы, необходимые данные и инструменты для повышения производительности страницы. На панели есть таймлайн использования сети, выполнения JavaScript и загрузки памяти. После первого построения таймлайнов можно найти данные о всем жизненном цикле страницы и выполнении кода.

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

вкладка производительности в консоли разработчика chrome

Читайте также Кто такой frontend-разработчик?

Memory. Здесь расположено несколько инструментов, которые помогают отслеживать, какую нагрузку на систему оказывает выполнение кода:

вкладка memory в Chrome devtools

  • Heap Snapshot. С помощью него можно посмотреть, как распределяется память между объектами JavaScript и связанными с ними элементами DOM.
  • Allocation instrumentation on timeline. Этот инструмент используется для устранения утечек памяти. Он показывает, как распределяется память между переменными в коде.
  • Allocation sampling. Профайлер записывает, как распределяется память на отдельные функции JavaScript.

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

очистка кэша в Chrome DevTools

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

Chrome DevTools вкладка отвечающая за безопасность

Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все

Lighthouse. На этой вкладке можно проверить производительность сайта.

параметры производительности сайта в Chrome DevTools

  • Performance. Позволяет узнать скорость загрузки сайта. Итоговый показатель зависит от времени загрузки интерактивных элементов, шрифтов и прочего контента, а также от времени блокировки и отрисовки стилей.
  • Progressive Web App. Позволяет проверить, регистрирует ли сайт Service Workers, возможна ли работа сайта офлайн, а также возвращает ошибку 200.
  • Best Practices. Помогает проверить безопасность сайта и узнать, применяются ли современные стандарты веб-разработки. На показатель влияет использование устаревших API, HTTPS, корректность кодировки и многое другое.
  • Accessibility. Позволяет узнать, насколько удобен сайт, как воспринимается контент и можно ли управлять интерфейсом и передвигаться по сайту без мыши.
  • SEO. Позволяет понять, насколько соблюдаются рекомендации Google по оптимизации сайта. На показатель влияют использование метатегов, наличие alt у изображений, адаптивная верстка и пр.

Каждый из показателей оценивается по шкале 100 баллов. Также для удобства оценка имеет цвет: зеленый — от 90 до 100 баллов, оранжевый — от 50 до 89 баллов, красный — ниже 49 баллов.

Основные инструменты и как их использовать

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

1. Выбор элемента на странице

Необходимо навести курсор, например на картинку на сайте, нажать правую кнопку мыши и выбрать «Просмотреть код». В DOM-дереве код выбранного элемента будет подсвечен.

2. Использование функции поиска HTML-компонента

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

DOM-элемент в консоли Chrome DevTools

Редактирование HTML. В консоли отображаются абсолютно все элементы: div, section, footer и т. д. Чтобы, например, изменить текст, достаточно кликнуть по нему два раза. Такие же действия доступны для классов и типов данных. Чтобы редактировать конкретную часть кода, нужно кликнуть по имени класса или самому слову class. Помимо этого, можно редактировать сразу большой участок текста или, например, названия атрибутов. Необходимо просто кликнуть правой кнопкой мыши по необходимому элементу и выбрать нужную опцию.

изменение html в Chrome DevTools

Работа с CSS. Под редактором HTML располагается консоль работы со стилями. В Chrome DevTools можно отключать и включать любое свойство одним кликом по чекбоксу слева. Также именно Chrome DevTools имеет удобную палитру для выбора оттенка цвета и позволяет настраивать угол наклона градиента. Здесь представлена визуализация отступов элемента, поэтому можно с легкостью настроить положение одного объекта относительно других. Это далеко не полный список всех удобных функций.

редактирование стилей CSS в Chrome DevTools

Поиск и исправление «мертвого» кода. Иногда в файлах CSS и JavaScript содержится много кода, который присутствует, но нигде не используется. Его наличие напрямую влияет на производительность сайта. В Chrome DevTools для этого предусмотрен инструмент Coverage. На панели со всеми основными вкладками (Elements, Console и т.д.) с правой стороны есть три точки. Необходимо кликнуть по ним и выбрать More Tools, где расположен Coverage. Внизу появится новая вкладка, где представлены данные о неиспользуемых CSS и JavaScript в процентном выражении. Если кликнуть по одному из них, можно увидеть все строки кода с цветовым обозначением: красные — используемые, синие — неиспользуемые. Чтобы повысить производительность сайта, нужно убрать неиспользуемый код.

пример ненужного кода в JS в Chrome DevTools

Структурирование кода. Код, в котором отсутствуют «мертвые» элементы, улучшает производительность сайта, но сложен для восприятия (иногда бывают удалены даже пробелы и переносы строк). Chrome DevTools позволяет его структурировать. На вкладке Elements необходимо выбрать любой минифицированный ресурс (CSS, JS или HTML), после чего в новой вкладке отобразится содержимое, а снизу появится иконка с изображением фигурных скобок. Нажав на них, Chrome DevTools структурирует код, который подходит для внесения каких-либо изменений.

Chrome DevTools структурирование кода поиск ресурса в Chrome DevTools так выглядит структурированный код в Chrome DevTools

Просмотр внешнего вида сайта на разных устройствах. В режиме разработчика Google Chrome можно посмотреть, как выглядит текущая страница практически на любом устройстве. Сделать это можно комбинацией клавиш Ctrl + Shift + M для Windows и Linux и cmd + Shift + M для macOS. Также можно кликнуть на значок телефона в левом верхнем углу консоли. Теперь можно выбрать абсолютно любое разрешение или конкретное устройство из списка Dimensions. Также инструмент позволяет посмотреть, как будет отображаться страница при разной скорости интернета.

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

Это далеко не полный список всех возможностей и полезных функций Google Chrome Developer Tools. Но чтобы разобраться в них, необходимо рассматривать каждый инструмент подробно и в отдельности, соблюдая логическую структуру. Узнать подробнее вы можете на портале Chrome Developers в разделе документации DevTools.

Frontend-разработчик

Научитесь создавать удобные и эффектные сайты, сервисы и приложения, которые нужны всем. Сегодня профессия на пике актуальности: в России 9000+ вакансий, где требуется знание JavaScript.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *