Меню Закрыть

Как открыть консоль браузера гугл хром

Содержание

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

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

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

Панель Sources

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

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

Панель Sources

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

Читайте также:  Как восстановить удаленные файлы на леново

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

Большинство веб-разработчиков при отладке приложений используют Google Chrome — это уже ни для кого не секрет. Прежде всего в этом браузере привлекают продвинутые средства для разработчиков. Одним из элементов devtool является консоль, которая в свою очередь гораздо более продвинутая, чем думают о ней большинство разработчиков.

Консоль Google Chrome умеет гораздо больше, чем console.log() . Я опишу некоторые возможности, которые сам применяю чаще всего.

Производные console.log()

Вызов console.log() позволяет отобразить в консоли сообщение.

Вызовы info() , warn() и error() позволяют сделать то же самое, визуально выделив сообщение соответствующим стилем. Бывает очень полезно, когда в процессе отладки накапливается большое количество сообщений и трудно выделить какие-то ключевые сообщения.

Результат работы console.info(), console.warn() и console.error().

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

Таблицы

По умолчанию консоль отображает содержимое объекта в виде дерева. Это очень удобно, т.к. вы можете скрывать/раскрывать нужные части объекта и отслеживать в них информацию. Неудобства возникают когда вам нужно отобразить, например, содержимое массива. В этом случае вы получите нечто подобное:

Результат работы console.log() для массива элементов.

Вместо console.log() в этом случае удобнее использовать console.table() , вот как это выглядит:

Результат работы console.table().

Как видно из скриншота, вызов console.table() отображает массив не только в виде таблицы, но и в виде дерева, как при вызове console.log() .

Группировка

Когда сообщения в консоли идут потоком друг за другом бывает полезно объединять их в группы. Делается это путем вызова методов console.group() и console.groupEnd() .

Если вместо console.group() вызвать console.groupCollapsed() , то сообщения в консоли будут свернуты при отображении.

Результат работы console.group().

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

Ассерты — это распространенный метод проверки утверждения в разных языках программирования. Консоль Google Chrome также предоставляет такую возможность. Чтобы выполнить проверку, нужно вызвать console.assert() с двумя параметрами: первый — проверяемое условие, второй — сообщение об ошибке. Если проверяемое условие ложно, то в консоли появится сообщение об ошибке, иначе ничего не произойдет.

Читайте также:  Dns jumper что это за программа

Результат работы console.assert().

Подсчет количества вызовов

Когда одно и то же сообщение появляется в консоли несколько раз, бывает удобно вести подсчет сколько раз это произошло. С этим отлично справляется console.count() .

Результат работы console.count().

Отображение стека вызовов

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

Но на самом деле в Chrome для этого есть специальный метод console.trace() .

В этом случае в консоли отобразится доступный стек вызовов. И никаких хаков 🙂

Результат работы console.trace().

Форматирование

Chrome позволяет использовать подстановки в выражениях аналогично тому, как это делается в string.Format() в C# или println() в C .

В этом примере %d означает, что здесь подставляется число. Список доступных значений:

  • %s — строка
  • %i , %d — целое число
  • %f — дробное число
  • %o — DOM-элемент
  • %O — JavaScript-объекта

Отдельного внимания заслуживает %c — если указать его при вызове console.log() , то в параметрах можно передать набор CSS-стилей, которые будут использоваться при отображении.

Возможности форматирования сообщения.

Бонус — $0

Если во вкладке Elements выделить какой-либо элемент в DOM, то к нему можно обратиться через $0 в консоли. Это очень удобный способ, когда нужно быстро выполнить какие-нибудь манипуляции с DOM-элементом.

Пример работы с $0.

Как с помощью консоли разработчика превратить Google Chrome в подобие текстового редактора? Какой смысл в ней приобретает знакомый многим по jQuery значок $? Как вывести в консоль набор значений, оформленный в виде вполне приличной таблицы? Если сходу ответы на эти вопросы в голову не приходят, значит вкладка Console из инструментов разработчика Chrome ещё не раскрылась перед вами во всей красе.

1. Выбор элементов DOM

Если вы знакомы с jQuery, не мне вам рассказывать о важности конструкций вроде $(‘.class’) и $(‘id’). Для тех, кто не в курсе, поясню, что они позволяют выбирать элементы DOM, указывая назначенные им классы и идентификаторы. Консоль разработчика обладает похожей функциональностью. Здесь «$», однако, отношения к jQuery не имеет, хотя делает, в сущности, то же самое. Это – псевдоним для функции document.querySelector().

Команды вида $(‘tagName’), $(‘.class’), $(‘#id’) и $(‘.class #id’) возвращают первый элемент DOM, совпадающий с селектором. При этом, если в документе доступна jQuery, её «$» данный функционал консоли перекроет.

Есть здесь и ещё одна конструкция: $$. Её использование выглядит как $$(‘tagName’) или $$(‘.class’). Она позволяет выбрать все элементы DOM, соответствующие селектору и поместить их в массив. Работа с ним ничем не отличается от других массивов. Для того, чтобы выбрать конкретный элемент, можно обратиться к нему по индексу.

Например, команда $$(‘.className’) предоставит нам массив всех элементов страницы с указанным при её вызове именем класса. Команды $$(‘.className’)[0] и $$(‘.className’)[1] дадут доступ, соответственно, к первому и второму элементу полученного массива.


Эксперименты с командами $ и $$

2. Превращаем браузер в текстовый редактор

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

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

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

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

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


Обработчики событий

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

Эта команда выведет код функции-обработчика события. Здесь eventName[0] – это массив, который содержит все события конкретного типа. Например, на практике это может выглядеть так:

Читайте также:  Игры для двоих андроид по bluetooth

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

4. Мониторинг событий

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

    Команда monitorEvents($(‘selector’)) позволяет организовать мониторинг всех событий, связанных с элементом, которому соответствует селектор. При возникновении события делается запись в консоли. Например, команда monitorEvents($(‘#firstName’)) позволит логировать все события, связанные с элементом, идентификатор которого – firstName.

Команда monitorEvents($(‘selector’),’eventName’) похожа на предыдущую, но она нацелена на конкретное событие. Здесь, помимо селектора элемента, функции передаётся и имя события. Такая команда позволит вывести в консоль данные о возникновении одного события. Например, команда monitorEvents($(‘#firstName’),’click’) выведет сведения только по событию click элемента с идентификатором firstName.

Команда monitorEvents($(‘selector’),[‘eventName1’,’eventName3′,….]) позволяет наблюдать за несколькими выбранными событиями. Здесь в функцию передаётся строковой массив, который содержит имена событий. Например, такая команда: monitorEvents($(‘#firstName’),[‘click’,’focus’]) будет выводить в консоль сведения о событиях click и focus для элемента с идентификатором firstName.

  • Команда unmonitorEvents($(‘selector’)) позволяет прекратить мониторинг и логирование событий в консоли.
  • 5. Измерение времени выполнения фрагмента кода

    В консоли Chrome доступна функция вида console.time(‘labelName’), которая принимает в качестве аргумента метку и запускает таймер. Ещё одна функция, console.timeEnd(‘labelName’), останавливает таймер, которому назначена переданная ей метка. Вот пример использования этих функций:

    Вышеприведённый пример позволяет узнать время между запуском и остановкой таймера. То же самое можно сделать внутри JavaScript-программы и найти время выполнения фрагмента кода.

    Cкажем, мне нужно выяснить длительность исполнения цикла. Сделать это можно так:

    6. Вывод значений переменных в виде таблиц

    Предположим, у нас имеется такой массив объектов:

    Если вывести его в консоли, получится иерархическая структура в виде, собственно, массива объектов. Это – полезная возможность, ветви структуры можно разворачивать, просматривая содержимое объектов. Однако, при таком подходе сложно понять, например, как соотносятся свойства похожих элементов. Для того, чтобы с подобными данными было удобнее работать, их можно преобразовать к табличному виду. Для этого служит такая команда:

    Она позволяет вывести переменную и все её свойства в виде таблицы. Вот, как это выглядит.

    Вывод массива объектов в виде таблицы

    7. Просмотр кода элемента

    Быстро перейти к коду элемента из консоли можно с помощью следующих команд:

      Команда inspect($(‘selector’)) позволяет открыть код элемента, соответствующего селектору, в панели Elements инструментов разработчика Google Chrome. Например, команда inspect($(‘#firstName’)) позволит просмотреть код элемента с идентификатором firstName. Команда inspect($$(‘a’)[3]) откроет код четвёртой ссылки, которая присутствует в DOM.

  • Команды вида $0, $1, $2 позволяют быстро переходить к недавно просмотренным элементам. Например, $0 откроет код самого последнего просмотренного элемента, и так далее.
  • 8. Вывод списка свойств элемента

    Если надо просмотреть список свойств элемента, консоль поможет и в этом. Здесь используется такая команда:

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

    9. Вызов последнего полученного результата

    Консоль можно использовать как калькулятор, это, вероятно, знают все. Но вот то, что она имеет встроенные средства, позволяющие использовать в командах результаты предыдущих вычислений, известно немногим. С помощью конструкции $_ можно извлечь из памяти результат предыдущего выражения. Вот как это выглядит:

    10. Очистка консоли и памяти

    Если нужно очистить консоль и память, воспользуйтесь такой вот простой командой:

    После нажатия на Enter чистая консоль будет готова к новым экспериментам.
    Вот и всё.

    11, 12, 13, 14…

    Откровенно говоря, это – далеко не всё. Я показал лишь некоторые из неочевидных возможностей консоли Google Chrome. На самом деле, их намного больше. Уверен, вы сможете расширить мой список собственными находками.

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

    А какие инструменты используете вы? Давайте-давайте, делитесь какими-нибудь приколюхами! 🙂

    Рекомендуем к прочтению

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

    Ваш адрес email не будет опубликован.