10 советов по консоли Chrome, которые вам нужно знать

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

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

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

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

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

Как открыть консоль Chrome

Обычным способом доступа к Chrome DevTools является нажатие кнопки « Настройка и управление Google Chrome » (три вертикальные точки в правом верхнем углу строки меню браузера Chrome), прокрутка вниз до дополнительных инструментов и выбор инструментов разработчика .

Сочетание клавиш: Ctrl + Shift + I для Windows и Cmd + Options + I для Macintosh.

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

Панель консоли Chrome появится сбоку или внизу окна браузера, если вы используете любой из методов, упомянутых выше. Вы можете разблокировать панель консоли Chrome в отдельном окне или изменить положение док-станции, нажав кнопку « Настройка и управление инструментами разработчика» (три вертикальные точки в правом верхнем углу панели инструментов разработчика) и выбрав предпочитаемое положение рядом с параметром « Боковая док -станция». .

10 советов по консоли Chrome, которые должен знать каждый разработчик

1. Имитация мобильных устройств

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

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

Сочетание клавиш: Ctrl + Shift + M (Cmd + Shift + M).

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

2. Проверьте сетевую активность

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

Щелкните вкладку сети в окне DevTools. Это откроет сетевую панель с пустым журналом, потому что инструмент регистрирует сетевую активность только тогда, когда он открыт. Нажмите Ctrl + R (Cmd + R) или перезагрузите веб-сайт, чтобы просмотреть активность сетевого журнала вашей страницы.

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

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

3. Дросселирование сети

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

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

4. Добавьте фрагмент сценария

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

Нажмите на вкладку источников >> фрагменты >> новые фрагменты. Это создаст новый файл на панели фрагментов. Переименуйте свой фрагмент и напишите небольшой блок кода JavaScript в окне рядом с панелью. Чтобы сохранить фрагмент, щелкните правой кнопкой мыши файл фрагмента, выберите « Сохранить как » и выберите нужный каталог. Вы также можете получить доступ к этой функции через меню команд.

Используйте Ctrl + Shift + P или Cmd + Shift + P (Mac), чтобы открыть командное меню, введите фрагменты и нажмите « Создать новые фрагменты » .

Используйте Ctrl + Enter или Cmd + Enter, чтобы запустить код, или щелкните значок « Выполнить фрагмент» под текстовым окном.

5. Сделайте скриншоты веб-сайта

Chrome DevTools позволяет делать скриншоты разных частей веб-сайта. Откройте командное меню с помощью Ctrl + Shift + P или Cmd + Shift + P (Mac) и введите снимок экрана . Выберите нужный тип скриншота. DevTool автоматически сделает снимок экрана и загрузит изображение в виде файла .png в каталог загрузок по умолчанию.

6. Включите режим редактирования текста контента

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

document.body.contentEditable = 'true';

Или же

document.designMode = 'включено';

Нажмите клавишу ввода, чтобы включить функцию.

7. Выбор цвета

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

Чтобы получить доступ к палитре цветов, выберите элемент, цвет которого вы хотите изменить. Это должно открыть вкладку элемента и панель таблицы стилей справа. Найдите свойство CSS элемента и щелкните соответствующее поле цвета, чтобы открыть палитру цветов.

8. Отредактируйте свойство CSS

Консоль Chrome предлагает легкий доступ для настройки свойства CSS любого элемента на веб-сайте. Нажмите кнопку выбора (Ctrl + Shift + C или Cmd + Options + C), наведите курсор на элемент, который вы хотите отредактировать, для просмотра свойств элемента, щелкните элемент.

Это должно выделить корень HTML элемента на панели «Элемент» и свойства CSS в правой части панели DevTools. Перейдите на панель «Стили» и прокрутите до свойств, которые вы хотите редактировать для внесения изменений в режиме реального времени. Вы можете просмотреть полные свойства любого стиля, нажав Ctrl + щелчок (Cmd + щелчок) на свойстве.

9. Критический момент JavaScript

Находить и исправлять ошибки JavaScript гораздо проще с помощью точек останова, чем с помощью метода console.log(). Это связано с тем, что в последнем методе вам необходимо вручную получить доступ к исходному коду и вставить операторы console.log() в соответствующий код перед перезагрузкой страницы для просмотра журналов. Точки останова не обязательно требуют от вас понимания структуры кода, прежде чем вы сможете сделать паузу на соответствующем коде.

Щелкните вкладку « Источник » > страницу и выберите сценарий, который вы хотите отлаживать, из определенной папки. Вы можете установить точки останова в Chrome DevTools, просто щелкнув номер строки, в которой вы хотите приостановить выполнение скрипта, чтобы приостановить его, как только он будет выполнен для этой строки.

Кроме того, вы можете использовать прослушиватель событий на панели отладчика, чтобы установить точку останова со ссылкой на конкретное событие, на которое вы ориентируетесь в сценарии, например щелчок мышью или воспроизведение мультимедиа. Обновите страницу с помощью Ctrl + R (Cmd + R) и используйте инструменты панели отладчика для перемещения шагов.

10. Сохраните элемент HTML как глобальную переменную JS

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

Щелкните правой кнопкой мыши объект в консоли или HTML-блок элемента на вкладке «Элемент» и выберите «Сохранить как глобальную переменную» в раскрывающемся меню. Консоль Chrome автоматически сохранит элемент как глобальную переменную и сделает его доступным в консоли. Имя переменной будет «tempN», где N представляет количество раз, когда вы сохраняли переменные с помощью этого метода. Первая переменная, очевидно, будет называться «temp1», а вторая — «temp2».

Вывод

Мастерство и скорость являются атрибутами знакомства с их инструментами, и это глубоко укоренилось в Chrome DevTools. Чем больше у вас информации, тем лучше и быстрее вы будете использовать инструменты, что, в свою очередь, сократит время, затрачиваемое на отладку.

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