Google chrome devtools - консоль разработчика google chrome

Консоль

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

В неё можно перейти, нажав кнопку «Console» вверху-справа, а можно и открыть в дополнение к отладчику, нажав на кнопку или клавишей .

Самая любимая команда разработчиков: .

Она пишет переданные ей аргументы в консоль, например:

// результат будет виден в консоли
for (var i = ; i < 5; i++) {
  console.log("значение", i);
}

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

Точки останова

Открыли файл во вкладке Sources? Кликните на 6-й строке файла , прямо на цифре 6.

Поздравляю! Вы поставили точку останова или, как чаще говорят, «брейкпойнт».

Выглядеть это должно примерно так:

Слово Брейкпойнт (breakpoint) – часто используемый английский жаргонизм. Это то место в коде, где отладчик будет автоматически останавливать выполнение JavaScript, как только оно до него дойдёт.

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

Вы можете видеть, что информация о точке останова появилась справа, в подвкладке Breakpoints.

Вкладка Breakpoints очень удобна, когда код большой, она позволяет:

Быстро перейти на место кода, где стоит брейкпойнт кликом на текст.
Временно выключить брейкпойнт кликом на чекбокс.
Быстро удалить брейкпойнт правым кликом на текст и выбором Remove, и так далее.

Дополнительные возможности

Остановку можно инициировать и напрямую из кода скрипта, командой :
Правый клик на номер строки позволит создать условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.Это удобно, если останов нужен только при определённом значении переменной или параметра функции.

Как открыть Chrome DevTools

Открывается «Инструмент разработчика» через главное меню Хрома.

Жмём на кнопку в виде трёх полос и здесь наводим курсор на пункт «Дополнительные инструменты».
В следующем всплывающем окне выбираем, собственно, «Инструменты разработчика».
Или нажимаем комбинацию клавиш Ctrl + Shift + I для Windows и Command + Option + I на MacOS.
Либо можно просто кликнуть правой кнопкой мыши по любому элементу и в контекстном меню выбрать «Просмотреть код».

Иногда бывает нужно посмотреть на исходник страницы и в этом случае можно выбрать «Просмотр кода страницы» или воспользоваться горячими клавишами, например, F12 для Windows. Открывается он в отдельном окне и представлен в виде сплошного кода, который не редактируется. Его можно просмотреть, скопировать, перейти по имеющимся к коде ссылкам.

Основные кнопки меню и навигации

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

В правой части окна инструментов расположена кнопка, которая закрывает инспектор.
Рядом кнопка «кебаб» – при нажатии на нее появляется выпадающее меню, с перечнем других функций:
Dock Side — окно инструментов разработчика можно перевести несколько режимов:
- слева;
- снизу;
- справа;
- в отдельном окне.

Hide console drawer скрывает консоль в нижней части окна — быстро открыть/закрыть консоль, находясь на любой вкладке, можно клавишей Esc.

Search

Инструмент Search позволяет искать по всем файлам ресурса, связанных с текущей веб-страницей. Чтобы активировать поиск нажмите комбинацию клавиш Ctrl + Shift + F.

Здесь есть дополнительные инструменты и полезные шорткаты, а также настройки и документация. Возле кнопки меню отображаются иконки предупреждения и ошибок, если они есть на странице. При клике на неё можно перейти к просмотру подробностей.

Адаптив

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

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

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

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

Шаг 3: Подробное рассмотрение инструментов для разработчиков

Первым делом нужно запустить приложение в Chrome и открыть инструменты для разработчиков. Вы можете сделать это с помощью клавиатуры, используя комбинацию клавиш CMD-OPT-I (в операционной системе OSX) или CTRL-SHIFT-I (в операционной системе Windows).

Теперь инструменты открыты в браузере, активная вкладка — «Console». Она позволяет в любое время выполнить произвольный код JavaScript.

Попробуйте ввести alert (‘Hello!’); и нажать Enter — вы сразу увидите сообщение.

Вкладка «Консоль» — это полезный инструмент для отладки. Ее можно использовать для проверки кода и оценки переменных при диагностике.

Чтобы приступить к отладке кода, нужно иметь возможность перемещаться по исходному коду. Это осуществляется на вкладке «Sources».

Левая панель этой вкладки содержит древовидное представление всех исходных файлов, загруженных на веб-странице. Вы можете перемещаться по файлам так же, как в IDE. При этом их содержимое будет отображаться в центральной панели. В нижней панели будут представлены все параметры отладки, о которых я расскажу позже. Если много файлов, можно выполнить поиск, воспользовавшись клавиатурной комбинацией CMD-P (для операционной системы OSX) или CTRL-P (для Windows). В нашем приложении проблема возникла в файле index.js. Выберите его из списка слева, чтобы просмотреть содержимое файла.

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

В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:

У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:

Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».

Вы можете запустить приложение из-под Node.js (как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.

Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.

В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.

С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .

Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью — вы попали по адресу и правильно делаете, что читаете эту статью!

Полезные настройки

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

1. Поисковые подсказки в адресной панели

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

2. Автоматическое создание паролей

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

3. Предотвращение перехвата страниц

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

4. Гладкий скроллинг

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

5. Управление звуком на веб-страницах

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

6. Быстрое закрытие вкладок

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

7. Восстановление вкладок

Эта опция позволяет браузеру автоматически восстанавливать вкладки после потери соединения. Так что вам не придётся нажимать кнопку «Обновить».

8. Просмотр сохранённых копий сайтов

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

9. Запрет перелистывать содержимое

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

10. Видео в отдельном окне

Если вы хотите просматривать видео и работать с другой страницей одновременно, включите эту функцию. Затем щёлкните на видео правой кнопкой мыши и в контекстном меню найдите пункт Picture In Picture. Выбрав его, вы увидите ваш ролик во всплывающем окне.

Панель Memory и JavaScript Profiler

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

JavaScript CPU Profiler (был вынесен в отдельную панель JavaScript Profiler ) — позволяет узнать сколько процессорного времени занимает выполнение различных частей вашего JS кода.
Take Heap Snapshot — показывает распределение памяти среди JS объектов и связанные с ним элементы DOM.

Record Allocation Timeline — записывает и отображает распределение памяти между переменными в коде. Эффективен для устранения утечек памяти.

Record Allocation Profile — записывает и отображает распределение памяти на выполнение отдельных JS функций.

Ключевые возможности:

Шаг 3: Подробное рассмотрение инструментов для разработчиков

Левая панель этой вкладки содержит древовидное представление всех исходных файлов, загруженных на веб-странице. Вы можете перемещаться по файлам так же, как в IDE. При этом их содержимое будет отображаться в центральной панели. В нижней панели будут представлены все параметры отладки, о которых я расскажу позже. Если много файлов, можно выполнить поиск, воспользовавшись клавиатурной комбинацией CMD-P (для операционной системы OSX) или CTRL-P (для Windows). В нашем приложении проблема возникла в файле index.js . Выберите его из списка слева, чтобы просмотреть содержимое файла.

Как открыть Chrome DevTools

Открывается «Инструмент разработчика» через главное меню Хрома.

Жмём на кнопку в виде трёх полос и здесь наводим курсор на пункт «Дополнительные инструменты».
В следующем всплывающем окне выбираем, собственно, «Инструменты разработчика».
Или нажимаем комбинацию клавиш Ctrl + Shift + I для Windows и Command + Option + I на MacOS.
Либо можно просто кликнуть правой кнопкой мыши по любому элементу и в контекстном меню выбрать «Просмотреть код».

Основные кнопки меню и навигации

В правой части окна инструментов расположена кнопка, которая закрывает инспектор.
Рядом кнопка «кебаб» – при нажатии на нее появляется выпадающее меню, с перечнем других функций:
Dock Side — окно инструментов разработчика можно перевести несколько режимов:
- слева;
- снизу;
- справа;
- в отдельном окне.

Search

Адаптив

Скриншот-отчет по новому браузеру Chrome

Как вы уже знаете, вышел браузер Google Chrome. Мои первые впечатления просто неописуемы. У меня нет слов. Круто. Если в ближайшее время не найду серьезных проблем, то пересаживаюсь с ФФ. Правда, не хватает некоторых ФФ’эшных аддонов, ну обойдусь как-нибудь. … к делу. Я не поленился и сделал небольшой скриншот-отчетик (можно даже сказать мини-обзор ). Собственно, все основные функции я перечислил. И, что приятно, их немного, но есть все что нужно. Также мы тут с nikolaikopernik скооперировались и я выкладываю его тесты, впечатления и выводы сюда же. nikolaikopernik благодарить обязательно! UPD: Спасибо за комментарии по орфографии и оформлению. Еще раз напомниаю, что топик будет наполнятся и исправляться в соответсвии с пожеланиями. Благодарности : Trept Ingolmo

Остановиться и осмотреться

Наша функция выполняется сразу при загрузке страницы, так что самый простой способ активировать отладчик JavaScript – перезагрузить её. Итак, нажимаем F5(Windows, Linux) или Cmd+R (Mac).

Если вы сделали всё, как описано выше, то выполнение прервётся как раз на 6-й строке.

Обратите внимание на информационные вкладки справа (отмечены стрелками). В них мы можем посмотреть текущее состояние:

В них мы можем посмотреть текущее состояние:

– показывает текущие значения любых выражений.Можно раскрыть эту вкладку, нажать мышью на ней и ввести любое выражение. Отладчик будет отображать его значение на текущий момент, автоматически перевычисляя его при проходе по коду.
– стек вызовов, все вложенные вызовы, которые привели к текущему месту кода.На текущий момент видно, отладчик находится в функции (pow.js, строка 6), вызванной из анонимного кода (index.html, строка 15).
– переменные.На текущий момент строка 6 ещё не выполнилась, поэтому равен .В показываются переменные функции: объявленные через и параметры. Вы также можете там видеть ключевое слово , если вы не знаете, что это такое – ничего страшного, мы это обсудим позже, в следующих главах учебника.В – глобальные переменные и функции.

Панель Network

Позволяет мониторить процесс загрузки страницы и всех файлов которые подгружаются при загрузке. Ее удобно использовать для оптимизация загрузки страниц и мониторинг запросов.
На панели отображается таблица всех запросов к данным и файлам, над ней располагаются кнопки для фильтрации нужных Вам запросов, очистки таблицы или включения/отключения записи запросов, кнопки управления отображением таблицы. Также есть дополнительные переключатели: Preserve log — не очищать таблицу при перезагрузке страницы, Disable cache — отключить кэш браузера (будет работать только при открытом Dev Tools), Offline — эмулирует отсутствие интернета, также соседний переключатель позволяющий эмулировать скорость скачивания/загрузки данных и ping для различных типов сетей.

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

Ключевые возможности:

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

Консоль — общий взгляд

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

в браузере Chrome и Dragonfly для Opera — Ctrl + Shift + I
Firebug — F12

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

# 10. ПАНЕЛЬ PREVIEW ПОЯВЛЯЕТСЯ ТОЛЬКО ЧЕРЕЗ ~ 10 МИНУТ И МНОГОКРАТНО ОБНОВЛЯЕТСЯ

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

Обновление № 3: Брайан Кун объяснил, что вызвало эту проблему:Chrome недавно изменил способ работы с API location.reload (). Это нарушило способность GTM очистить старый (без предварительного просмотра) gtm.js из кеша браузера. В результате вы не увидите предварительную версию gtm.js до истечения этого кешированного значения (~ 15 минут).

Не беспокойтесь, у меня есть удобный способ решения.

Следующее пошаговое руководство предназначено для пользователей Chrome. Если вы используете другой браузер – выполните поиск похожих функций. Я уверен, что другие браузеры предлагают аналогичную функциональность.

В Chrome откройте Инструменты для разработчиков нажмите F12 на Windows или Cmd + Opt + I на Mac или просто перейдите в меню Chrome > Дополнительные инструменты > Инструменты разработчика и панель появится.
Нажмите три точки, расположенные в правом углу (1), а затем выберите «Настройки» (2).
Найдите раздел «Network и установите флажок «Disable cache (while DevTools is open)».
Теперь обновите обе вкладки браузера – с помощью пользовательского интерфейса GTM и вашего сайта (оставьте инструменты разработчика открытыми).

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

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

Свойство не определено

Этот код выдаёт ошибку «Uncaught TypeError: Cannot read property ‘lucky’ of undefined». Дело в том, что объект не имеет свойства , хотя у него есть свойство . Поскольку свойство не определено, мы не можем получить к нему доступ, то есть оно просто не существует. Если мы заменим на , то код вернёт нам «Lucky».

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

Отладка ошибок TypeError

Ошибки типа TypeError появляются, когда вы пытаетесь выполнить действия с данными, которые не соответствуют нужному типу, например применяете к числу, запрашиваете свойство или пытаетесь вызвать как функцию что-то, не являющееся функцией. Например, вы увидите такую ошибку, если вызовете , поскольку это объект, а не функция. В последнем случае вы получите «Uncaught TypeError: yourVariable.bold is not a function» и «girl is not a function».

Для отладки этих ошибок надо разобраться с переменными. Что такое ? И что такое ? Вы можете понять это изучая код, выводя переменные с помощью , используя команду или просто напечатав имя переменной в консоли. Удостоверьтесь, что вы можете манипулировать содержащимся в переменной типом данных. Если тип данных не подходит, модифицируйте его нужным образом, добавьте условие или блок , чтобы контролировать выполнение операции, или используйте эту операцию на другом объекте.