Если у вас установлен веб-браузер Google Chrome, у вас под рукой будет чрезвычайно мощный репертуар инструментов отладки. Многие из этих инструментов для уничтожения ошибок имеют низкий порог входа — вам не нужно быть лицензированным и связанным истребителем, чтобы использовать их. В этом посте я кратко расскажу об основах отладки с использованием точек останова, панели "область действия" и панели "отслеживание".
Примечание для контекста.Все эти три инструмента можно найти на вкладке "Источники" в верхней части DevTools (которую, кстати, вы можете открыть прямо сейчас, нажав Command + Alt + J). ). По умолчанию на боковой панели в разделе «Источники» перечислены все файлы, которые использует открытая в данный момент веб-страница (все ее HTML, CSS, JS и т. д.). Если вам нужна более изолированная среда, похожая на песочницу, переключите вкладку боковой панели со «Страницы» на «Фрагменты» — фрагменты отлично подходят для игры с кодом JavaScript без необходимости предварительной настройки всей файловой структуры HTML. Просто напишите/вставьте свой код JS и взаимодействуйте с ним через консоль. Я буду использовать фрагмент для оставшейся части этого поста.
ПЕРЕД: Точки останова
Точки останова, пожалуй, самый фундаментальный элемент рабочего процесса отладки. Проще говоря, точка останова говорит интерпретатору JavaScript: «оценить весь код до этой строки, а затем заморозить».
Обычно выполнение всего кода в скрипте занимает секунды, а часто даже меньше. Заморозив выполнение на одной строке, вы сможете сделать взвешенную и обоснованную оценку существующего в этот момент виртуального мира. Вы можете видеть, какие переменные доступны в данный момент. Вы можете видеть, какая функция в данный момент находится в процессе выполнения. А затем вы можете шаг за шагом пройтись по оставшемуся коду, тщательно отыскивая точный момент, когда ваш код перестанет вести себя так, как вы ожидали.
Точки останова позволяют нам постепенно оценивать участки кода со скоростью обезьяньего мозга, а не со скоростью процессора.
Итак, давайте поместим один! Разместить точку останова очень просто, но сначала нам нужно решить, куда она должна идти. Если у вас есть подозрение, что ваша ошибка возникает в определенной функции или выражении, перейдите к этому месту в своем коде. Однако не ставьте точку останова именно в этом месте — моменты выполнения, непосредственно предшествующие ошибке, часто бывают более полезными, чем сама ошибочная строка кода. Имея это в виду, найдите строку вашего кода, которая будет выполняться на несколько шагов раньше подозрительного кода с ошибками.
Вы можете установить точку останова, щелкнув номер строки (вы должны увидеть маленькую синюю стрелку) или вставив debugger; строку выше, где вы хотите, чтобы выполнение было остановлено. Теперь, когда вы нажимаете кнопку воспроизведения «Выполнить», код будет выполняться до этой строки, а затем останавливается.
Теперь самое интересное…
ВТОРОЕ: панель «Область»
После того, как выполнение нашего кода было остановлено в определенный момент, в нашем распоряжении есть множество инструментов, чтобы понять, что происходит в этот момент. Главным среди этих инструментов является панель области.
Здесь мы можем видеть значение всех переменных и функций в текущем контексте выполнения, а также любые другие контексты, доступные в настоящее время (т. е. глобальный контекст, окружающий контекст (контексты) и любые замыкания). По мере выполнения кода эти значения будут обновляться — массивы получат свои значения .push()ed, переменные итерации в циклах будут увеличиваться, текущее значение this будет обновляться… каждый отдельный фрагмент данных в вашем коде будет отображаться перед вами, конкретный к текущему контексту. Я не могу переоценить полезность этой информации при отладке.
Как вы понимаете, само количество этой информации может стать довольно большим — даже в этом очень простом однофункциональном сценарии, который я написал, отображается несколько значений, каждое из которых имеет свое собственное раскрывающееся меню, отображающее даже больше информация. Это потрясающе! Но если нас интересуют только одно или два конкретных значения в данный момент — а часто так и есть — каскад других значений — это просто шум, который нам приходится тщательно просеивать. Если бы только был способ отслеживать только те значения, которые нас сейчас интересуют…
ТРИ: Панель просмотра
Панель просмотра — всего на пару делений к северу от панели области — позволяет нам сделать именно это. Здесь вы можете нажать кнопку +, чтобы добавить имя любого значения, которое вы хотите отслеживать. В приведенном выше случае я ввел переменную word. В данном конкретном случае word является переменной в вызове функции .map(), и ее значение будет меняться по мере повторения каждого элемента массива. По мере того, как я выполняю свой код и выполняются эти итерации, word будет обновляться на панели просмотра с его текущим значением.
Заключение
Эти три инструмента оказались чрезвычайно мощными в моем путешествии по разработке программного обеспечения. До того, как я их изучил, я находил отладку разочаровывающей и утомительной, но теперь охота за ошибками доставляет истинное удовольствие. Если вы еще не нашли время, чтобы добавить эти инструменты в свой репертуар, я настоятельно рекомендую сделать это своим следующим приоритетом. Наслаждаться!
