🧐 В продолжение поста про отладку выступлю теперь на стороне новых инструментов.
Есть сценарии где просто нельзя дебажится через
1. Условная точка останова. Удивительно, но про эту фишку я узнал года 3-4 назад. Просто делаем правый клик на нужной нам строчке в отладчике и выбираем вариант поставить точку с условием и теперь вы можете написать любое JS выражение, при положительном результате которого сработает точка.
2. Останов на изменении DOM дерева. При нажатии правой кнопкой на нужный нам DOM узел мы можем велеть останавливать выполнение при определенных условиях. Например, при изменении атрибутов. Это очень полезно, когда у вас меняется DOM дерево, а вы не можете понять почему.
3. При остановке выполнения дебагером у вас по-прежнему работает консоль. Более того, вы находитесь в контексте, а значит можете выводить в консоль значение любой локальной переменной из этого контекста. Очень помогает разобраться что и как.
4. Переопределение контента файла. Это вообще безумно крутая штука, которая позволяет вам "на ходу" переопределить любой ресурс и настроить загрузку сайта так, чтобы брался именно переопределенный ресурс. Заходим в Sources, выбираем нужный ресурс, правый клик и выбираем опцию "override content", выбираем куда сохранить переопределенный файл, profit!
5. Сравнение сделанных снапшотов памяти. К своему стыду я узнал про эту фишку чуть больше года назад. Если мы сделали несколько снапшотовов памяти, то выбрав нужный снапшот мы можем настроить фильтр, чтобы показывались только новые объекты по сравнению с другим снапшотом. Это сильно упрощает поиск утечек памяти.
6. Во вкладке Network можно скопировать любой запрос как curl/fetch (тоже через правый клик). Скопируются все заголовки, куки и т.д., а значит вы сможете изолированно воспроизвести запрос с ошибкой и понять в чем дело. Это безумно круто!
В общем даже такой динозавр как я не может не признать, что инструменты отладки проделали огромный путь с времен появления консоли и их уверенное владение - это безусловно плюс и позволит вам сэкономить кучу времени.
А также хочу этим постом подчеркнуть, что сколько бы вы не занимались своим ремеслом, все равно будет много вещей которых вы в моменте можете не знать. И нет абсолютно ничего стыдного, чтобы в этом честно признаться.
Всем базы!
Есть сценарии где просто нельзя дебажится через
console.log. Например, при дебаге prod приложения, или, когда сборка занимает слишком много времени. И этот тот самый случай, когда расчехляем вкладку Sources и ставим точки останова. Но есть некоторые фичи, которые помогут вам значительно ускорить процесс отладки:1. Условная точка останова. Удивительно, но про эту фишку я узнал года 3-4 назад. Просто делаем правый клик на нужной нам строчке в отладчике и выбираем вариант поставить точку с условием и теперь вы можете написать любое JS выражение, при положительном результате которого сработает точка.
2. Останов на изменении DOM дерева. При нажатии правой кнопкой на нужный нам DOM узел мы можем велеть останавливать выполнение при определенных условиях. Например, при изменении атрибутов. Это очень полезно, когда у вас меняется DOM дерево, а вы не можете понять почему.
3. При остановке выполнения дебагером у вас по-прежнему работает консоль. Более того, вы находитесь в контексте, а значит можете выводить в консоль значение любой локальной переменной из этого контекста. Очень помогает разобраться что и как.
4. Переопределение контента файла. Это вообще безумно крутая штука, которая позволяет вам "на ходу" переопределить любой ресурс и настроить загрузку сайта так, чтобы брался именно переопределенный ресурс. Заходим в Sources, выбираем нужный ресурс, правый клик и выбираем опцию "override content", выбираем куда сохранить переопределенный файл, profit!
5. Сравнение сделанных снапшотов памяти. К своему стыду я узнал про эту фишку чуть больше года назад. Если мы сделали несколько снапшотовов памяти, то выбрав нужный снапшот мы можем настроить фильтр, чтобы показывались только новые объекты по сравнению с другим снапшотом. Это сильно упрощает поиск утечек памяти.
6. Во вкладке Network можно скопировать любой запрос как curl/fetch (тоже через правый клик). Скопируются все заголовки, куки и т.д., а значит вы сможете изолированно воспроизвести запрос с ошибкой и понять в чем дело. Это безумно круто!
В общем даже такой динозавр как я не может не признать, что инструменты отладки проделали огромный путь с времен появления консоли и их уверенное владение - это безусловно плюс и позволит вам сэкономить кучу времени.
А также хочу этим постом подчеркнуть, что сколько бы вы не занимались своим ремеслом, все равно будет много вещей которых вы в моменте можете не знать. И нет абсолютно ничего стыдного, чтобы в этом честно признаться.
Всем базы!