Как открыть консоль в гугле

Консоль в браузере 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. Зона информации и контроля.

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

Панель 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/

Все о тестировании и качестве ПО

• Тестирование безопасности веб приложений
• Тестирование кнопки (button) и не только
• Мобильный эмулятор для тестирования
• Качество программного обеспечения
• Шутливые виды багов

Использование консоли Google Chrome

Консоль предоставляет две функции для разработчиков для тестирования веб-страниц и приложений:

• в консоль можно выводить отладочную информацию, используя такие методы Console API, как console.log() и console.profile().
• оболочка для работы в консоли, в которой вы можете вводить команды, в частности используя автодополнение, и оперировать document и Chrome DevTools. Вы можете выполнять JavaScript-выражения прямо в консоли и использовать методы Command Line API, например, $() для создания выборки элементов, или profile() для запуска CPU-профайлера.

В статье мы рассмотрим наиболее распространённые способы использования Console API и Command Line API. Более подробно о них вы сможете узнать в документации.

• Базовые операции
  • Открытие консоли
  • Очистка консоли
  • Настройки консоли
  • Вывод в консоль
  • Ошибки и предупреждения
  • Проверки
  • Фильтрация вывода в консоли
  • Группирование вывода
  • Замена строк и их форматирование
  • Представление DOM-элементов как JavaScript-объекты
  • Стилизация вывода консоли с помощью CSS
  • Измерение временных затрат
  • Корреляция с панелью Timeline
  • Создание точек останова
  • Выполнение выражений
  • Выделение элементов
  • Инспектирование DOM-элементов и JavaScript объектов
  • Доступ к недавним элементам или объектам
  • Отслеживание событий
  • Контроль за CPU-профайлером

  Базовые операции

  Открытие консоли

  Консоль в Chrome DevTools доступна в двух вариантах: вкладка Console и в виде разделённой версии, доступной из любой другой вкладки.

  Для того, чтобы открыть вкладку Console вы можете:

  • использовать хоткей Command — Option — J (Mac) или Control — Shift — J (Windows/Linux);
  • выбрать пункт меню View > Developer > JavaScript Console.

  

  Для того, чтобы вызвать или скрыть разделённую версию консоли в других вкладках, нажмите клавишу Esc или кликните на иконку Show/Hide Console в нижнем левом углу DevTools. Скриншот показывает разделённый вариант консоли во вкладке Elements.

  

  Очистка консоли

  Для очистки консоли:

  • через контекстное меню вкладки консоли (клик правой кнопки мыши) выберите пункт Clear Console.
  • Введите clear() — команду из Command Line API в консоли.
  • Вызовите console.clear() (команду из Console API) из скрипта.
  • Используйте хоткеи ⌘K или ⌃L (Mac) Control — L (Windows и Linux).

  По умолчанию, история консоли очищается при переходе на другую страницу. Вы можете отменить очистку включив Preserve log upon navigation в разделе консоли в настройках DevTools (см. настройки Консоли).

  Настройки консоли

  Консоль имеет две главные опции, которые вы можете настраивать в главной вкладке настроек DevTools:

  • Log XMLHTTPRequests — определяет, логировать ли XMLHTTPRequest в панели консоли.
  • Preserve log upon navigation — определяет, сбрасываться ли истории консоли при переходе на новую страницу. По умолчанию обе из этих опций отключены.

  Вы можете поменять эти настройки в контекстном меню консоли, кликнув правой кнопкой мыши.

  

  Использование API консоли

  Console API — набор методов, доступных из объекта console , объявленного из DevTools. Одно из главных назначений API — логировать информацию (значение свойства, целый объект или DOM-элемент) в консоль во время работы вашего приложения. Вы также можете группировать вывод, чтобы избавиться от визуального мусора.

  Вывод в консоль

  Метод console.log() принимает один и более параметров и выводит их текущие значения на консоль. Например:

  var a = document.createElement('p'); a.appendChild(document.createTextNode('foo')); a.appendChild(document.createTextNode('bar')); console.log("Количество дочерних элементов: " + a.childNodes.length); 

  

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

  console.log("Количество дочерних элементов: ", a.childNodes.length, "; текущее время: ", Date.now() ); 

  

  Ошибки и предупреждения

  Метод console.error() выводит красную иконку рядом с сообщением красного цвета.

  function connectToServer( ) < console.error("Ошибка: %s (%i)", "Сервер не отвечает",500); > connectToServer(); 

  

  Метод console.warn() выводит жёлтую иконку рядом с текстом сообщения.

  if(a.childNodes.length < 3 ) < console.warn('Внимание! Слишком мало дочерних элементов (%d)', a.childNodes.length); > 

  

  Проверки

  Метод console.assert() выводит сообщение об ошибке (это второй аргумент) только в том случае, если первый аргумент равен false . К примеру, в следующем примере сообщение об ошибке появится, только если количество дочерних элементов DOM-элемента list больше пятисот.

  console.assert(list.childNodes.length < 500, "Количество дочерних элементов >500"); 

  

  Фильтрация вывода в консоли

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

  

  • All — без фильтрации.
  • Errors — сообщения console.error() .
  • Warnings — сообщения console.warn() .
  • Logs — сообщения console.log() , console.info() и console.debug() .
  • Debug — сообщения console.timeEnd() и остальных функций консольного вывода.

  Группирование вывода

  Вы можете визуально группировать вывод в консоли с помощью команд console.group() и groupEnd().

  var user = "Вася Пупкин", authenticated = false; console.group("Этап аутентификации"); console.log("Аутентификация пользователя '%s'", user); // Код авторизации… if (!authenticated) < console.log("Пользователь '%s' не был аутентифицирован.", user) > console.groupEnd(); 

  

  Также вы можете вкладывать группы логов друг в друга. В следующем примере группа логов создаётся для этапа аутентификации в процессе логина. Если пользователь аутентифицирован, то создаётся вложенная группа для этапа авторизации.

  var user = "Вася Пупкин", authenticated = true, authorized = true; // Внешняя группа console.group("Аутентификация пользователя '%s'", user); if (authenticated) < console.log("Пользователь '%s' был аутентифицирован.", user) // Начало вложенной группы console.group("Авторизация пользователя '%s'", user); if (authorized) < console.log("Пользователь '%s' был авторизован.", user) > // Конец вложенной группы console.groupEnd(); > // Конец внешней группы console.groupEnd(); console.log("Обычный вывод без групп."); 

  

  Для создания изначально свёрнутой группы используйте console.groupCollapsed() вместо console.group() :

  console.groupCollapsed("Аутентификация пользователя '%s'", user); if (authenticated) < //… > 

  

  Замена строк и их форматирование

  Первый параметр, передаваемый в любой метод консоли (например, log() или error() ), может содержать модификаторы форматирования. Модификатор вывода состоит из символа % , сразу за которым следует буква, сообщающая о том, какое форматирование должно быть применено (например, %s — для строк). Модификатор форматирования определяет, куда подставить значение, переданное из следующих параметров функции.

  В следующем примере используется строчный и числовой модификаторы %s (string) и %d (decimal) для замены значений в выводимой строке.

  console.log("%s купил %d бочонков мёда", "Саша", "100"); 

  Результатом будет «Саша купил 100 бочонков мёда».

  Приведённая таблица содержит поддерживаемые модификаторы форматирования и их значения:

  Модификатор форматирования	Описание
  %s	Форматирует значение как строку.
  %d или %i	Форматирует значение как целое число (decimal и integer).
  %f	Форматирует объект как число с плавающей точкой.
  %o	Форматирует значение как DOM-элемент (также как в панели Elements).
  %O	Форматирует значение как JavaScript-объект.
  %c	Применяет переданные в качестве второго аргумента CSS-стили к выводимой строке.

  В следующем примере модификатор форматирования %d заменяется на значение document.childNodes.length и форматируется как целое число; модификатор %f заменяется на значение, возвращаемое Date.now() и форматируется как число с плавающей точкой.

  console.log("Количество дочерних элементов: %d; текущее время: %f", a.childNodes.length, Date.now() ); 

  

  Представление DOM-элементов как JavaScript-объекты

  По умолчанию, когда вы логируете DOM-элемент в консоль, он выводится в XML- формате, как в панели Elements:

  console.log(document.body.firstElementChild); 

  

  Вы можете вывести DOM-элемент в JavaScript-представлении с помощью метода console.dir() :

  console.dir(document.body.firstElementChild); 

  

  Точно также вы можете использовать модификатор вывода %0 в методе console.log() :

  console.log("%O", document.body.firstElementChild); 

  Стилизация вывода консоли с помощью CSS

  Можно использовать модификатор %c , чтобы применить СSS-правила, к любой строке, выводимой с помощью console.log() или похожих методов.

  console.log("%cЭта надпись будет отформатирована крупным голубым текстом", "color: blue; font-size: x-large"); 

  

  Измерение временных затрат

  Методы console.time() и console.timeEnd() используются для измерения того, как много времени потребовалось для выполнения скрипта. console.time() вызывается для запуска таймера, а console.timeEnd() — для его остановки. Время, прошедшее между вызовами этих функций, будет выведено в консоль.

  console.time("Инициализация массива"); var array= new Array(1000000); for (var i = array.length - 1; i >= 0; i--) < array[i] = new Object(); >; console.timeEnd("Инициализация массива"); 

  

  Внимание: необходимо использовать одинаковые строки в параметрах console.time() и timeEnd() для ожидаемой работы таймера — считайте эту строку его уникальным идентификатором.

  Корреляция с панелью Timeline

  Панель Timeline предоставляет подробный обзор того, куда было потрачено время работы вашего приложения. Метод console.timeStamp() создаёт отдельную отметку в момент своего исполнения. Это помогает легко и непринуждённо соотносить события в приложении с браузерными событиями reflow и repaint.

  Внимание: метод console.timeStamp() выполняется только при записи событий в панели Timeline.

  В следующем примере в панели Timeline появляется отметка «Adding result» в тот момент, когда поток выполнения программы доходит до console.timeStamp(«Adding result»)

  function AddResult(name, result) < console.timeStamp("Добавление результатов"); var text = name + ': ' + result; var results = document.getElementById("results"); results.innerHTML += (text + "
  "); > 

  Как проиллюстрировано в скриншоте, вызов timeStamp() отмечен в следующих местах:

  • жёлтая вертикальная линия в панели Timeline.
  • Запись добавлена в список записанных событий.

  

  Создание точек останова

  Вы можете начать отладку вашего кода, вызвав команду debugger. К примеру, в следующем коде отладка начинается сразу после вызова метода brightness() :

  function brightness( ) < debugger; var r = Math.floor(this.red*255); var g = Math.floor(this.green*255); var b = Math.floor(this.blue*255); return (r * 77 + g * 150 + b * 29) >> 8; > 

  

  Использование Command Line API

  Кроме того, что консоль — это место вывода логов вашего приложения, вы можете вводить в нее команды, определенные в Command Line API. Это API дает следующие возможности:

  • удобные функции для выделения DOM-элементов.
  • Методы управления CPU-профайлером.
  • Псевдонимы для некоторых методов Console API.
  • Отслеживание событий.
  • Просмотр обработчиков событий объекта.

  Выполнение выражений

  Консоль выполнит любой JavaScript-код, который вы в неё введёте, сразу после нажатия кнопки Return или Enter. В консоли действует автодополнение и дополнение по табу. По мере ввода выражений и свойств вам предлагают возможные варианты. Если существуют несколько одинаково начинающихся свойств, вы можете выбирать между ними с помощью кнопки Tab. Нажав стрелку вправо вы выберете текущую подсказку. Если подсказка одна, то нажатие Tab тоже приведет к ее выбору.

  

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

  

  Выделение элементов

  Command Line API предоставляет набор методов для доступа к DOM-элементам в вашем приложении. К примеру, метод $() возвращает первый элемент, соответствующий объявленному CSS-селектору, идентично с document.querySelector(). Следующий код вернёт первый элемент с ID «loginBtn».

  $('#loginBtn'); 

  

  Метод $$() возвращает массив элементов, соответствующих указанному CSS- селектору, идентично document.querySelectorAll(). Чтобы получить все кнопки с классом loginBtn , нужно ввести:

  $$('button.loginBtn'); 

  

  И, наконец, метод x() принимает XPath-путь в качестве параметра и возвращает массив элементов, соответствующих этому пути. Например, этот код вернёт все элементы , являющиеся дочерними по отношению к элементу :

  $x('/html/body/script'); 

  Инспектирование DOM-элементов и объектов

  Метод inspect() принимает ссылку на DOM-элемент (или объект) в качестве параметра и отображает элемент или объект в соответствующей панели: DOM-элемент в панели Elements и JavaScript-объект в панели Profile.

  

  Доступ к недавно вызванным DOM-элементам или объектам

  Часто во время тестирования вы выбираете DOM-элементы либо непосредственно в панели Elements, либо используя соответствующий инструмент (иконка — увеличительное стекло), чтобы работать с этими элементами. Также вы можете выбрать снимок использования памяти в панели Profiles для дальнейшего изучения этого объекта.

  Консоль запоминает последние пять элементов (или объектов), которые вы выбирали, и к ним можно обратиться используя свойства $0, $1, $2, $3 и $4. Последний выбранный элемент или объект доступен как $0 , второй — $1 и так далее.

  Следующий скриншот показывает значения этих свойств после выбора трех различных элементов подряд из панели Elements:

  

  Внимание: В любом случае вы можете кликнуть правой кнопкой мыши или кликнуть с зажатой клавишей Control в консоли и выбрать пункт «Reveal in Elements Panel»

  Отслеживание событий

  Метод monitorEvents() позволяет отслеживать определенные события объекта. При возникновении события оно выводится в консоль. Вы определяете объект и отслеживаемые события. Например, следующий код позволяет отслеживать событие “resize” объекта окна.

  monitorEvents(window, "resize"); 

  

  Чтобы отслеживать несколько событий одновременно, можно передать в качестве второго аргумента массив имен событий. Следующий код отслеживает одновременно события “mousedown” и “mouseup” элемента body :

  monitorEvents(document.body, ["mousedown", "mouseup"]); 

  Кроме того, вы можете передать один из поддерживаемых «типов событий», которые DevTools сами преобразуют в реальные имена событий. Например, тип события touch позволит отслеживать события touchstart, touchend, touchmove, и touchcancel.

  monitorEvents($('#scrollBar'), "touch"); 

  Чтобы узнать, какие типы событий поддерживаются — ознакомьтесь с monitorEvents() из Console API.

  Чтобы прекратить отслеживать событие вызовите unmonitorEvents() с объектом в качестве аргумента.

  unmonitorEvents(window); 

  Контроль за CPU-профайлером

  С помощью методов profile() и profileEnd() можно создавать JavaScript профили CPU. По желанию можно задать профилю имя.

  Ниже вы видите пример создания нового профиля с именем назначенным по умолчанию:

  

  Новый профиль появляется в панели Profiles с именем Profile 1:

  

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

  

  Результат в панели Profiles:

  

  Профили CPU могут быть вложенными, например:

  profile("A");profile("B");profileEnd("B")profileEnd("A") 

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

  profile("A");profile("B"); profileEnd("A");profileEnd("B"); 

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

  

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

  Google Chrome DevTools – как это работает и кому это необходимо?

  Мы знаем их, как инструменты для разработчиков сайтов.

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

  Так же есть экспериментальная версия браузера Chrome Canary которая обновляется ежедневно.

  

  Пользовательская версия браузера и Canary могут работать вместе, так как Canary не всегда стабилен.

  В данной статье мы приведем некоторые сочетания клавиш, а с полным их списком вы можете ознакомиться на веб-сайте Google Developer перейдя по ссылке:

  Chrome DevTools — как открыть?

  Есть три основных способа открыть DevTools в браузере. Используйте тот метод, который вам нравится, ниже подробнее о них:

  1. Из меню браузера.

  

  Нажать на кнопку с тремя точками, перейти в Дополнительные инструменты -> Инструменты разработчика

  2. Открыть с помощью мышки

  

  Быстрый и простой способ перейти в DevTools вызвав контекстное меню в браузере.
  Правой кнопкой мыши щёлкните на элементе сайта и затем выберете «Просмотреть код».

  3. Открыть сочетанием клавиш

  Вы можете открыть консоль разработчика следующими сочетаниями:

  • Mac: Cmd + Opt + I
  • Windows: F12 или Ctrl + Shift + I

  Рассмотрим 9 основных вкладок в консоли разработчика

  Elements — элементы страницы

  

  В данной вкладке вы можете увидеть структуру страницы, на которой вы находитесь в данный момент (справа).

  • При нажатии на элемент, в нижней части можно увидеть полный путь к нему.
  • С правой стороны панель стилей. В ней можно редактировать активный стиль элемента, из правой части.
  • В данной вкладке можно редактировать содержимое страницы, перемещать HTML блоки, создавать новые элементы. Используется для отладки и редактирования страницы непосредственно в браузере.

  Console — консоль

  

  • Данный инструмент используется для отладки кода Javascript, проверки скриптов, просмотр логов, которые можно выводить с помощью команды console.log, а также вывод различных ошибок кода и загрузки элементов.
  • Некоторые расширения браузера Chrome также могут выводить некоторую информацию и ошибки, например посмотреть как Adblock блокирует рекламу на странице.

  Sources — ресурсы, файлы

  

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

  Network — сеть

  

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

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

  Perfomance — скорость работы

  

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

  Memory — количество используемой памяти

  

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

  Application — приложение

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

  Security — безопасность

  

  Просмотр насколько безопасен ваш сайт, в основном используется для отладки HTTPS на сайте.

  Lighthouse — оценка скорости работы сайта

  Это по сути «Google Page Speed» внутри браузера, избавляет вас от перехода на страницу данного инструмента для теста там.

  • С правой стороны есть настройки, что именно вам хочется проверить, а так же на каком типе устройства требуется сделать проверку.
  • Результат можно будет сгенерировать кнопкой «Generate report» и через некоторое время будет результат.
  • Для того чтобы очистить и проверить снова — есть кнопка новой проверки.

  Советы и приемы

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

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

  Быстрое переключение файлов

  Быстро получить доступ к файлам сайта — можно используя комбинацию Ctrl + P (Mac: Cmd + P), и выполнить поиск по названию.

  Улучшение читаемости кода

  Немногие знают, что в DevTools есть возможность автоматически разворачивать код, так он проще читается.

  • Проверить данный функционал можно, нажав на <> во вкладке Sources.
  • Очень полезная функция, когда код минифинцирован.

  Изменение HTML элементов

  Во вкладке «Elements» удобно редактировать элементы в браузере, сразу видны изменения на сайте.

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

  Изменение свойств CSS

  Свойства стилей можно изменять в той же вкладке. Удобный и легкий способ изменения внешнего вида сайта мгновенно.

  • Выберите HTML элемент, стиль которого вам нужно поправить, а слева, в панели стилей, изменяйте или добавляйте любое свойство CSS.
  • Можно так же изменить внешность только одного элемента, и можно добавить дополнительный класс.

  Поиск кода

  Быстро найти код поможет команда Ctrl + Shift + F (Mac: Cmd + Opt + F).

  Точки остановки работы кода Javascript (брейкпоинты)

  При отладке кода Javascript полезно указывать брейкпоинты.

  • Во вкладке Sources нажмите на строчку кода, где нужна остановка скрипта, и выполните комбинацию Ctrl + R (Mac: Cmd + R) для перезагрузки страницы.
  • Работа скрипов сайта остановится на выбранном вам месте. Кнопка F8 отвечает за паузу и продолжение выполнения скриптов.

  Переход к нужной вам строке

  Переход выполняется с помощью команды Ctrl + O (Mac: Cmd + O).

  Мы вывели для примера строку 256 и столбец 15.

  Несколько курсоров

  К примеру — у вас несколько строк или частей кода, и вам нужно что-то добавить.

  Вы можете ввести команду Ctrl + Click (Mac: Cmd + Click), и у вас будет возможность вводить информацию в несколько строк одновременно.

  Положение консоли

  1. Вы можете изменить положение Chrome DevTools в браузере и даже отстыковать его от окна, чтобы использовать например на втором мониторе. Или просто закрепить в определенном положении в окне.
  2. Изменить можно сочетанием клавиш Ctrl + Shift + D (Mac: Cmd + Shift + D) или через меню внутри консоли разработчика.

  Очистить кеш и куки

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

  • Очистить куки можно во вкладке Application — слева меню Storage — Cookies.
  • Нажимая на эти файлы правой кнопкой, можно очистить их.
  • Чтобы отключить кеширование, нажмите на Настройки (шестерня) и найдите в таблице Network пункт- «Disable cache». Теперь когда вы находитесь в консоли разработчика, кеш сайта не будет сохраняться.

  Режим медиа устройства

  Проверить свой вебсайт на адаптивность можно в специальном режиме устройства.

  • В данном режиме можно проверить совместимость вашего сайта с популярными форматами гаджетов и место разрыва страницы, чтобы применить там media query.
  • В режиме просмотра на устройстве, можно нажать на значок планшета в DevTools или зажать Ctrl + Shift + M (Mac: Cmd + Shift + M).
  • Вы можете выбрать мобильное устройство из списка доступных, или задать разрешение самостоятельно. Во втором случае нужно кликнуть — Responsive.
  • Также можно изменить положение устройства.

  Цветовая палитра и её подбор

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

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

  Изменение цветового формата

  Для переключения между цветовыми моделями RGBA, HSL, HEX можно используя комбинацию клавиш Shift + Click на цветовом блоке.

  Переключить состояние элемента

  • Еще один полезный инструмент называется – «Toggle Element State», служит для просмотров скрытых стилей. Стили активируются, при наведении мышкой на элемент или нажатие на него.
  • Инструмент позволяет вам изменять состояние элемента, например «hover», чтобы вы могли посмотреть, как он будет выглядеть на сайте, не перемещая каждый раз на него мышку.

  История сетевой загрузки

  Данная функция покажет, загрузку страницы с первой секунды до окончания.

  • Она захватывает во время загрузки снимки экрана. Можно увидеть, как отображается шрифт и есть ли проблемы с загрузкой шрифтов.https://www.keycdn.com/blog/web-font-performance
  • В панели «Network» можно также сделать настройку, нажав на значок и отметив Capture screenshots. Теперь перезагрузите страницу комбинацией Ctrl + R (Mac: Cmd + R).

  Производительность

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

  Для запуска нажмите Ctrl + E (Mac: Cmd + E) и обновите страницу Ctrl + R (Mac: Cmd + R).

  Остановить можно нажав на Finish.

  Регулирование сети

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

  • Если у посетителя вашего сайта — медленный интернет, ему поможет данный инструмент.
  • В панели «Network» нажмите «Online» (установка по умолчанию) и выбирайте значение или уже из готовых, или создайте свой профиль кнопкой «Add».
  • Можно установить скорость загрузки, отдачи и задержку (например, чтобы проверить скорость в других странах).

  Безопасность

  • В данной панели можно проверить, действителен ли ваш сертификат, является ли соединение — безопасным.
  • Отлично подходит для миграции на HTTPS и исправлении Mixed content.

  Заключение

  Надеюсь, вы заметили, как много полезных функций имеет DevTools в браузере Chrome.

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

  Если мы не рассказали, о какой – то из функций, напишите нам об этом в комментариях.

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

  Консоль разработчика в браузере — подробный гид по использованию для маркетолога

  

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

  Что такое консоль разработчика

  

  Консоль разработчика (Development Console) — это панель в браузере, которая содержит несколько вкладок, отражающих те или иные элементы и свойства сайта. Эти вкладки называют инструментами разработчика, или DevTools. Для маркетологов сайт компании — это источник продаж. Важно оценить юзабилити, дизайн, скорость его работы — все, что поможет продавать больше. С помощью консоли разработчика можно редактировать содержание сайта в браузере (ваша версия не будет доступна на устройствах других пользователей), наметить изменения и сформулировать задачу для разработчиков.

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

  Запуск инструментов разработчика в разных браузерах практически идентичен. Их можно открыть с помощью клавиши F12, комбинации кнопок на клавиатуре или функции просмотра кода в самом браузере. Алгоритм запуска с помощью клавиатуры может отличаться в зависимости от вашего устройства. Например, на некоторых ПК кнопка F12 переводит устройство в режим полета, — чтобы открыть консоль разработчика, необходимо зажимать дополнительные клавиши.

  Google Chrome

  • Нажмите на клавиатуре F12 (или Fn + F12) или комбинацию Ctrl + Shift + I.
  • Кликните в любом месте страницы правой кнопкой и активируйте опцию «Просмотр кода страницы».
  • Откройте настройки браузера — кликните на иконку с тремя вертикальными точками в правом верхнем углу страницы. Наведите курсор на «Дополнительные инструменты» — «Инструменты разработчика» и активируйте функцию.

  

  Яндекс

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

  • С помощью комбинации Ctrl + Shift + I.
  • Через меню в правой части окна вверху. Путь: «Дополнительно» — «Дополнительные инструменты» — «Инструменты разработчика».

  Safari

  Это браузер для iOS. Способы открытия DevTools:

  • Комбинация клавиш Command + Option + I.
  • Меню настроек в верхнем левом углу окна. Необходимо последовательно активировать опции «Настройки» — «Разработка» — «Показать веб-инспектор».

  

  Маркетинг

  Читайте также:

  Обзор лучших приложений для записи клиентов

  Похожие публикации:

  1. Noreply mdlp crpt ru что это
  2. Как переслать архив по почте
  3. Как посмотреть скрытые фотографии вконтакте
  4. Настройки брандмауэра windows 10 где найти