FrontMind

Каждый разработчик сталкивается с ситуацией, когда что-то идёт не так, и нужно понять, где зарыта ошибка. У всех есть свои инструменты и подходы, многие используют только console.log, некоторые дебажат в IDE. Сегодня я поделюсь с вами тем, что лучше всего работает для меня. Возможно, это поможет вам улучшить процесс отладки. Использование Chrome DevTools Удобнее всего использовать Chrome DevTools. Вот мой алгоритм: Когда срабатывают брейкпоинты, я внимательно изучаю стек вызовов. Использование вкладки...

Раньше создавая свои первые проекты на React, я не задумывался об архитектуре. Мой фокус был на том, чтобы просто заставить приложение работать — без лишних сложностей. Однако со временем я начал замечать, как отсутствие структуры мешает масштабировать проект, добавлять новые фичи и даже просто находить нужный код. Все проекты были похожи — стандартный набор components, store, utils и т.д. Всё работало, но каждый новый функционал превращал проект в лапшу из кода. Найти нужный компонент было сложно, циклические связи мешали расширять проект, а поддержка напоминала квест...

Наверное в каждом проекте есть несколько enum'ов, значения которых надо обработать по разному, например enum состояния - в зависимости от которого у нас может меняться отображение. В начале все идет хорошо, но через какое то время в эти enum'ы добавляются новые значения и вот тут возникают проблемы — легко упустить: поправить все switch и if условия, где они используются. Вроде мелочь, но сколько раз вы натыкались на ошибки, когда код просто не ожидал определённого значения? 🙈 Тогда я начал искать...

В нашей команде есть своя библиотека компонентов, и, как это часто бывает, в начале мы не уделяли должного внимания правильному версионированию. 😅 Часто сталкивались с проблемами совместимости: новая версия могла сломать старый код, и мы не понимали, какую версию можно использовать без страха. Но всё изменилось, когда мы решили внедрить связку Changelog и Semantic Versioning. Это было настоящим откровением! 💡 Changelog — это журнал изменений, в котором фиксируются все изменения, добавленные в библиотеку...

Каждый из нас знает про text-overflow: ellipsis — ту самую магию, что обрезает текст и добавляет многоточие «…», если он не помещается в контейнер. А что делать, если хочется показывать title только тогда, когда текст обрезан? Раньше мне казалось, что это невозможно… но решение оказалось проще, чем я думал! 👌 Трюк, который решает задачу: сравниваем внутренние размеры элемента (clientWidth и clientHeight) с его размерами с прокруткой (scrollWidth и scrollHeight). Это простое сравнение подскажет, когда текст обрезан, а когда нет...

Дебаг кода — это неотъемлемая часть работы фронтенд-разработчиков. Но что делать, если вы работаете с большим проектом, где обычный поиск по файлу не помогает? Сегодня я расскажу о функции Search в DevTools Chrome, которая ускорит вашу работу и сделает поиск по коду проще. Когда речь заходит о дебаге, большинство из нас сразу тянется к привычной вкладке Sources в Chrome DevTools. Я тоже всегда так делал: открывал DevTools, нажимал Ctrl + P, вводил название нужного файла – и готово! Но однажды обнаружил инструмент, который помогает искать по всем файлам в проекте без лишних хлопот...