Зарегистрируйтесь для доступа к 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

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

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

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

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

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

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

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

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

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

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

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

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

Есть вопрос или хотите участвовать в обсуждении?

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

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»