Блог Eleven Labs — Управление временем отладки с помощью точек останова

Это работает по

Мы не будем лгать друг другу, типичный день разработчика перемежается кофе и «это работает».
И если рассматриваемый разработчик выбрал JS в качестве своего языка программирования или скриптов, если хотите, это не имеет значения.

Но что тогда делать, когда «работает по»?

Техника, которую предпочитают разработчики JS, console.log(‘toto’)

Мы будем спамить наш больной код console.log(‘toto’) чтобы проверить, хорошо ли мы вписываемся в if или, вообще, выполняется ли фрагмент кода на самом деле или нет.

Однако есть методика гораздо более эффективная, но, похоже, малоизвестная широкой публике: инструкция debugger и использование точек останова.

Если ваша бровь приподнялась в режиме «хм, что это?», подождите, всего за 7 минут ваша жизнь полностью изменится 🙂

Инструкция debugger

Пример поможет нам понять использование и преимущества этой инструкции, а также технику точки останова.

По этому случаю я подготовил веб-страницу, которая рассказывает нам правду об этом знаменитом debuggerвот она :

Э-э… хорошо… я не ожидал…
Ну, скажем, хорошо, будем все это отлаживать!

Код, который дает этот рендеринг, находится на VueJs, очень простой, так что любой может сориентироваться, и он выглядит так:

<script>
import { theWholeTruth } from '@/theTruth';
export default {
 name: 'DebuggerSavedMyLife',
 methods: {
   /**
    * @description Describes the `debugger;` statement
    * @returns {string} The truth, the whole truth and nothing but the truth
    */
   tellMeAboutIt() {
     const theTruth = theWholeTruth();
     return theTruth;
   },
 },
}
script>

Что-то не так с моим методом tellMeAboutIt()и это, скорее всего, исходит от функции, которую я вызываю внутри…

Но вы знаете, что? Не буду ломать голову, добавлю свою маленькую инструкцию вот так:

   tellMeAboutIt() {
     debugger; // Salut !
     const theTruth = theWholeTruth();
     return theTruth;
   },

Инструкция debugger ничего не делает, только создает Точка останова (точка останова), чтобы мы могли остановить выполнение нашего скрипта и уделить время анализу того, что там происходит.

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

Если мы просто обновим нашу веб-страницу, мы не увидим ничего нового… но если перед обновлением страницы мы откроем нашу консоль… пришло время пули, детка!

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

Коротко о вкладке «Источники»

Источники представляет нам три раздела:

1. Слева мы находим все файлы, которые были загружены на страницу, включая файлы CSS и HTML, очень полезные для навигации по структуре нашего приложения и просмотра/изменения каждого файла в режиме реального времени.
2. В центре у нас есть фокус на файле, содержащем точку останова. Точная строка, где выполнение остановилось, выделена (зеленым цветом на скриншоте).
3. Справа находится панель отладки, самая плотная и важная часть, заслуживающая внимания.

Панель отладки

Краткое содержание предыдущих серий: время остановилось, мы такие Доктор Стрэндж на веб-странице, которая полностью зависла и не отвечает.

Панель отладки наша Глаз Агамоттовот обзор его основных кнопок:

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

Переход к следующему вызову функции.
Он позволяет нам перейти к следующему вызову функции.

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

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

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

Далее в панели отладки есть несколько разделов, остановимся на разделах Объем эт Стек вызовов.

Секция Объем содержит список переменных и функций, доступных в текущем контексте выполнения вашего кода.

Интересно, что подъем javascript делает переменную theTruth уже доступен в области Local, несмотря на то, что он еще не инициализирован. Матемагический!

Секция Стек вызовов содержит «стек вызовов», другими словами историю вызовов функций, которые привели нас к этому моменту. Самая последняя функция всегда находится на вершине стека. Поэтому неудивительно, что наверху кучи мы находим нашу tellMeAboutItкоторый явно вызывается непонятными функциями, которые, вероятно, являются частью движка VueJs (_sfc_render, renderComponenetRoot, бла-бла-бла, черная магия).

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

Хорошо, у нас есть все оружие, чтобы справиться с нашей ошибкой, мы прекращаем бла-бла и поехали!

Где ошибка?

Давайте попробуем продвинуть наш скрипт до строки 19, чтобы наблюдать за изменениями в нашей панели отладки.

Интересно, что значение переменной theTruth в разделе Scope => Local панели отладки изменено с undefined К “ne sert à rien” (отлично, спасибо…).

Ошибка возникает откуда-то еще, она должна прятаться в функции theWholeTruth().

Не паникуйте, я обновлю страницу и на этот раз проверю, что происходит в функции, которая возвращает этот проклятый результат: Сохраняйте спокойствие и F5.

Я собираюсь использовать действия панели отладки для:

1. Перейти к строке который вызывает функцию, которую я хочу проверить (строка 18)
2. Вернуться к функции theWholeTruth() как ковбой в салуне с пистолетом в руке.

Давай попробуем:

Интересный : theWholeTruth() кажется, сделать просто join в массиве, который, кажется, исходит из другой функции: nothingButTheTruth().

Мы знаем, что делать, не так ли? 😉

Пойдем!

Вот и все… мы нашли виновника бага. Столько саспенса, а в конце концов, это был просто набор лжи…

Теперь все, что мне нужно сделать, это вернуться в свою IDE, сообщить о рассматриваемом массиве на предмет подделки и использования подделки, восстановить порядок во вселенной и…

Заключение

Инструкция debugger это способ поместить точки останова в нашем коде, чтобы:

• власть оценивать переменные в момент Т
• введите методы/функции осмотреть содержимое
• двигаться вверх по стеку вызовов понять, кто и как звонил

Существуют и другие способы установки точек останова и оценки переменных для данной области действия (непосредственно из консоли браузера), но я позволю вашему любопытству разгуляться в Интернете 😉

Время в нашем распоряжении закончилось, мне нужно решить ошибку, которая ломает мне голову, прежде чем закончить день…

…к счастью, я точно знаю, что нужно сделать, чтобы найти его 🙂

До свидания console.log(‘toto’)
Добро пожаловать debugger