← Браузер/DevTools: инструменты разработчика#182 из 383← ПредыдущийСледующий →+15 XP
Полезно по теме:Гайд: как учить JavaScriptПрактика: async и сетьТермин: Event LoopТермин: Core Web Vitals

DevTools: инструменты разработчика

DevTools — это встроённый в браузер набор инструментов, который превращает отладку из гадания в систематическое исследование. Открывается по F12 или Ctrl+Shift+I (Cmd+Option+I на Mac).

Elements (Элементы)

Показывает живое DOM-дерево страницы. Ты можешь прямо здесь изменять HTML и CSS, и изменения немедленно отражаются на странице (без сохранения). Правая панель Styles показывает все применённые CSS-правила, откуда они пришли и можно ли их переопределить.

Особенно полезно: инспектировать элемент правой кнопкой мыши → «Inspect» / «Просмотреть код». Браузер сразу выделит его в DOM-дереве.

Console (Консоль)

Не только для console.log. Полноценный REPL: можно писать JavaScript, обращаться к DOM, вызывать функции из кода страницы. Полезные методы:

  • console.log — обычный вывод
  • console.error — ошибка (красным)
  • console.warn — предупреждение (жёлтым)
  • console.table — массив объектов в виде таблицы
  • console.group / console.groupEnd — группировка вывода
  • console.time / console.timeEnd — встроенный таймер
  • console.count — счётчик вызовов
  • console.log('%c текст', 'color: red')' — стилизованный вывод

    • Network (Сеть)

    Показывает все HTTP-запросы: URL, метод, статус, размер, время. Waterfall-диаграмма показывает порядок и длительность запросов. Можно:

  • Фильтровать по типу (XHR, Fetch, JS, CSS, Img)
  • Имитировать медленное соединение (Throttle)
  • Отключить кеш (Disable cache)
  • Кликнуть на запрос → вкладки Headers, Payload, Response, Timing

    • Performance (Производительность)

    Профилировщик производительности. Запись → взаимодействие → стоп — и видишь детальный тайминг: Main Thread (JavaScript, Layout, Paint), FPS, CPU, Memory.

    Ищи «Long Tasks» — задачи длиннее 50мс, которые вызывают лагание.

    Application (Приложение)

    Управление хранилищами: localStorage, sessionStorage, IndexedDB, cookies, Cache API. Можно просматривать, редактировать и удалять данные. Также здесь: Service Workers, Manifest (для PWA).

    Sources (Источники)

    Просмотр исходного кода, расстановка брейкпойнтов. Вкладки: Navigator (файлы), Editor (код), Debugger. Брейкпойнты бывают:

  • Строчные (кликнуть на номер строки)
  • Условные (правая кнопка → «Add conditional breakpoint»)
  • DOM-изменений (Elements → Break on subtree modifications)
  • XHR/Fetch (остановить на запросе к определённому URL)

    • При остановке на брейкпойнте: переменные в панели Scope, стек вызовов в Call Stack, кнопки шаг вперёд/зайти в функцию/выйти из функции.

    Performance Marks API

    performance.mark() и performance.measure() позволяют добавить собственные маркеры в таймлайн DevTools. Они отображаются в панели Performance как цветные метки, что упрощает анализ производительности кода.

    Примеры

    Расширенные возможности console и Performance Marks API

    // console.table — удобно для массивов объектов
const users = [
  { id: 1, name: 'Анна', role: 'admin', active: true },
  { id: 2, name: 'Борис', role: 'user', active: false },
  { id: 3, name: 'Вера', role: 'user', active: true },
]
console.table(users)  // Красивая таблица в DevTools

// console.group — группировка связанных сообщений
console.group('Загрузка данных')
console.log('Начало запроса')
console.time('fetchTime')
// ... запрос ...
console.timeEnd('fetchTime')  // fetchTime: 123.45мс
console.groupEnd()

// console с CSS-стилями — для выделения важных сообщений
console.log('%c ВНИМАНИЕ %c Найдена устаревшая зависимость',
  'background: orange; color: white; font-weight: bold; padding: 2px 4px;',
  'color: inherit'
)

// debugger — программный брейкпойнт
function calculate(a, b) {
  debugger  // DevTools остановится здесь, если открыт
  return a * b + Math.sqrt(a)
}

// Performance Marks — собственные маркеры в таймлайне
performance.mark('component-start')  // метка начала

// ... тяжёлая работа ...
const data = Array.from({ length: 10000 }, (_, i) => ({ id: i, val: i * 2 }))
const filtered = data.filter(x => x.val % 3 === 0)

performance.mark('component-end')  // метка конца

// Создаём измерение между метками
performance.measure('component-render', 'component-start', 'component-end')

const [measure] = performance.getEntriesByName('component-render')
console.log(`Время рендера: ${measure.duration.toFixed(2)} мс`)

    DevTools: инструменты разработчика

    DevTools — это встроённый в браузер набор инструментов, который превращает отладку из гадания в систематическое исследование. Открывается по F12 или Ctrl+Shift+I (Cmd+Option+I на Mac).

    Elements (Элементы)

    Показывает живое DOM-дерево страницы. Ты можешь прямо здесь изменять HTML и CSS, и изменения немедленно отражаются на странице (без сохранения). Правая панель Styles показывает все применённые CSS-правила, откуда они пришли и можно ли их переопределить.

    Особенно полезно: инспектировать элемент правой кнопкой мыши → «Inspect» / «Просмотреть код». Браузер сразу выделит его в DOM-дереве.

    Console (Консоль)

    Не только для console.log. Полноценный REPL: можно писать JavaScript, обращаться к DOM, вызывать функции из кода страницы. Полезные методы:

  • console.log — обычный вывод
  • console.error — ошибка (красным)
  • console.warn — предупреждение (жёлтым)
  • console.table — массив объектов в виде таблицы
  • console.group / console.groupEnd — группировка вывода
  • console.time / console.timeEnd — встроенный таймер
  • console.count — счётчик вызовов
  • console.log('%c текст', 'color: red')' — стилизованный вывод

    • Network (Сеть)

    Показывает все HTTP-запросы: URL, метод, статус, размер, время. Waterfall-диаграмма показывает порядок и длительность запросов. Можно:

  • Фильтровать по типу (XHR, Fetch, JS, CSS, Img)
  • Имитировать медленное соединение (Throttle)
  • Отключить кеш (Disable cache)
  • Кликнуть на запрос → вкладки Headers, Payload, Response, Timing

    • Performance (Производительность)

    Профилировщик производительности. Запись → взаимодействие → стоп — и видишь детальный тайминг: Main Thread (JavaScript, Layout, Paint), FPS, CPU, Memory.

    Ищи «Long Tasks» — задачи длиннее 50мс, которые вызывают лагание.

    Application (Приложение)

    Управление хранилищами: localStorage, sessionStorage, IndexedDB, cookies, Cache API. Можно просматривать, редактировать и удалять данные. Также здесь: Service Workers, Manifest (для PWA).

    Sources (Источники)

    Просмотр исходного кода, расстановка брейкпойнтов. Вкладки: Navigator (файлы), Editor (код), Debugger. Брейкпойнты бывают:

  • Строчные (кликнуть на номер строки)
  • Условные (правая кнопка → «Add conditional breakpoint»)
  • DOM-изменений (Elements → Break on subtree modifications)
  • XHR/Fetch (остановить на запросе к определённому URL)

    • При остановке на брейкпойнте: переменные в панели Scope, стек вызовов в Call Stack, кнопки шаг вперёд/зайти в функцию/выйти из функции.

    Performance Marks API

    performance.mark() и performance.measure() позволяют добавить собственные маркеры в таймлайн DevTools. Они отображаются в панели Performance как цветные метки, что упрощает анализ производительности кода.

    Примеры

    Расширенные возможности console и Performance Marks API

    // console.table — удобно для массивов объектов
const users = [
  { id: 1, name: 'Анна', role: 'admin', active: true },
  { id: 2, name: 'Борис', role: 'user', active: false },
  { id: 3, name: 'Вера', role: 'user', active: true },
]
console.table(users)  // Красивая таблица в DevTools

// console.group — группировка связанных сообщений
console.group('Загрузка данных')
console.log('Начало запроса')
console.time('fetchTime')
// ... запрос ...
console.timeEnd('fetchTime')  // fetchTime: 123.45мс
console.groupEnd()

// console с CSS-стилями — для выделения важных сообщений
console.log('%c ВНИМАНИЕ %c Найдена устаревшая зависимость',
  'background: orange; color: white; font-weight: bold; padding: 2px 4px;',
  'color: inherit'
)

// debugger — программный брейкпойнт
function calculate(a, b) {
  debugger  // DevTools остановится здесь, если открыт
  return a * b + Math.sqrt(a)
}

// Performance Marks — собственные маркеры в таймлайне
performance.mark('component-start')  // метка начала

// ... тяжёлая работа ...
const data = Array.from({ length: 10000 }, (_, i) => ({ id: i, val: i * 2 }))
const filtered = data.filter(x => x.val % 3 === 0)

performance.mark('component-end')  // метка конца

// Создаём измерение между метками
performance.measure('component-render', 'component-start', 'component-end')

const [measure] = performance.getEntriesByName('component-render')
console.log(`Время рендера: ${measure.duration.toFixed(2)} мс`)

    Задание

    Используй console.time/timeEnd чтобы измерить время выполнения четырёх операций с массивом из 100 000 элементов: for-цикл, forEach, map, filter. Выведи результаты и определи самую быструю операцию.

    Подсказка

    console.time("метка") начинает отсчёт, console.timeEnd("метка") останавливает и выводит время. Метки должны совпадать. Используй arr.forEach(), arr.map(), arr.filter() — это методы массива.

    Загружаем среду выполнения...
    Загружаем AI-помощника...