Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Консоль разработчика JS: DOM API

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

Анализ ошибок

DevTools Stack Trace

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

Выбранный элемент

devtools доступ к выбранному элементу

Выбрав таким образом элемент, можно переключиться на вкладку console и набрать $0. Так вы получите доступ к этому элементу.

Поиск

devtools поиск элементов

Используя функцию $() можно упростить поиск элементов по селектору. Сравните:

document.querySelector('.row');

// Технически похоже на работу с JQuery, но это не он
$('.row');

console.dir

devtools console.dir

Функция console.dir выводит узлы DOM в формате, удобном для анализа.


Дополнительные материалы

  1. Отладка кода в браузере (видео)
  2. Chrome DevTools

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Для полного доступа к курсу нужен базовый план

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

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов для веб-приложений
6 октября 10 месяцев
Иконка программы Fullstack-разработчик
Профессия
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
6 октября 16 месяцев

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»