Какие вкладки и функции Chrome DevTools наиболее полезны для фронтенд-разработки и отладки?

Давай я тебе сейчас, как есть, разложу по полочкам этот ваш Chrome DevTools, а то смотрю — народ тыкается, как слепой котёнок в углу. Инструмент-то, блядь, мощнейший, а используют его на уровне «ой, а где тут консолька?».

Ну, слушай сюда, разберём по косточкам, что к чему.

Elements — это типа твой рентген для страницы. Ты тут можешь весь HTML и CSS потрогать, как живого. Нашёл какой-то элемент — кликнул по нему правой копыткой, «Inspect». И пошло-поехало: смотришь, какие стили на него навешаны, какие от родителя прилетели, а какие браузер сам, сука, придумал. Хочешь — меняй значения на лету, смотришь, как оно будет. Хочешь — эмулируй, будто на элемент навели курсор (:hover) или в инпут тычутся (:focus). Просто находка, когда твой flexbox ведёт себя как последняя манда и никак не хочет центроваться.

Console — это, блядь, святая святых. Тут не только console.log('Привет, я дебил') писать можно. Тут можно весь JS-код страницы на коленке переписать, переменные потрогать, функции вызвать. А самое главное — debugger. Вставил эту строчку в код, страница перезагрузилась, и — оп-па! — выполнение встало колом, как вкопанное. Сидишь теперь и смотришь, что в переменных творится, шагаешь по строчкам. Красота, ёпта!

// Вот смотри, как отлаживать событие
document.querySelector('#submitBtn').addEventListener('click', (e) => {
  console.log('Кликнули, блядь!', e.target); // Сначала логируем
  debugger; // А потом — стоп-кран! Теперь смотри, что за объект 'e' и что в 'target'
});

Network — вот это вротберунчик для всех, кто с бэкендом работает. Открыл эту вкладку, перезагрузил страницу — и видишь ВСЁ: каждый запрос, каждый чих. Куда ушёл, что пришло, сколько времени ебалась, какой размер. Статусы 4xx/5xx — сразу видно, где твой бэкенд тебя послал нахуй. А если фильтры включить (XHR/JS или WS), то вообще чисто твои асинхронные вызовы или веб-сокеты. Без этого — как без рук.

Sources — это уже для серьёзных пацанов, которые в отладчике шагают. Тут тебе и брейкпоинты на конкретные строчки, и просмотр стека вызовов, когда всё наебнулось, и source maps, чтобы в минифицированном коде не ковыряться, а в оригинальном. Просто кладезь.

Application — сюда заходишь, когда нужно поковыряться в том, что приложение в браузере накопило. LocalStorage, SessionStorage, кукисы всякие — всё как на ладони. Можешь почистить, добавить, изменить. Особенно весело, когда в IndexedDB лезть приходится — там такой адский интерфейс, что волосы дыбом.

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

Lighthouse — это такой внутренний надзиратель. Нажимаешь кнопочку — он прогоняет твою страницу по куче правил: быстро ли грузится, доступна ли для людей с ограничениями, хорошо ли для SEO, нет ли кривых костылей. Потом выдаёт отчёт, где всё разжевано: вот тут ты — пидарас, вот тут — молодец, а вот здесь нужно вот так поправить. Очень отрезвляет, блядь.

И главный лайфхак, чтоб его: Не тыкай мышкой по меню, как бабка по кнопкам лифта. F12 или Ctrl+Shift+I (на Маке — Cmd+Opt+I) — и ты уже в деле. Запомни эту хуйню, и жизнь станет проще.