Как открыть стек вызовов visual studio
В этой статье я расскажу, как отлаживать многопоточные приложения в Visual Studio 2010, используя окна Parallel Tasks и Parallel Stacks. Эти окна помогут понять структуру выполнения многопоточных приложений и проверить правильность работы кода, который использует Task Parallel Library.
- Как смотреть call stacks выполняемых потоков
- Как посмотреть список заданий созданных в нашем приложении (System.Threading.Tasks.Task)
- Как перемещаться в окнах отладки Parallel Tasks и Parallel Stacks
- Узнаем интересные и полезные мелочи в отладки с vs2010
Осторожно, много картинок
Подготовка
Для тестов нам потребуется VS 2010. Изображения в этой статье получены с использованием процессора Intel Core i3
Код проекта
Код для языков VB и C++ можно найти на этой странице
using System;
using System.Threading;
using System.Threading.Tasks;
using System.Diagnostics;
static void A( object o)
B(o);
>
static void B( object o)
C(o);
>
static void C( object o)
int temp = ( int )o;
Interlocked.Increment( ref aa);
while (aa < 4)
;
>
//after
L(o);
>
static void F( object o)
G(o);
>
static void G( object o)
H(o);
>
static void H( object o)
// break here at the same time as E and K
Interlocked.Increment( ref bb);
Monitor.Enter(mylock);
while (bb < 3)
;
>
Monitor.Exit(mylock);
//after
L(o);
>
static void I( object o)
J(o);
>
static void J( object o)
int temp2 = ( int )o;
switch (temp2)
case 3:
t4.Wait();
break ;
case 4:
K(o);
break ;
default :
Debug.Assert( false , "fool2" );
break ;
>
>
static void K( object o)
// break here at the same time as E and H
Interlocked.Increment( ref bb);
Monitor.Enter(mylock);
while (bb < 3)
;
>
Monitor.Exit(mylock);
//after
L(o);
>
static void L( object oo)
int temp3 = ( int )oo;
switch (temp3)
case 1:
M(oo);
break ;
case 2:
N(oo);
break ;
case 4:
O(oo);
break ;
default :
Debug.Assert( false , "fool3" );
break ;
>
>
static void M( object o)
// breaks here at the same time as N and Q
Interlocked.Increment( ref cc);
while (cc < 3)
;
>
//BP3 - 1 in M, 2 in N, 3 still in J, 4 in O, 5 in Q
Debugger.Break();
Interlocked.Increment( ref cc);
while ( true )
Thread.Sleep(500); // for ever
>
static void N( object o)
// breaks here at the same time as M and Q
Interlocked.Increment( ref cc);
while (cc < 4)
;
>
R(o);
>
static void O( object o)
Task t5 = Task.Factory.StartNew(P, TaskCreationOptions.AttachedToParent);
t5.Wait();
R(o);
>
static void P()
Console .WriteLine( "t5 runs " + Task.CurrentId.ToString());
Q();
>
static void Q()
// breaks here at the same time as N and M
Interlocked.Increment( ref cc);
while (cc < 4)
;
>
// task 5 dies here freeing task 4 (its parent)
Console .WriteLine( "t5 dies " + Task.CurrentId.ToString());
waitFor5 = false ;
>
static void R( object o)
if (( int )o == 2)
//wait for task5 to die
while (waitFor5)
int i;
//spin up all procs
for (i = 0; i < pcount - 4; i++)
Task t = Task.Factory.StartNew(() => < while ( true );>);
Console .WriteLine( "Started task " + t.Id.ToString());
>
Task.Factory.StartNew(T, i + 1 + 5, TaskCreationOptions.AttachedToParent); //scheduled
Task.Factory.StartNew(T, i + 2 + 5, TaskCreationOptions.AttachedToParent); //scheduled
Task.Factory.StartNew(T, i + 3 + 5, TaskCreationOptions.AttachedToParent); //scheduled
Task.Factory.StartNew(T, i + 4 + 5, TaskCreationOptions.AttachedToParent); //scheduled
Task.Factory.StartNew(T, (i + 5 + 5).ToString(), TaskCreationOptions.AttachedToParent); //scheduled
//BP4 - 1 in M, 2 in R, 3 in J, 4 in R, 5 died
Debugger.Break();
>
else
Debug.Assert(( int )o == 4);
t3.Wait();
>
>
static void T( object o)
Console .WriteLine( "Scheduled run " + Task.CurrentId.ToString());
>
static Task t1, t2, t3, t4;
static int aa = 0;
static int bb = 0;
static int cc = 0;
static bool waitFor1 = true ;
static bool waitFor5 = true ;
static int pcount;
static S mylock = new S();
>
* This source code was highlighted with Source Code Highlighter .
Parallel Stacks Window: Threads View (Потоки)
Шаг 1
Копируем код в студию в новый проект и запускаем в режиме отладки (F5). Программа скомпилируется, запустится и остановится в первой точке остановки.
В меню Debug→Windows нажимаем на Parallel Stacks. С помощью этого окна мы можем посмотреть несколько стеков вызовов параллельных потоков. На следующем рисунке показано состояние программы в первой точке остановки. Окно Call Stack включается там же, в меню Debug→Windows. Эти окна доступны только во время отладки программы. Во время написания кода их просто не видно.
На картинке 4 потока сгруппированы вместе, потому что их стек фреймы (stack frames) принадлежат одному контексту метода (method context), это значит, что это один и тот же метод (А, B, C). Чтобы посмотреть ID потока нужно навести на заголовок «4 Threads». Текущий поток будет выделен жирным. Желтая стрелка означает активный стек фрейм в текущем потоке. Чтобы получить дополнительную информацию нужно навести мышкой.
Чтобы убрать лишнюю информацию или включить (например название модуля, сдвиг, имена параметров и их типы и пр.) нужно щелкнуть правой кнопкой мышки по заголовку таблицы в окошке Call Stack (аналогично делается во всем окружении Windows).
Голубая рамка вокруг означает, что текущий поток (который выделен жирным) является частью этих потоков.
Шаг 2
Продолжаем выполнение программы до второй точки остановки (F5). На следующем слайде видно состояние потоков во второй точке.
На первом шаге 4 потока пришли из методов A, B и C. Эта информация до сих пор доступна в окне Parallel Stacks, но теперь эти 4 потока получили развитие дальше. Один поток продолжился в D, затем в E. Другой в F, G и потом в H. Два остальных в I и J, а оттуда один из них направился в K а другой пошел своим путем в non-user External Code.
Можно переключиться на другой поток, для этого двойной щелчек на потоке. Я хочу посмотреть метод K. Для этого двойной клик по MyCalss.K
Parallel Stacks покажет информацию, а отладчик в студии покажет код этого места. Нажимаем Toggle Method View и наблюдаем картину истории (иерархии) методов до K.
Шаг 3
Продолжаем отладку до 3 прерывания.
Когда несколько потоков приходят в один и тот же метод, но метод не в начале стека вызовов – он появляется в разных рамках, как это произошло с методом L.
Двойной клик по методу L. Получаем такую картинку
Метод L выделен жирным так же в двух других рамках, так что можно видеть где он еще появится. Чтобы увидеть какие фреймы вызывают метод L переключаем режим отображения (Toggle Method View). Получаем следующее:
В контекстном меню есть такие пункты как «Hexadecimal Display» и «Show External Code». При включении последнего режима диаграмма получается больше чем предыдущая и содержит информацию о non-user code.
Шаг 4
Продолжаем выполнение программы до четвертого прерывания.
В этот раз диаграмма получится очень большой и на помощь приходит автоскролл, который сразу переводит на нужное место. The Bird's Eye View также помогает быстро ориентироваться в больших диаграммах. (маленькая кнопочка справа внизу). Авто зум и прочие радости помогают ориентироваться в действительно больших многопоточных приложениях.
Parallel Tasks Window и Tasks View в окне Parallel Stacks
Шаг 1
Завершаем работу программы (Shift + F5) или в меню отладки. Закрываем все лишние окошки с которыми мы экспериментировали в прошлом примере и открываем новые: Debug→Windows→Threads, Debug→Windows→Call Stack и лепим их к краям студии. Также открываем Debug→Windows→ Parallel Tasks. Вот что получилось в окне Parallel Tasks
Для каждого запущенного задания есть ID который возвращает значение одноименного свойства задания, местоположение задания (если навести мышь на Console, то появится целый стек вызовов) а также метод, который был принят как отправная точка задания (старт задания).
Шаг 2
В предыдущий раз все задания были отмечены как выполняемые, сейчас 2 задания заблокированы по разным причинам. Чтобы узнать причину нужно навести мышь на задание.
Задание можно отметить флагом и следить за дальнейшим состоянием.
В окне Parallel Stack, которое мы использовали в предыдущем примере, есть переключатель просмотра с потоков на задания (слева вверху). Переключаем вид на Tasks
Шаг 3
Как видно из скриншота – новое задание 5 выполняется, а задачи 3 и 4 остановлены. Также можно изменить вид таблицы – правая кнопка мыши по заголовкам колонок. Если включить отображение предка задачи (Parent) то мы увидим, кто является предком задачи номер 5. Но для лучшей визуализации отношений можно включить специальный вид – ПКМ по колонке Parent→Parent Child View.
Окна Parallel Tasks и Parallel Stack – синхронизированы. Так что мы можем посмотреть какая задача в каком потоке выполняется. Например задача 4. Двойной клик по задаче 4 в окне Parallel Tasks, с этим кликом выполнится синхронизация с окном Parallel Stack и мы увидим такую картину
В окне Parallel Stack, в режиме задач можно перейти к поток. Для этого ПКМ на методе и Go To Thread. В нашем примере мы посмотрим что происходит с методом O.
Шаг 4
Продолжаем выполнение до следующей точки. Затем сортируем задачи по ID и видим следующее
В списке нет задачи 5, потому что она уже завершена. Задачи 3 и 4 ждут друг друга и зашли в тупик. Есть еще 5 новых задач от задачи 2, которые теперь запланированы на исполнение.
Вернемся в Parallel Stack. Подсказка в заголовке каждой таблички скажет, сколько задач заблокировано, сколько ожидают и сколько выполняется.
Задачи в списке задач можно сгруппировать. Например сгруппируем по статусу – ПКМ на колонке статус и Group by Status. Результат на скриншоте:
Еще несколько возможностей окошка Parallel Tasks: в контекстном меню можно заморозить задачи, можно заморозить основной поток задачи.
Заключение
С помощью этих двух мощных инструментов можно отлаживать большие и сложные, многопоточные приложения. Смотреть за результатом и порядком выполнения задач. Планировать правильный порядок выполнения задач. Строить программы с минимальным количеством ошибок, связанных с непониманием работы многопоточных программ.
Литература
Видео
Блог Daniel Moth
Спасибо за внимание и поменьше вам ошибок в многопоточных приложениях :)
На предыдущем уроке о степпинге и точках останова, мы узнали, как, с их использованием, контролировать выполнение программы шаг за шагом. Тем не менее, на этом не заканчиваются все полезные возможности отладчика. Он также позволяет отслеживать значения переменных.
Отслеживание переменных
Результат выполнения программы:
К этому моменту переменная х уже создана и инициализирована, поэтому, при проверке этой переменной, вы должны увидеть число 1 .
Обратите внимание, вы можете навести курсор мыши на любую другую переменную (и на любой строке):
Появится специальное окно с текущим значением переменной:
Хорошо, теперь закройте это окно.
Значение переменной х должно поменяться на 2 . Проверьте!
Окно просмотра
В Visual Studio для отображения окна просмотра вам нужно перейти в "Отладка" > "Окна" > "Контрольные значения" > "Контрольные значения 1" :
Вы должны увидеть следующее:
Пока что в этом окне ничего нет, так как вы еще ничего в него не добавили. Есть 2 пути:
Ввести имя переменной, которую нужно отслеживать, в колонку "Имя" в окне просмотра.
Выделить переменную, которую нужно отслеживать > ПКМ > "Добавить контрольное значение" .
Попробуйте добавить переменную х в окно просмотра:
Стек вызовов
Как вы уже знаете, при вызове функции программа оставляет закладку в текущем местоположении, выполняет функцию, а затем возвращается в место закладки. Программа отслеживает все вызовы функций в стеке вызовов.
Укажите точку останова в функции CallC(), а затем запустите отладку. Программа выполнится до точки останова.
Несмотря на то, что вы знаете, что сейчас выполняется CallC(), в программе есть два вызова CallC(): в функции CallB() и в функции CallA(). Какая функция ответственна за вызов CallC() в данный момент? Стек вызовов нам это покажет:
Заключение
С помощью окна Стек вызовов можно просматривать вызовы функций и процедур, которые в данный момент находятся в стеке. В окне Стек вызовов показан порядок вызова методов и функций. Стек вызовов хорошо подходит для изучения и анализа потока выполнения приложения.
Если символы отладки недоступны для части стека вызовов, в окне Стек вызовов может не получиться отобразить правильные сведения об этой части стека вызовов. Вместо них будет отображаться следующая информация.
[Frames below may be incorrect and/or missing, no symbols loaded for name.dll]
Окно Стек вызовов аналогично перспективе "Отладка" в некоторых интегрированных средах разработки, например Eclipse.
Отображаемые диалоговые окна и команды меню могут отличаться от описанных здесь в зависимости от текущих параметров или выпуска. Чтобы изменить параметры, выберите в меню Сервис пункт Импорт и экспорт параметров. См. раздел Сброс параметров.
Просмотр стека вызовов в отладчике
Во время отладки в меню Отладка выберите Окна > Стек вызовов.
Желтая стрелка указывает на кадр стека, в котором находится указатель выполнения. По умолчанию это кадр стека, сведения которого отображаются в окнах: исходного кода, Локальные, Контрольные значения, Видимые и Дизассемблированный код. Чтобы изменить контекст отладчика на другой кадр стека, переключитесь на другой кадр стека.
Отображение непользовательского кода в окне "Стек вызовов"
- Щелкните правой кнопкой мыши в окне Стек вызовов и выберите в контекстном меню пункт Показать внешний код.
Непользовательский код — это любой код, который не отображается при включении режима Только мой код. В управляемом коде кадры непользовательского кода скрыты по умолчанию. Вместо кадров непользовательского кода отображается следующая запись.
Переключение на другой кадр стека (изменение контекста отладчика)
В окне Стек вызовов щелкните правой кнопкой кадр стека, код и данные которого нужно просмотреть.
Или можно дважды щелкнуть кадр в окне Стек вызовов, чтобы переключиться на этот кадр.
Выберите пункт Перейти к кадру.
Рядом с выбранным кадром стека появится зеленая стрелка с фигурным концом. Указатель выполнения остается в исходном кадре, который по-прежнему отмечен желтой стрелкой. При выборе команд Шаг или Продолжить в меню Отладка выполнение продолжится с исходного, а не с выбранного кадра.
Просмотр исходного кода функции в стеке вызовов
- В окне Стек вызовов щелкните правой кнопкой мыши функцию, исходный код которой нужно увидеть, и выберите пункт К исходному коду.
Выполнение кода до определенной функции из окна "Стек вызовов"
- В окне Стек вызовов выберите функцию, щелкните ее правой кнопкой мыши и выберите команду Выполнить до курсора.
Установка точки останова в точке выхода вызова функции
Отображение вызовов в другой поток или из него
- Щелкните правой кнопкой мыши в окне Стек вызовов и выберите пункт Включить вызовы между потоками.
Визуальная трассировка стека вызовов
В Visual Studio Enterprise (только) можно просматривать карты кода для стека вызовов во время отладки.
В окне Стек вызовов откройте контекстное меню. Выберите Показать стек вызовов на карте кода (CTRL + SHIFT + ` ).
- В окне Стек вызовов щелкните правой кнопкой мыши функцию, дизассемблированный код которой нужно увидеть, и выберите пункт К дизассемблированному коду.
Включение или отключение отображения дополнительных сведений
- Щелкните правой кнопкой мыши в окне Стек вызовов и установите или снимите флажок Показать<the information that you want> .
Чтобы загрузить символы
В окне Стек вызовов щелкните правой кнопкой какой-либо кадр стека, для которого не загружены символы. Кадр затеняется.
Укажите на параметр Загрузить символы, а затем выберите Серверы символов (Майкрософт) (если доступно) или перейдите по пути к символам.
Установка пути к символам
В окне Стек вызовов выберите пункт Параметры символов из контекстного меню.
Появится диалоговое окно Параметры, открытое на странице Символы.
Выберите Параметры символов.
В диалоговом окне Параметры щелкните значок "Папка".
В поле Места размещения файлов символов (.pdb) появится курсор.
Введите путь к каталогу с символами на компьютере, на котором производится отладка. При локальной и удаленной отладке это путь на локальном компьютере.
Современные отладчики содержат еще одно окно отладочной информации, которое может быть очень полезно при отладке программы, и это окно стека вызовов.
Когда ваша программа вызывает функцию, вы уже знаете, что она создает закладку для текущего местоположения, выполняет вызов функции и затем возвращается из нее. Как она узнает, куда вернуться? Ответ в том, что она отслеживает это в стеке вызовов.
Стек вызовов (call stack) – это список всех активных функций, которые были вызваны для перехода к текущей точке выполнения. Стек вызовов включает в себя запись для каждой вызываемой функции, а также строку кода, в которую будет выполнен возврат при возврате из функции. Всякий раз, когда вызывается новая функция, эта функция добавляется в верхнюю часть стека вызовов. Когда происходит возврат из текущей функции в вызывающую, эта функция удаляется из вершины стека вызовов, и управление возвращается функции, находящейся чуть ниже нее.
Окно стека вызовов – это окно отладчика, которое показывает текущий стек вызовов. Если вы не видите окно стека вызовов, вам нужно будет указать среде IDE, чтобы она его показала.
Для пользователей Visual Studio
В Visual Studio окно стека вызовов можно найти в меню Отладка (Debug) → Окна (Windows) → Стек вызовов (Call Stack). Обратите внимание, что вы должны находиться в сеансе отладки, чтобы активировать это окно.
Для пользователей Code::Blocks
В Code::Blocks окно стека вызовов можно найти через меню Debug (Отладка) → Debugging windows (Окна отладки) → Call Stack (Стек вызовов).
Давайте посмотрим на стек вызовов на примере программы:
Поместите точки останова в строки 5 и 10 этой программы, а затем запустите режим отладки. Поскольку функция a вызывается первой, точка останова в строке 5 будет достигнута первой.
На этом этапе вы должны увидеть что-то вроде этого:
Рисунок 1 – Окно стека вызовов при первой остановке на строке 5
Обратите внимание, что номера ваших строк могут немного отличаться (на 1), и что вместо [Внешний код] (External Code) вы можете увидеть кучу других функций с безумными названиями. Эти различия несущественны.
Здесь важны две верхние строчки. Снизу вверх мы видим, что сначала была вызвана функция main , а затем следующей была вызвана функция a .
Строка 5 рядом с функцией a показывает нам, где находится текущая точка выполнения (которая соответствует маркеру выполнения в окне редактора кода). Строка 17 во второй строке указывает строку, в которую будет выполнен возврат, когда управление вернется к функции main .
Теперь выберите команду продолжить отладку, чтобы перейти к следующей точке останова, которая будет в строке 10. Стек вызовов должен обновиться, чтобы отразить новую ситуацию:
Рисунок 2 – Окно стека вызовов при остановке на строке 10
Вы можете заметить, что теперь в верхней строке стека вызовов находится функция b , что отражает тот факт, что функция b – это функция, которая выполняется в данный момент. Обратите внимание, что функция a больше не представлена в стеке вызовов. Это связано с тем, что функция a была удалена из стека вызовов при возврате.
Еще раз выберите команду продолжить отладку, и мы снова попадем в точку останова в строке 5 (потому что функция b вызывает функцию a ). Стек вызовов будет выглядеть так:
Рисунок 3 – Окно стека вызовов при второй остановке на строке 5
Теперь в стеке вызовов три функции: (снизу вверх) main , которая вызвала функцию b , которая вызвала функцию a .
Стек вызовов полезен в сочетании с точками останова, когда достигается точка останова, и вы хотите знать, какие функции были вызваны для перехода к этой конкретной точке кода.
Заключение
Поздравляем, теперь вы знаете основы использования встроенного отладчика! Используя пошаговое выполнение, точки останова, отслеживание переменных и окно стека вызовов, у вас есть основы для отладки практически любой проблемы. Как и во многих других вещах, для того, чтобы научиться пользоваться отладчиком, требуется определенная практика и метод проб и ошибок. Но опять же, мы повторим, что время, потраченное на изучение того, как эффективно использовать встроенный отладчик, окупится многократно за счет экономии времени на отладку ваших программ!
Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.
К сожалению, отладка может показаться не столь очевидной при работе с JavaScript за пределами полноценной среды IDE. По крайней мере — на первый взгляд.
В данной статье будет рассмотрен вопрос, как можно выполнять отладку JavaScript-кода в инструменте Google Chrome Dev Tools и в редакторе кода Visual Studio Code.
Примечание переводчика: перейдя по этой ссылке, можно ознакомиться с видеоверсией данной статьи Debugging JavaScript in Google Chrome and Visual Studio Code на английском языке.
Предустановки
В этой статье процесс отладки будет рассмотрен на примере тестового приложения под названием «Quick Chat»:
У вас есть два способа работы с этим приложением. Вы можете самостоятельно создать его, воспользовавшись этой серией видеоуроков. Или же вы можете использовать исходный код уже готового приложения «Quick Chat»:
Какой бы вариант вы не выбрали, вам потребуется локально запустить приложение «Quick Chat».
Вы можете запустить приложение из-под Node.js (как это делаю я). Или воспользоваться плагином под Visual Studio Code под названием Live Server.
Если вы новичок в работе с этим плагином, то можете научиться работать с ним при помощи этого видео — Live Server Extension in Visual Studio Code.
Примечание переводчика: видео на английском языке.
В процессе создания данной статьи я добавил в приложении «Quick Chat» небольшую намеренную ошибку, которая не позволяет зарегистрировать пользователя после его входа в систему.
С технической точки зрения я неправильно получаю имя пользователя, используя для этого usernameInput.text вместо правильного варианта usernameInput.value . Если бы я допустил такую ошибку в реальной жизни, моей первой мыслью было бы воспользоваться инструментом console.log() .
Но это не совсем тот случай, который мог бы мне помочь, как вы можете увидеть на изображении ниже. Если же использование console.log() было также вашей первой мыслью - вы попали по адресу и правильно делаете, что читаете эту статью!
Основы отладки
Начнем с основ. Идея отладки заключается в том, что внутри программного кода можно устанавливать так называемые точки останова (breakpoints) для того, чтобы остановить выполнение программы в определенном месте.
Это дает вам, как разработчику, возможность взглянуть на текущее состояние приложения и проверить, например, значения переменных в нём. Вы даже можете сделать еще больше и отследить любые переменные по своему выбору, чтобы всякий раз, когда приложение останавливается, вы могли проверить значения этих переменных.
После установки точки останова (breakpoint) в коде, как правило, есть несколько вариантов дальнейших действий:
- продолжить выполнение программы
- пошагово пройтись по всем этапам выполнения программы — строка за строкой
- выйти из текущей функции, в которой вы находитесь
- перейти к выполнению следующей функции
У вас также будет доступ к просмотру стека вызовов (call stack). Другими словами, поскольку в программе функции могут вызывать на исполнение другие функции, то можно просмотреть историю вызовов этих функций.
Отладка в Google Chrome
Чтобы начать отладку приложения в браузере Google Chrome, добавьте в обработчике события кнопки clickBtn оператор debugger , как показано ниже:
Когда выполнение программы дойдет до строки с оператором debugger , приложение будет приостановлено и автоматически активируются инструменты отладки браузера Google Chrome.
Обратите внимание, что приложение в окне браузера закрашено серым цветом, чтобы показать, что оно приостановлено. Также обратите внимание, что вкладка Sources в Chrome Dev Tools открылась автоматически:
Давайте разберемся, что мы видим на вкладке Sources .
Вкладка Sources
Первое, что вы могли заметить на этой вкладке — это копию исходного кода приложения. Это код, который браузер загрузил и с которым он работает.
Вы также можете заметить, что строка кода с оператором debugger подсвечена синим цветом, чтобы сообщить нам, что выполнение приложения остановлено на данном участке кода:
Браузер Google Chrome предоставляет нам возможность просматривать исходный код приложения. Имея перед собой исходный код, можно установить в нем точки останова.
Точка останова предназначена для обозначения места, на котором нужно остановить выполнение программы. Оператор debugger , который мы использовали в примере выше, функционирует как точка останова, но в исходном коде приложения такая точка останова необязательно должна быть только одной.
Точка останова — преднамеренная остановка или приостановка выполнения программы
Чтобы добавить точку останова, нужно выполнить клик мыши на gutter — поле слева от нумерации строк кода. Как только вы выполните это действие, то заметите, что браузер Google Chrome автоматически добавил эту точку останова в список «Breakpoints»:
Вкладка Scope
На вкладке «Scope» вы можете отслеживать переменные в своем приложении. Обратите внимание, что на этой вкладке есть три раздела: локальная область видимости (Local), глобальная область видимости (Global) и раздел сценариев (Script).
В разделе сценариев вы можете отслеживать переменные в области видимости текущего скрипта:
Большую часть времени процесса отладки приложения вы будете проводить именно в этой вкладке. Это гораздо более эффективная альтернатива использованию многочисленным console.log() .
Вкладка Watch
Как уже упоминалось ранее, помимо просмотра переменных на вкладке «Scope», вы также можете определить переменные, значения которых вы хотели бы отслеживать на всем этапе выполнения программы.
Добавляя переменную на вкладке «Watch», каждый раз, когда вы устанавливаете точку останова, вы можете быстро проверить значение этой переменной (которая может иметь значение undefined в зависимости от того, где вы находитесь в коде).
Нажмите значок плюса и введите имя переменной, которую необходимо отслеживать, в нашем случае это usernameInput :
Пошаговое выполнение, стек вызовов и список точек останова
Раздел вкладки «Sources», расположенный в левом нижнем углу окна отладчика, позволяет просмотреть список точек останова, стек вызовов (call stack) и т. д.
В стеке вызовов есть только одна функция, которая является обработчиком события для кнопки входа. Функция указана, потому что это единственная функция, которая была вызвана на данный момент. Поскольку одни функции могут вызывать на исполнение другие функции, то эта цепочка будет обновляться соответствующим образом.
Также обратите внимание на кнопки со стрелками в верхней части экрана. Они соответствуют функциям, указанным выше, для продолжения выполнения вашего кода или прохождения по нему по строкам (stepping). Я бы рекомендовал протестировать немного эти кнопки, чтобы привыкнуть к тому, каким образом можно осуществлять выполнение кода.
Наконец, существуют различные типы точек останова, которые могут быть заданы. Давайте рассмотрим пример создания условной точки останова (conditional breakpoint), которая будет срабатывать только при выполнении определенного условия.
Например, предположим, что мы хотим предотвратить обработку события на кнопке входа в систему только тогда, когда пользователь пытается войти в систему без ввода имени пользователя.
В случае отладки приложения Quick Chat , если вы нажмете кнопку входа в систему без имени пользователя, будет запущена эта точка останова. В противном случае код будет продолжать выполняться как обычно.
Обратите внимание, что существует ещё больше доступных вариантов точек останова, которые не рассматриваются в данной статье.
Отладка в Visual Studio Code
Инструмент Chrome Developer Tools является одним из лучших в своем роде. Как вы уже видели, он предлагает отличные возможности и функционал для отладки приложения.
Однако командой разработчиков Visual Studio Code была проделана большая работа для того, чтобы сделать процесс отладки в этом редакторе ещё более совершенным.
Мне очень нравится Visual Studio Code и я провожу в нем больше времени, чем в каком-либо другом редакторе кода. Этот процесс включает в себя и отладку.
Чтобы начать отладку кода в VS Code, вам нужно будет установить плагин Debugger for Chrome :
Давайте познакомимся с вкладкой Debug . По умолчанию она расположена на боковой панели редактора. Откройте эту вкладку, нажав на значок, который выглядит как жучок (bug).
Открыв эту панель, вы увидите инструменты, очень похожие на те, что мы видели в браузере Google Chrome — переменные, стек вызовов, точки останова:
Большинство функциональных возможностей, с которыми мы имели дело в Chrome Dev Tools, также доступны в VS Code.
Теперь, когда мы познакомились с вкладкой Debug , нам необходимо создать конфигурацию, которая укажет редактору VS Code, как ему отлаживать наше приложение.
Читайте также: