Comments 17
А этот отладчик умеет расставлять BreakPoint'ы перед тем, как страница будет загружена? Например, я хочу брякаться на каждом eval или на запуске очередного скрипта...
Я не понял, как связать eval и загрузку страницы. Если уточните, попробую ответить.
По поводу расстановки точек останова до загрузки страницы, так нельзя. Если файла нет — негде точки расставлять.
Но если один раз загрузить ресурсы и расставить точки, то браузер запомнит их между перезагрузками страницы и даже закрытием DevTools. Такое поведение во всех браузерах, не только Firefox.
Как это "негде"? На встроенных функциях типа eval или на старте скрипта. Для обычных исполняемых файлов у меня отладчик останавливается перед выполнением любого кода и я могу расставить бряки перед тем как что-то выполнится. В FF, да и в хроме, так нельзя, выходит.
Не привязанные точки останова можно поставить заранее, для паузы на старте:
Точки останова обработчиков → Script → Script First Statement.
В Хроме похожее тоже есть.
С отслеживанием eval не сталкивался. Думаю, тоже можно найти что-то.
Вообще я тоже не представляю зачем вам это надо, но, забавно что можно попробовать сэмулировать поведение, которое вы ожидаете, введя в отладчике файрфокса в "выржания для отслеживания" что-то в духе:eval('console.trace();'); // наверняка есть какой-нибудь паттерн, типа регэкспа
В Chrome DevTools есть хэлперы в консоли. Функция debug() позволяет приостановить выполнение при вызове определенной функции.
Я попробовал завязаться на eval, но у меня не вышло. Возможно, дело в примере на коленке. Возможно, встроенные функции хэлпер не отслеживает. Надо тестировать.
p.s. В Firefox хэлперы тоже есть, но вот именно такого - нет.
Сказать честно вообще не понимаю зачем при нормальной разработке нужен этот дебаггер.
Мне лично он понадобился за всё время работы с JS только раз, когда я ковырялся в каком-то абсолютно шизоидном легаси, для которого не было исходника и нужно было найти и исправить ошибку уже в билде.
Да и в принципе отладчик этот интуитивно понятен (по сравнению с каким-нить C++ дебаггером) и не перегружен функциональностью, не понимаю кому может описание понадобиться...
Оригинал и моя адаптация нацелены на джунов и смежных специалистов, вроде бэкендеров. И у тех, и у других мало опыта в JavaScript, а ошибку найти нужно. Здесь отладчик приходит на помощь.
В остальных случаях отладчик действительно полезен в легаси или незнакомом коде, когда нужно понять происходящее в райнтайме.
Проблема статьи, имхо, в том, что те кто знает как работают дебагеры, в вашей статье просто не нуждаются. А те кто нет, всё равно ничего не поймут.
Точки останова — список всех указанных в отладчике точек останова с возможностью включить-выключить каждую. Для удобства разработчика отдельно выделены точки останова в HTTP-запросах (XHR, fetch), обработчиках событий и на изменения DOM.
Вот я ставлю себя на место новичка. Вижу что есть какие-то точки останова, есть какие-то XHR, что-то где-то выделено. Но что это? Что за точки? Что они останавливают? Как этим пользоваться? Что такое XHR? А можно не точки, а кривые безье? А кривые безье останова?
Вот я ставлю себя на место опытного разработчика. Отладчик находится там где я его и искал бы, устроен так как я ожидаю. Интерфейс стандартный. Зачем мне нужна статья? Чтобы догадаться, что в панели с breakpoint-ми будут… внезапно, breakpoint-ы?
Честно говоря я вообще не понял статью. Если убрать всю воду про роль Firefox в современном мире и про то что дебаггер это полезный инструмент, остаётся несколько абзацев в стиле КО и пара скриншотов. Если без воды, то статья какая-то совсем крошечная (зато 1 из 4).
Что было бы действительно интересно почитать про Firefox Dev Tools:
- Опытным разработчикам: всякие тонкости и рецепты. Особенно то чего нет в Chrome DevTools или есть, но сделано хуже. Ну или скажем, как найти то, что никто найти не может, т.к. расположено где-нибудь в контр-интуитивном месте.
- Новичкам: готовые пошаговые рецепты решения каких-нибудь типовых проблем. Например дебаг разобрать на примере какого-нибудь бага. Интерактивно. Показать как значения переменных можно подглядеть, как листать timemashine в обратную сторону, что такое stacktrace, как изменять значения "на лету", виды "шагов" и т.д… Но это будет большая статья (раз в 10 больше текущей).
Так потому 1/4, что дальше будет на примере отладки раскрываться каждая часть:
Не пугайтесь незнакомых слов. Каждую часть отладчика и её назначение мы разберём далее. Пока что запомните, где что находится
Чего должно хватить новичкам. Конечно, с поправкой, что JavaScript они знают.
Можно было склеить всё в одно, но я решил придерживаться оригинальной разбивки, чтобы не вышло простыни.
остаётся несколько абзацев в стиле КО и пара скриншотов
Конечно, для человека, который пишет статью "Хитрости при отладке", введение будет "в стиле КО".
Здесь даже спорить не о чём.
Вижу что есть какие-то точки останова, есть какие-то XHR, что-то где-то выделено. Но что это? Что за точки? Что они останавливают? Как этим пользоваться? Что такое XHR? А можно не точки, а кривые безье? А кривые безье останова?
Что такое точки останова, во второй части ;-)
p.s. Ещё тестировщики пользуются.
Основные возможности действительно интуитивно понятны, но некоторые редкие функции приходится изучать. Правда такие вещи уже за пределами этого гайда, в документациях: Firefox DevTools, Chrome DevTools.
Решил недавно попробовать Chrome, так как VueDevTools в Firefox по ощущениям имеет утечки памяти.
И хоть оператива перестала улетать в трубу, но вот ковырять стили в Chrome адская боль - подсветка элементов DOM моментально отваливается, вместо стилей вылезают спецсимволы от отключенных правил и ещё куча неприятных багов, тормозящих работу и выбирающих из колеи.
Да, хотя DevTools как строка поиска, одинаковая у всех, в некоторых деталях инструменты отличаются.
К сожалению, тут нет одного фаворита. Что-то лучше в Chrome, что-то в Firefox, что-то в Safari. И это хорошо!
Благодаря разнообразию, мы можем пользоваться несколькими инструментами. Выбирая под задачу тот, который удобнее.
Об этом мой манифест в начале статьи.
Введение в отладку на примере Firefox DevTools, часть 1 из 4