Дебаг кода — это неотъемлемая часть работы фронтенд-разработчиков. Но что делать, если вы работаете с большим проектом, где обычный поиск по файлу не помогает? Сегодня я расскажу о функции Search в DevTools Chrome, которая ускорит вашу работу и сделает поиск по коду проще.
Когда речь заходит о дебаге, большинство из нас сразу тянется к привычной вкладке Sources в Chrome DevTools. Я тоже всегда так делал: открывал DevTools, нажимал Ctrl + P, вводил название нужного файла – и готово! Но однажды обнаружил инструмент, который помогает искать по всем файлам в проекте без лишних хлопот. Сегодня расскажу о вкладке Search и о том, как её использовать для поиска прямо по коду.
💡 Почему вкладка Search полезна?
- Быстро найдёт нужный фрагмент текста по всему проекту. Особенно актуально, если ты используешь Module Federation или работаешь с бандлом без sourcemap'ов, когда код слит в один большой файл. В таких случаях обычный поиск по файлу не сработает — нужно искать по всей структуре приложения.
- Поддерживает регулярные выражения и поиск с учётом регистра. Это облегчает точное нахождение нужных кусочков кода, от переменных до функций, даже если код был преобразован в более ранние версии ES-синтаксиса.
🌐 Как включить вкладку Search и начать пользоваться:
- Открой DevTools, если ты еще не там (F12 или Ctrl + Shift + I).
- На любой вкладке нажми Esc – появится нижняя панель. Там по умолчанию откроется вкладка Console или What's New.
- В нижней части справа найди вкладку Search (если её нет, нажми на три точки и выбери её из списка).
- Теперь ты готов к поиску! В поле Search введи нужный текст или выражение.
- Жми Enter, и перед тобой появится список всех совпадений в загруженных файлах. Кликни по нужному результату, и DevTools автоматически откроет вкладку Sources с этим файлом.
И вот ты уже в нужном месте кода и можешь спокойно начинать дебаг!
Совет: лучше искать по названиям функций или переменных, поскольку преобразованный код может отличаться от оригинального.
Попробуй использовать вкладку Search и поделись своим опытом! Какие инструменты DevTools тебе помогают больше всего в дебаге?
Больше лайфхаков и полезных материалов вы найдете в моем Telegram-канале Frontmind. Присоединяйтесь!
#DevTools #Frontend #JavaScript #программирование #дебаг #лайфхаки