Команды для работы с JavaScript-консолью в браузерах и повышение производительности труда программиста

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

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

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

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

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

• Google Chrome / Opera:

Ctrl + Shift + JMozilla Firefox: Ctrl + Shift + K</ul>

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

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

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

Google Chrome

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

Переключитесь на вкладку «Console».</li></ol>

Opera

1. Кликните ПКМ по пустому месту и выберите «Просмотреть код элемента».

Там переключитесь на «Console».</li></ol>

Mozilla Firefox

1. Правым кликом мыши вызовите контекстное меню и нажмите на «Исследовать элемент».

Переключитесь на «Консоль».</li></ol>

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

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

Google Chrome

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

Opera

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

Mozilla Firefox

1. Вызовите меню и щелкните по «Веб-разработка».

В списке инструментов выберите «Веб-консоль».</li>

Переключитесь на вкладку «Консоль».</li></ol>

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

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

Google Chrome / Opera

1. Кликните по ярлыку программы правой кнопкой мыши и перейдите в «Свойства». Если ярлыка нет, щелкните по самому EXE-файлу ПКМ и выберите пункт «Создать ярлык».

На вкладке «Ярлык» в поле «Объект» поместите текстовый указатель в конец строки и вставьте команду --auto-open-devtools-for-tabs. Щелкните «ОК».</li></ol>

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

Mozilla Firefox

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

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

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

Помогла ли вам эта статья?

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

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

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

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

Это комбинация клавиш:

Ctrl + Shift + I

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

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

⌥ + ⌘ + I

Посмотрите, как это выглядит в Chrome и  Яндекс.Браузере:

Также это работает в Opera

И в Firefox

Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.

Рекомендую запомнить эти комбинации клавиш. Если вы веб-разработчик, то это может сэкономить вам кучу времени.

Курс «Консоль браузера. Эффективная работа.»

Курс находится здесь

Видеокурс записан на основе работы с консолью в браузере Chrome. Аналогичная консоль используется в Яндекс Браузере.

Для остальных браузеров принципы работы с консолью остаются теми же самыми. Самое главное понять смысл работы.

Чему можно научиться из курса?

• Как удобно расположить консоль в любом месте экрана.

• Основные принципы работы с консолью, как это вообще работает.

• Как легко находить, изменять, добавлять или удалять новые HTML-элементы и CSS-стили на веб-странице.

Это позволит вам «примерять» и предварительно посмотреть как будет выглядеть веб-страница с теми или иными изменениями НЕ внося изменения в исходный код веб-страницы.

• Как быстро перемещаться между элементами в «дереве» документа и быстро находить нужные элементы.

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

• Как находить конкретное место в коде CSS или Javascript файлов, которое отвечает за вывод какого-то эффекта на сайте.

Какой конкретно файл за это отвечает?

Где он находится на сервере?

Какая строка кода за это отвечает?

• Ловим стили оформления для элемента, которые у него появляются при наведении курсора мыши на него (эффект hover).

• Как посмотреть как будет выглядеть веб-страница на мобильных устройствах (телефоне и планшете) с помощью консоли браузера?

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

• Как выполнять какие-то Javascript-скрипты или Javascript-код на странице вручную?
• Как отслеживать и быстро находить ошибки в Javascript-скриптах на сайте?
• Как отключить кэш браузера при работе консоли. Это избавит вас от проблемы, что вы внесли изменение в файл на сервере, а в браузере он не меняется.

• Какие инструменты консоли позволят вам узнать причину медленной загрузки страниц вашего сайта?

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

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

Курс находится здесь

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

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

— клавиша F12;

— нажав одновременно клавиши 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. Зона информации и контроля.

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

Панель 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-соединении, обозначая использует ли ваш сайт современные безопасные протоколы;
• безопасность подгружаемых второстепенных источников.

 

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

Используемые источники:

• https://lumpics.ru/how-to-open-the-developer-console-in-a-browser/
• https://webkyrs.info/post/kak-zapustit-konsol-v-bolshinstve-brauzerov
• https://qaevolution.ru/konsol-v-brauzere-chrome/