Возможно, вы установили шаблон кодирования, который использует несколько ключевых инструментов, предлагаемых консолью вашего браузера. Но копали ли вы глубже в последнее время? Вам доступны несколько мощных инструментов, и они могут революционизировать ваш способ работы.

Зона комфорта

Как разработчики, нам нравится находить способ работы, который заставляет нас чувствовать себя эффективными. Ловушка, однако, заключается в том, что мы привыкаем к определенному рабочему процессу и предполагаем, что нет лучшего способа. Мы усвоили подход, и нам не нужно думать о том, что мы делаем.

Обычный рабочий процесс разработчика состоит в том, чтобы написать код в редакторе, сохранить его, затем переключиться в браузер и загрузить продукт, чтобы проверить, все ли работает. Затем мы используем инструменты разработчика в браузере, чтобы настроить CSS и, возможно, проверить, как продукты реагируют на изменение размера и мобильную эмуляцию. Мы отлаживаем наши скрипты, добавляя console.log () оператор везде, где нам нужна информация, сохраняя тесную связь между номерами строк и отладкой.

Это приводит к небольшому беспорядку. Если вы держите инструменты браузера открытыми при работе в Интернете, вы увидите много сообщений в коде, которые не должны попасть в конечный продукт. Это не только сбивает с толку людей, которые случайно открывают их, но также может пугать новых разработчиков.

Мы используем лишь небольшой процент имеющихся в нашем распоряжении инструментов и можем упустить возможность работать лучше и с меньшими усилиями. Это нормально, но давайте посмотрим, как мы можем добиться большего.

Мы рассмотрим несколько функций свободно доступных инструментов разработчика, которые вы, вероятно, используете, но не знаете. В частности, эти функции есть в инструментах разработчика браузера Chromium и некоторые в Visual Studio Code. Давайте начнем с того, что узнаем больше о многолетнем фаворите — консоли.

Повышение уровня нашей консольной игры

В начале нашей карьеры разработчиков мы привыкли добавлять console.log (thing) в код любое место, чтобы узнать, что происходит. Часто этого достаточно, но иногда вы все равно не получаете нужной информации или она находится в каком-то необработанном формате, который трудно понять.

Вы можете увидеть все следующие трюки, перейдя на эту демо-страницу на GitHub и открыв ее в своем браузере с открытыми инструментами разработчика. (Или просмотрите живую демонстрацию на CodePen).

Первый трюк здесь — добавить фигурные скобки к переменным, которые вы регистрируете. Это не только распечатывает их значение, но и имя переменной. Это облегчает отслеживание в журнале того, откуда пришло значение.

let x = 2;

console.log (x) // 2

console.log ({x}) // {x: 2}

Форматирование журналов

Вы также можете использовать спецификаторы в своем сообщении журнала, которые начинаются со знака процента. Они позволяют регистрировать определенные значения в разных форматах:

%s: журналы в виде строк

%iили%d: журналы как целые числа

%f: регистрирует как значение с плавающей запятой

%o: регистрирует как расширяемый элемент DOM

%O: регистрирует как расширяемый объект JavaScript

Вы можете смешивать и сочетать их. Порядок замены в первой строке соответствует порядку следующих за ней параметров:

console.log ('%ix%s developer’, 10, 'console’) ;

// 10x console developer

Вы даже можете конвертировать с помощью этого, если вы получаете информацию, которая не в том формате, который вам нравится:

console.log ('%i’, 12.34455241234324234) ; // 12

Спецификатор%cпозволяет вам использовать CSS для оформления вашего сообщения журнала, если вы действительно хотите выделиться:

console.log ('%cPay attention to me’,'color: firebrick; font-size:40px’)

Ведение журнала — это здорово, но есть и другие варианты, которые вы можете использовать, чтобы сделать вещи более очевидными и избежать необходимости писать функциональность самостоятельно.

Группировка журналов

Вы можете сгруппировать свои журналы console.group (), чтобы показать их как расширяемые и сворачиваемые группы.

const label = 'The Millenium Falcon Crew’;

console.group (label) ;

console.log ('Leia’) ;

console.log ('Han’) ;

console.log ('Chewie’) ;

console.log ('Ben’) ;

console.groupEnd (label) ;

Переключение групп консоли

Вы можете вкладывать группы, а можете использовать console.groupCollapsed (), чтобы не расширять их по умолчанию:

const extendedlabel = 'The Millenium Falcon Crew extended’;

const meat = 'Humanoids’;

const metal = 'Droids’;

console.group (extendedlabel) ;

console.groupCollapsed (meat) ;

console.log ('Leia’) ;

console.log ('Han’) ;

console.log ('Chewie’) ;

console.log ('Ben’) ;

console.groupEnd (meat) ;

console.group (metal) ;

console.log ('R2D2') ;

console.log ('C3PO’) ;

console.groupEnd (metal) ;

console.groupEnd (extendedlabel) ;

Переключение вложенных групп консолей

Разрешить фильтрацию журналов

Вместо console.log () вы также можете использовать console.info (), console.error () и console.warn (). Это позволяет вам фильтровать сообщения, которые вы видите в консоли, используя боковую панель консоли или селектор уровней. Таким образом, вам будет проще находить собственные сообщения среди сообщений, исходящих от сторонних скриптов и других скриптов вашего проекта.

фильтрация вывода консоли

Другие полезные консольные методы

Вы, вероятно, создали переменные в процессе отладки, которые подсчитывают, как часто вызывался определенный метод или выполнялась функциональность. Вы можете сделать то же самое, используя методы console.count () и. console.countReset () Вы можете создать их сколько угодно и различать по меткам:

console.count ('Chocula’) ; // Chocula: 1

console.count () ; // default: 1

console.count ('Chocula’) ; // Chocula: 2

console.countReset ('Chocula’) ;

console.count () ; // default: 2

console.count () ; // default: 3

console.count ('Chocula’) ; // Chocula: 1

Вы также можете измерить, сколько времени занимает определенная часть вашего скрипта, используя console.time () метод:

console.time ('go’) ;

for (let i = 0; i < 200000; i+=1) {

let x = Math.random () *2000;

}

console.timeEnd ('go’) ; // go: 11.7861328125 ms

В зависимости от данных, которые вы хотите зарегистрировать, также имеет смысл использовать правильный метод для задания. Использование console.dir () отображает не только содержимое, но и тип данных, которые вы ему отправляете. Например, если вам нужно XML-представление узла, вы можете использовать console.dirxml (). И console.table () отлично подходит для отображения данных JSON в виде сортируемой таблицы.

Замена логирования живыми выражениями

Заманчиво использовать console.log () для мониторинга вещей, которые сильно меняются. Это не только медленно, но и довольно сложно следовать. Хотя полезно то, что консоль автоматически группирует похожие значения как экземпляры, это все равно требует много движений, и вы часто обнаруживаете, что хотите только проверить значение, а не прокручивать назад, чтобы увидеть, где произошло определенное изменение.

Здесь на помощь приходят живые выражения. Вы можете добавить живые выражения, активировав кнопку с изображением глаза в инструментах разработчика. Затем вас попросят ввести любое допустимое выражение JavaScript, и его значение отобразится над консолью.

Попробуйте это, активировав кнопку глаза и введя document.activeElement. Выражение должно отображаться bodyкак значение до тех пор, пока вы не активируете или не сосредоточите внимание на любом другом элементе на странице. Вы можете увидеть его в действии на веб-сайте SitePoint в следующем видео:

Рядом с каждым выражением есть xкнопка, позволяющая прекратить отслеживание значения. Живые выражения являются постоянными и не связаны с определенным доменом или сайтом. Вот почему имеет смысл удалить их после того, как вы закончите отладку, чтобы избежать ошибок.

Живые выражения — замечательные маленькие помощники для отслеживания изменений в данных ваших скриптов без использования консоли. Это особенно полезно, когда вы регистрируете очень занятые значения, такие как положение мыши. Вероятно, вы подошли бы к этому так:

let x = 0;

let y = 0;

document.addEventListener ('mousemove’, e => {

x = e.x;

y = e.y;

console.log ({x}, {y}) ;

}) ;

В результате получается очень загруженный журнал, и можно легко пропустить важную информацию. Используя живые выражения, вам не нужно следить за быстро меняющимся журналом, что, скорее всего, также ускоряет процесс отладки. Вы можете увидеть разницу в следующем видео.

Попробуйте сами: возьмите демонстрационный код для перемещения мыши с ведением журнала и перемещения мыши без ведения журнала и попробуйте запустить оба примера в браузере.

Использование консоли для управления текущим документом

Консоль в инструментах разработчика — это гораздо больше, чем просто способ отображения журнала. Это REPL, который позволяет вам писать и выполнять JavaScript и узнавать о доступных методах и свойствах текущего документа с помощью автозаполнения. Просто зайдите в консоль в инструментах разработчика, введите docи нажмите tab, и он автоматически преобразуется в document. Если вы добавите точку, вы увидите все доступные методы и свойства. Это увлекательный и простой способ узнать о доступных методах и свойствах, который позволяет написать большой объем кода за короткое время.

Консольное автозаполнение в действии

В дополнение к этому консоль также является отличным способом взаимодействия с текущим документом и доступа к его частям. В качестве консольных утилит доступно большое количество удобных методов и ярлыков. Вот некоторые из них:

$_сохраняет результат последней команды. Так что, если вы наберете 2+2и нажмете Enter, ввод $_даст вам 4.

$0to $4— это стек последних проверенных элементов, где $0всегда находится самый новый.

$ () и $$ () являются короткими для document.querySelector () и document.querySelectorAll ().

$x () позволяет выбирать элементы DOM по XPATH.

copy () копирует все, что вы ему даете, в буфер обмена.

clear () очищает консоль.

getEventListeners (node) перечисляет все прослушиватели событий узла.

monitorEvents (node, events) отслеживает и регистрирует события, происходящие на узле.

monitor (method) создает элемент журнала всякий раз, когда вызывается метод.

Некоторые из этих методов невероятно эффективны, и мы, вероятно, написали их сами в виде серии console.log () утверждений в прошлом.

Вот несколько способов использования этих методов:

monitorEvents (window, ['resize’, 'scroll’]) ;

monitorEvents ($0, 'key’) ;

Это регистрируется каждый раз, когда окно прокручивается или изменяется в размере. Второй пример интересен тем, что в нем регистрируется любое действие клавиши над выбранным в данный момент элементом:

console.table ($$ ('a’),['href’,'text’])

Это извлекает все ссылки в документе ($$ ('a’) сокращенно от document.querySelectorAll ('a’)) и отображает их в виде сортируемой таблицы. Массив как второй параметр tableметода определяет столбцы таблицы. В противном случае каждое свойство ссылки превратилось бы в столбец, и по нему было бы трудно ориентироваться. Самое интересное, что таблицу можно не только сортировать, но и копировать и вставлять, например, в Excel.

Возьмите все ссылки с sitepoint и вставьте в Excel

Вместо того, чтобы писать сложный JavaScript для фильтрации этих результатов, вы можете использовать возможности селекторов CSS. Например, если вы хотите иметь таблицу srcи altинформацию обо всех изображениях в документе, которые не являются встроенными изображениями, вы можете использовать следующее:

console.table ($$ ('img: not ([src^=data])'), ['src’,'alt’])

Однако самое интересное в этом — писать скрипты, которые запускаются в контексте страницы.

Например, когда вы используете Markdown для генерации HTML, большинство генераторов страниц будут автоматически создавать идентификаторы для заголовков, чтобы разрешить глубокую ссылку на эту часть документа. Заголовок # New Stuffпревратится в

New stuff. Мне нужно было создать множество коротких URL-адресов, указывающих на эти глубокие ссылки, и я не хотел создавать их вручную.

 

Поэтому я начал писать скрипт для консоли, чтобы сделать это за меня:

let out = '';

$$ ('#main [id]').filter (

elm => {return elm.nodeName.startsWith ('H’) }

).forEach (elm => {

out += `${elm.innerText}

${document.location.href}#${elm.id}

`

}) ;

copy (out) ;

Результатом является блок текста с текстовым содержимым каждого заголовка, за которым следует полный URL-адрес, указывающий на него.

Это также показывает интересную дополнительную функцию $$ярлыка. A document.querySelectorAll ('#main [id]').filter () приведет к ошибке, так как возвращаемое значение является не, Arrayа NodeList. Вам нужно будет привести его к Arraywith [...document.querySelectoAll ('#main [id]').filter () ]или Array.from (document.querySelectoAll ('#main [id]').filter ()), что уже некоторое время раздражает людей, переходящих с jQuery на JavaScript. Удобный $$метод позволяет использовать все методы Array напрямую.

Как правило, у вас есть много возможностей для доступа и изменения чего-либо на отображаемой странице в браузере из консоли. Кроме того, у вас есть дополнительное преимущество — использовать вкладку «Элементы «инструментов разработчика, чтобы получить правильный путь. Активируйте меню рядом с каждым узлом и выберите из меню копирования... контекстного меню, чтобы получить то, что вам нужно.

выбор части страницы и копирование пути JS

Переход с консоли на исходники

Найдя несколько забавных способов манипулирования веб-сайтами, вы вскоре столкнетесь с ограничениями консоли как среды сценариев. Кодировать на консоли может быть немного сложно, так как вы работаете в однострочной среде. Нажатие Enterнемедленно выполняет то, что вы набрали, и часто вы делаете это случайно. Однако есть хитрость. Вы можете писать многострочные сценарии, используя Shift+ Enterвместо этого.

В общем, Консоль представляет собой отличную среду для тестирования, но с плохим опытом редактирования. К счастью, на панели «Источники «также доступен полноценный редактор. Там вы можете проверить код текущей страницы и написать более сложные сценарии для взаимодействия с ней.

Мощный совет: быстрее перемещайтесь по инструментам разработчика с помощью командного меню

Поиск определенного инструмента в инструментах разработчика браузера может быть сложной задачей, так как их очень много. Инструменты органично разрослись за эти годы, и многие специализированные разделы могут никогда не быть для вас, в то время как другие люди полагаются на них.

Вместо того, чтобы просматривать несколько меню, чтобы найти то, что вам нужно, есть удобный ярлык — меню команд.

Вы можете получить доступ к меню команд, нажав Control+ Shift+ P (Windows, Linux) или Command+ Shift+ P (macOS). Или выберите меню «Настройка и управление DevTools» (...или ⋮) (в правом верхнем углу окна DevTools), а затем выберите «Выполнить команду».

В любом случае вы получаете меню, которое позволяет вам получить доступ ко всем функциям devtools с клавиатуры, что часто означает гораздо более быстрый и прямой способ. Как следует из названия, вы также можете активировать функциональность с помощью этого меню.

Фрагменты

Фрагменты — отличный способ сохранить написанные вами скрипты, взаимодействующие с документом. Это небольшие сценарии, которые имеют доступ как к текущему открытому документу браузера, так и к удобным методам консоли.

Попробуйте это прямо сейчас, нажав сочетание клавиш в меню команд, набрав snipи нажав Enter, фактически указав инструментам разработчика создать новый фрагмент. Это приведет вас к редактору фрагментов, и он создаст новый фрагмент с общим именем. Откройте контекстное меню на имени файла Фрагмента слева, выберите переименовать и назовите его Получить все ссылки, как показано на этом GIF:

Создание новостного фрагмента

Справа у вас есть полноценный редактор с цветовым кодированием, автозаполнением, несколькими курсорами и всеми остальными вещами, которые вы ожидаете в наши дни. Вы можете приступить к написанию сценария. Как насчет того, чтобы написать скрипт, который получает все ссылки и их текст (или эквиваленты) из текущего документа? Мы также должны отметить, какие из них окружают изображения, и распечатать сообщение об ошибке со списком всех тех, которые не имеют текста. Они также должны получить красную рамку, чтобы мы могли видеть проблему.

Вот сценарий. Он использует довольно много вещей, которые мы рассмотрели ранее. Скопируйте и вставьте его в редактор сниппетов:

console.clear () ;

let out = '';

let problems = [];

$$ ('a’).forEach (a => {

let text = a.innerText.trim () ;

let prefix = '';

if (! text) {

if (a.querySelector ('img’)){

text = a.querySelector ('img’).alt;

prefix = 'Image: ';

}

if (a.getAttribute ('aria-label’)) {

text = a.getAttribute ('aria-label’) ;

prefix = 'Aria Label: ';

}

if (a.getAttribute ('aria-labelledby’)) {

text = $ ('#' + a.getAttribute ('aria-labelledby’)).innerText;

prefix = 'Aria Labelled By: ';

}

}

if (text) {

text = prefix + text

} else {

a.style.border = '1px solid firebrick’;

problems.push (a) ;

}

out += `

${text||'No Link text’}

${a.href}`;

}) ;

if (out === '') {

console.warn ('Sorry, no links found’) ;

} else {

copy (out) ;

console.info ('done harvesting links, ready to paste’) ;

if (problems.length > 0) {

console.warn ('There were%d issues:', problems.length) ;

console.groupCollapsed ('Links without text’) ;

problems.forEach (a => {console.dirxml (a) }) ;

console.groupEnd ('Links without text’) ;

}

}

После вставки нового содержимого или редактирования фрагмента вы увидите, что имя файла на вкладке выше и в списке слева помечено звездочкой. Это означает, что это несохраненный файл. Чтобы сохранить его на своем компьютере, нажмите CMD+ sв macOS и Ctrl+ sв Windows/Linux. Вы запускаете фрагмент в редакторе, активируя кнопку воспроизведения ниже или нажимая CMD+ Enterв macOS и Ctrl+ Enterв Windows/Linux.

На следующем GIF-файле показан скрипт, работающий в документе Что нового в DevTools 89:

Сохранение и выполнение фрагмента

Вы можете создать столько фрагментов, сколько хотите, и они не будут связаны с определенным URL-адресом или документом. Вы можете запустить их против любого веб-контента, который вы хотите.

Одна действительно приятная особенность Snippets заключается в том, что вам не нужно заходить в редактор, чтобы запустить их. После того, как вы сохранили их на своем устройстве, вы также можете получить к ним доступ из меню команд. Все, что вам нужно сделать, это удалить >и заменить его на!. Это дает вам меню автозаполнения со всеми фрагментами на компьютере. Начните вводить тот, который вы хотите запустить, и нажмите Enter.

Запустить фрагмент из меню

Таким образом, вы можете быстро получить доступ ко всем своим фрагментам для запуска на текущем веб-сайте. Все путем ввода с! последующим названием фрагмента.

В моем случае это выглядит так:

список фрагментов

Фрагменты отлично подходят, если вы хотите вручную запустить скрипт для управления текущим документом. Но что, если вы хотите автоматически запускать скрипт или что-то менять на веб-сайте каждый раз, когда он загружается? Читать дальше.

Переопределяет

Переопределения — это локальные копии удаленных файлов. Вместо того, чтобы всегда загружать файл с сервера, инструменты разработчика браузера вмешиваются и заменяют файлы вашей локальной копией. Это невероятно полезно, если вы хотите, например, отредактировать полную таблицу стилей сложного веб-сайта, не создавая ее локально и не дожидаясь завершения развертывания. Это также отличный способ найти проблемы с производительностью, обслуживая файлы, которые медленно загружаются с жесткого диска во время разработки.

Вы начинаете работу с Overrides, настроив папку на локальном жестком диске. В моем случае я создал папку с именем local-overridesв папке «Загрузки».

Например, если вы сейчас хотите внедрить JavaScript в мой блог, вам нужно будет перейти на вкладку «Источники «в инструментах разработчика и выбрать вкладку «Переопределения «в нижнем меню.

Вкладка overrides в папке с исходниками

Ниже вы можете найти кнопку + Выбрать папку для переопределений. При его активации вам будет предложено выбрать папку на жестком диске для хранения файлов.

Выбор папки переопределений

Поскольку инструменты разработчика должны будут хранить там информацию, вас попросят дать разрешение на это, активировав кнопку «Принять «.

Предоставление доступа к папке

Как только это будет сделано, local overridesпапка появится ниже. Выше находится флажок для переключения переопределений. Это удобно, потому что вам не нужно постоянно удалять папку или скрипты. Вы можете снять этот флажок, и браузер снова будет загружать ресурсы из Интернета. Кнопка с круглым значком рядом с параметром удаляет все переопределения.

Предоставление доступа к папке

Далее вы можете выбрать файл для переопределения. Перейдите на вкладку Страница и перейдите к www.google-analytics.comзаписи. Разверните раздел, и вы найдете analytics.jsфайл. Щелкните его, чтобы открыть в редакторе.

Выбор файла analytics.js для переопределения

Это также показывает интересную особенность редактора. Он автоматически определяет, когда файл минимизирован, и предлагает распечатать его, чтобы его было легче читать. Вы можете сделать это с любым файлом, активировав кнопку {} в правом нижнем углу.

А пока давайте просто выделим весь код и заменим его простым:

console.info ('I am in!')

После сохранения файла с помощью CMD+ s (macOS) или Ctrl+ s (Windows, Linux) вы увидите фиолетовую точку рядом с именем файла. Это показывает вам, какие файлы больше не загружаются с исходного веб-сайта, а вместо этого поступают с вашего жесткого диска.

Файлы Overide отмечены фиолетовой точкой рядом с ними.

Если вы теперь перейдете куда-нибудь на christianheilmann.com, он больше не будет загружать файл аналитики, а вместо этого запустит файл с вашего жесткого диска. В консоли написано «Я в деле», а я никогда не писал этот код.

Файлы Overide отмечены фиолетовой точкой рядом с ними.

Если вы сейчас заглянете в свою local-overridesпапку, вы найдете www.google-analytics.comпапку с analytics.jsфайлом внутри. Вы можете отредактировать файл в инструментах разработчика или непосредственно в этой папке с помощью редактора по вашему выбору. Любые изменения в файле будут отражены в другой среде.

Синхронизируйте задачи разработки и отладки с рабочими пространствами

Когда дело доходит до синхронизации, Workspaces — это еще одна функция, которая, похоже, не используется достаточно. Когда мы вспоминаем наш общий подход к разработке в начале этой статьи, кажется, что мы разрабатываем в наших редакторах и отлаживаем в браузере. Это имеет смысл, но большая проблема заключается в том, как мы вернем то, что мы изменили, в наш исходный код? Часто мы просто настраиваем несколько параметров, а затем повторяем изменения в нашем редакторе. Есть лучший способ.

Первое, о чем вы, возможно, еще не знаете, это то, что есть инструмент «Изменения «. Скажем, например, вы работаете над демонстрацией небольшого списка дел и хотите немного изменить внешний вид. Обычно вы делаете это в инструменте «Элементы «, как показано в следующем GIF:

изменение цвета фона с помощью Elements

Обычный способ вернуть это изменение в ваш код — скопировать и вставить код цвета из CSS и скопировать его обратно в исходный код в вашем редакторе. Но как насчет большего количества изменений? Инструменты разработчика также отслеживают, что вы изменили, и если вы перейдете на вкладку «Изменения «, вы получите список всех измененных вами файлов и того, что в них изменилось. Самый простой способ получить доступ к этому — снова использовать меню команд и ввести changes, что дает вам опцию «Показать изменения».

Отслеживание изменений в инструментах разработчика

Это облегчает отслеживание ваших изменений, но по-прежнему кажется странным копировать изменения обратно в исходный код.

Вы можете заставить инструменты разработчика работать с вашим редактором, добавив папку проекта в рабочую область. Чтобы это произошло, перейдите к инструменту «Источники «и перетащите на него папку проекта.

Отслеживаемые изменения в Devtools

Вы снова должны предоставить инструментам разработчика разрешение на доступ к этой папке, как мы делали это ранее в примере с переопределениями. Как только вы это сделаете, все изменения, внесенные вами в файл в инструментах разработчика, будут синхронизированы. Вы можете увидеть это в следующем GIF. Слева мой редактор VS Code с открытым файлом, а справа браузер. Изменение цвета в инструменте «Элементы» теперь не только обновляет его в браузере, но и изменяет код в моем редакторе. Ни одна из настроек, которые вы делаете, не требует дополнительного шага копирования и вставки.

Синхронизация изменений в редакторе с рабочими пространствами

Объединение инструментов разработчика с редактором: расширение Devtools for VS Code

Кажется хорошей идеей объединить мощь отличного редактора и возможности проверки инструментов разработчика браузера. Вот почему мы создали расширение для Visual Studio Code, которое делает именно это. Если вы предпочитаете этот редактор, вы можете установить расширение Microsoft Edge Tools for VS Code, и вы получите инструменты разработчика прямо в своем редакторе вместе с полнофункциональным браузером. Вы можете увидеть, как это выглядит в следующем GIF.

Расширение VS Code, встраивающее инструменты браузера в редактор

Что дальше?

Я надеюсь, что, читая эту статью, вы получили некоторые идеи о том, как использовать функции инструментов разработчика вашего браузера помимо простого добавления console.log () в ваши скрипты. Следующим шагом для меня, как для разработчика, было вообще отойти от консоли и привыкнуть к использованию отладки по точкам останова. Преимущество заключается в том, что ваш код останавливается, и вы можете проверить изменения, которые происходят по пути, вместо того, чтобы отслеживать, что произошло после его выполнения. Это другой способ решения той же проблемы, не такой простой, но он стоит вашего времени.