Удаленная отладка - visual studio (windows)

Команды с аргументами

Приведенные ниже команды принимают аргументы или параметры:

Имя команды	Описание
Добавление существующего элемента	Добавляет существующий файл в текущее решение и открывает его.
Добавить существующий проект	Добавляет существующий проект в текущее решение.
Добавить новый элемент	Добавляет новый элемент решения, такой как HTM, CSS, TXT или набор фреймов, в текущее решение и открывает его.
Псевдоним	Создает новый псевдоним для полной команды, полной команды с аргументами или даже для другого псевдонима.
Вычислить оператор	Вычисляет и отображает заданный оператор.
Поиск	Выполняет поиск файлов с использованием подмножества параметров, доступных на элементе управления Поиск и замена .
Поиск в файлах	Выполняет поиск файлов с использованием подмножества параметров, доступных на элементе управления Поиск в файлах.
Перейти	Перемещение курсор на указанную строку.
Вывести стек вызовов	Отображает текущий стек вызовов.
Вывести дизассемблированный код	Начинает процесс отладки и позволяет указать способ обработки ошибок.
Вывести память	Отображает содержимое указанного диапазона памяти.
Вывести модули	Отображает список модулей для текущего процесса.
Вывести регистры	Отображает список регистров.
Вывести исходный код	Отображает заданные строки исходного кода.
Вывести потоки	Отображает список потоков в текущей программе.
Запись вывода окна команд	Копирует все входные и выходные данные из окна команд в файл.
Создать файл	Создает новый файл и добавляет его в выбранный проект.
Открыть файл	Открывает существующий файл и позволяет указать редактор.
Открытие проекта	Открывает существующий проект и позволяет добавить проект в текущее решение.
Печать	Вычисляет выражение и отображает результаты или указанный текст.
Команда Quick Watch	Отображает выбранный или указанный текст в поле Выражение диалогового окна Контрольное значение .
Заменить	Заменяет текст в файлах с использованием подмножества параметров, доступных на элементе управления Поиск и замена .
Замена в файлах	Заменяет текст в файлах с использованием подмножества параметров, доступных в Заменить в файлах.
Задать текущий кадр стека	Позволяет просматривать определенный кадр стека.
Задать текущий поток	Позволяет просматривать определенный поток.
Задать основание системы счисления	Определяет количество байтов для просмотра.
Оболочка	Запускает программы изнутри Visual Studio , как если бы команда выполнялась из командной строки.
Команда ShowWebBrowser	Предназначена для отображения URL-адреса, указанного в окне браузера внутри или вне интегрированной среды разработки (IDE).
Запуск	Начинает процесс отладки и позволяет указать способ обработки ошибок.
Путь	Задает список каталогов для поиска символов отладчиком.
Переключить точку останова	Включает или отключает точку останова в зависимости от ее текущего состояния и текущей позиции в файле.
Команда Watch	Создает и открывает указанный экземпляр окна Контрольное значение .

Изменение потока выполнения

Дважды нажмите клавишу F11, чтобы запустить метод .

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

Нажмите клавишу F11.
Отладчик повторно выполнит метод (вы увидите это в выходных данных окна консоли).
Изменяя поток выполнения, можно решать множество задач, например тестировать различные пути выполнения кода или повторно выполнять код без перезапуска отладчика.

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

При перемещении указателя предыдущее состояние приложения не возвращается.

Чтобы продолжить выполнение приложения, нажмите клавишу F5.
Поздравляем с завершением этого учебника!

Переход по коду с помощью команды «Выполнение до щелкнутого»

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

Observação

Кнопка Выполнение до щелкнутого впервые появилась в Visual Studio 2017. (Если кнопка с зеленой стрелкой отсутствует, воспользуйтесь клавишей F11, чтобы переместить отладчик в нужное место.)
Щелкните кнопку Выполнить до нажатия
.

Отладчик перемещается к методу .

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

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

Отладчик перемещается к методу .

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

Расположение файлов символов и поведение при загрузке

При отладке проекта в интегрированной среде разработки Visual Studio отладчик автоматически загружает файлы символов, расположенные в папке проекта.

Отладчик также ищет файлы символов в следующих местах:

Расположение, указанное в библиотеке DLL или в исполняемом файле (EXE).

По умолчанию, если на компьютере производится сборка библиотеки DLL или исполняемого файла (EXE), компоновщик помещает полный путь и имя связанного PDB-файла в библиотеку DLL или в EXE-файл. Отладчик проверяет, присутствует ли файл символов в этом расположении.
Папка, в которой располагается сам DLL- или EXE-файл.
Любые расположения, указанные в параметрах отладчика для файлов символов. Сведения о добавлении и активации расположений символов см. в разделе .
- Любая папка локального кэша символов.
- Указанные серверы и расположения символов — локальные, сетевые или в Интернете — такие как серверы символов корпорации Майкрософт, если эта возможность включена. может загружать отладочные файлы символов с серверов символов, которые реализуют протокол . Visual Studio Team Foundation Server и средства отладки для Windows — это два средства, которые могут использовать серверы символов.
  
  Возможно использование следующих серверов символов:
  
  Общедоступные серверы символов Майкрософт При отладке отказов, возникающих при обращении к системной библиотеке DLL или библиотеке стороннего производителя, зачастую требуются системные PDB-файлы. Системные PDB-файлы содержат символьные данные для библиотек DLL, EXE-файлов и драйверов устройств Windows. Символы для операционных систем Windows, MDAC, IIS, ISA и .NET можно получить с общедоступных серверов символов корпорации Майкрософт.
  
  Серверы символов во внутренней сети или на локальном компьютере Команда разработчиков или компания может создавать серверы символов для собственных продуктов и поддерживать кэш для символов из внешних источников. Можно иметь сервер символов на собственном компьютере.
  
  Сторонние серверы символов Сторонние поставщики приложений Windows и библиотек могут предоставить доступ к серверу символов в Интернете.

Настройка расположения символов и параметров загрузки

На странице Сервис > Параметры > Отладка > Символы можно выполнить следующие действия.

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

Указание расположения символов и параметров загрузки:

В Visual Studio откройте меню Сервис > Параметры > Отладка > Символы (или Отладка > Параметры > Символы).
В разделе Места размещения файлов символов (.pdb) :
- Установите соответствующий флажок, чтобы использовать Серверы символов (Майкрософт) или Сервер символов NuGet.org.
- Чтобы добавить новое расположение сервера символов:
  1. Щелкните символ + на панели инструментов.
  2. Укажите в текстовом поле URL-адрес (http), сетевую папку или локальный путь к серверу символов или расположению символов. Завершение операторов помогает найти правильный формат.
  ::: moniker range=»>= vs-2022″
  
  ::: moniker-end
  ::: moniker range=»<= vs-2019″
  
  ::: moniker-end
- Добавление нового расположения сервера символов VSTS:
  1. Выберите на панели инструментов.
  2. В диалоговом окне Подключение к серверу символов VSTS выберите один из доступных серверов символов и щелкните Подключить.
- Чтобы изменить порядок загрузки для расположений символов, используйте клавиши CTRL+СТРЕЛКА ВВЕРХ и CTRL+СТРЕЛКА ВНИЗ либо значки со стрелками вверх и вниз.
- Чтобы изменить URL-адрес или путь, дважды щелкните элемент или выберите его и нажмите клавишу F2.
- Чтобы удалить элемент, выделите его и щелкните значок — .
Необязательно: чтобы повысить производительность загрузки символов, перейдите в раздел Кэшировать символы в этом каталоге и введите путь к локальной папке, в которую серверы символов могут копировать символы.
Укажите модули, которые отладчик должен загружать из расположений файлов символов (. pdb) при запуске.
- Выберите Все модули, кроме исключенных (значение по умолчанию), чтобы загружать все символы для всех модулей, кроме тех, что были явно исключены. Чтобы исключить конкретные модули, выберите Укажите исключенные модули, щелкните значок + , введите имена исключаемых модулей и нажмите кнопку ОК.
- Чтобы загружать из расположений файлов символов только заданные модули, выберите Загружать только указанные модули. Выберите Укажите включенные модули, щелкните значок + , введите имена включаемых модулей и нажмите кнопку ОК. Файлы символов для других модулей не загружаются.
Нажмите кнопку ОК.

Отладка рабочих процессов

При отладке проектов рабочих процессов Visual Studio добавляет шаблон рабочего процесса (в зависимости от его типа) в библиотеку или в список. Затем можно запустить шаблон рабочего процесса вручную или путем добавления или обновления элемента. Затем можно использовать Visual Studio для отладки рабочего процесса.

Observação

При добавлении ссылок на другие сборки убедитесь, что эти сборки установлены в глобальном кэше сборок ( глобальный кэш сборок ). В противном случае решение рабочего процесса завершится ошибкой. Сведения об установке сборок см. в разделе Запуск рабочего процесса по документу или элементу вручную.

Однако процесс развертывания не запускает рабочий процесс. рабочий процесс необходимо запустить с веб-сайта SharePoint. кроме того, рабочий процесс можно запустить с помощью клиентского приложения, например Microsoft Office Word 2010 или с помощью отдельного серверного кода. используйте один из подходов, указанных в мастере настройки SharePoint.

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

Выделение ссылок

Если щелкнуть символ в исходном коде, выделяются все вхождения этого символа в документе. Выделенные символы могут содержать объявления и ссылки, а также множество других символов, возвращаемых командой Найти все ссылки . Сюда входят имена классов, объектов, переменных, методов и свойств. В коде Visual Basic выделяются также ключевые слова для многих управляющих структур. Чтобы перейти к следующему или предыдущему выделенному символу, нажмите клавиши CTRL+SHIFT+СТРЕЛКА ВНИЗ или CTRL+SHIFT+СТРЕЛКА ВВЕРХ. Цвет выделения можно изменить в разделе Сервис > Параметры > Среда > Шрифты и цвета > Выделенная ссылка.

Отключение автоматического восстановления файлов

Visual Studio автоматически повторно открывает документы, открытые во время предыдущего сеанса. Это может увеличить время загрузки решения до 30 % или более в зависимости от типа проекта и открываемых документов. Конструкторы, например Windows Forms и XAML, и некоторые файлы JavaScript и typescript могут открываться медленно.

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

Выберите пункты меню Сервис > Параметры, чтобы открыть диалоговое окно Параметры.
На странице Проекты и решения > Общие отмените выбор пункта Повторно открыть документы при загрузке решения.

Если отключить автоматическое восстановление файлов, быстро перейти к нужным файлам можно с помощью одной из команд Перейти к:

Чтобы использовать общие функции Перейти к, выберите Изменить > Перейти к > Перейти ко всем или нажмите CTRL+T.
Перейдите к последней правке в решении, выбрав Изменить > Перейти к > Перейти к последнему изменению или нажав CTRL+SHIFT+BACKSPACE.
Используйте Перейти к последнему файлу, чтобы просмотреть список недавно просмотренных файлов в решении. Выберите Изменить > Перейти к > Перейти к последнему файлу или нажмите CTRL+1, CTRL+R.

Отладка кода в Visual Studio

Перед стартом отладки вашего кода не лишним было бы для себя выяснить, существует ли какая-то проблема с вашим кодом? Для чего вам нужна отладка? Если есть какие-то проблемы в работе вашего ПО и вы хотите найти их, используя отладчик Visual Studio, нужно понять, в чем суть проблемы. Возможно, есть проблемы, которые отладчик не определит, например:

орфографические ошибки или опечатки,
неправильно подключенные API,
неправильное размещение последних корректировок в код,
и др.

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

Прежде чем запускать отладчик Visual Studio, не лишним будет проверить код редактором кода и визуально оценить. Нужно искать «красные» и «зеленые»линии. «Красные» линии — это ошибки. «Зеленые» — предупреждения. Это могут быть:

ошибка компиляции;
ошибка преобразования типа;
код не поддерживает синтаксис;
и др.

«Красные» волнистые линии нужно исправить — это поможет в дальнейшем уменьшить количество ошибок, найденных Visual Studio. А зеленые, если не получается исправить, то по крайней мере нужно тщательно изучить.

Как запустить отладчик Visual Studio

Чтобы запустить отладчик Visual Studio, нужно:

Запустить саму программу Visual Studio.
Открыть код приложения, который необходимо отладить.
Потом при помощи нажатия клавиши «F5» запустить режим отладки. Также это можно сделать через меню, если нажать «Отладка», а потом «Начать отладку».

Начнется процесс отладки. При возникновении ошибок отладчик Visual Studio покажет вам строку их проявления и предоставит вам информацию о том, что произошло. Для более точного изучения кода вы можете расставить точки останова. Это те точки в коде, где отладчик Visual Studio остановит свою работу, а у вас появится возможность детальнее изучить:

последовательность исполнения кода;
работу памяти;
значение переменных и др.

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

Бывает такое, что сразу выявить ошибки не получается при помощи отладчика, но приложение все равно не работает корректно. Тогда вам тоже смогут помочь точки останова. Нужно выставить их перед выполнением проблемного кода, а потом запустить отладчик Visual Studio в построчном выполнении программы для детализированного анализа, и тогда баг проявится.

Создание проекта

Сначала вы создадите проект консольного приложения .NET Core. Для этого типа проекта уже имеются все нужные файлы шаблонов, что избавляет вас от лишней работы.

Откройте Visual Studio 2017.
В верхней строке меню последовательно выберите Файл > Создать > Проект.
В левой области диалогового окна Новый проект разверните узел Visual Basic и выберите .NET Core. На средней панели выберите Консольное приложение (.NET Core) . Назовите проект get-started-debugging.

Если шаблона проекта Console App (.NET Core) (Консольное приложение (.NET Core)) нет, выберите ссылку Открыть Visual Studio Installer в левой области диалогового окна Новый проект.

Запускается Visual Studio Installer. Выберите рабочую нагрузку Кроссплатформенная разработка .NET Core и затем элемент Изменить.

Запустите Visual Studio.

Если окно запуска не открыто, выберите Файл > Окно запуска.
На начальном экране выберите Создать проект.
В поле поиска окна Создание проекта введите консоль. Затем выберите Visual Basic в списке языков и Windows в списке платформ.

Применив фильтры по языку и платформе, выберите шаблон Консольное приложение для .NET Core и нажмите кнопку Далее.

Observação

Если шаблон Консольное приложение отсутствует, его можно установить из окна Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов. После этого в Visual Studio Installer выберите рабочую нагрузку Кроссплатформенная разработка .NET Core.
В поле Имя проекта окна Настроить новый проект введите get-started-debugging. Нажмите кнопку Далее.
Выберите рекомендуемую версию целевой платформы (.NET Core 3.1) или .NET 5 и щелкните Создать.

Новый проект открывается в Visual Studio.

Запустите Visual Studio.

Если окно запуска не открыто, выберите Файл > Окно запуска.
На начальном экране выберите Создать проект.
В поле поиска окна Создание проекта введите консоль. Затем выберите Visual Basic в списке языков и Windows в списке платформ.

После применения фильтров «Язык» и «Платформа» выберите шаблон Консольное приложение для .NET Core, а затем нажмите кнопку Далее.

Observação

Если шаблон Консольное приложение отсутствует, его можно установить в окне Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов. После этого в Visual Studio Installer выберите рабочую нагрузку Разработка классических приложений .NET.
В поле Имя проекта окна Настроить новый проект введите get-started-debugging. Нажмите кнопку Далее.
Убедитесь, что в окне Дополнительные сведения выбрана рекомендуемая целевая платформа (.NET 6.0), а затем нажмите кнопку Создать.

Новый проект открывается в Visual Studio.

Точки останова

Последняя тема, о которой мы поговорим в этом разделе, – это точки останова. Точка останова (breakpoint) – это специальный маркер, который сообщает отладчику остановить выполнение программы при работе в режиме отладки в точке останова.

Для пользователей Visual Studio

В Visual Studio вы можете установить или удалить точку останова через меню Отладка (Debug) → Вставить точку останова (Insert breakpoint) / Удалить точку останова (Delete breakpoint), или кликнув правой кнопкой мыши на инструкции и выбрав в контекстном меню Вставить точку останова (Insert breakpoint) / Удалить точку останова (Delete breakpoint), либо нажав клавишу F9, либо кликнув слева от номера строки (в светло-серой области).

Для пользователей Code::Blocks

В Code::Blocks вы можете установить или удалить точку останова через меню Debug (Отладка) → Toggle breakpoint (Переключить точку останова), или кликнув правой кнопкой мыши на инструкции и выбрав в контекстном меню Toggle breakpoint (Переключить точку останова), либо нажав клавишу F5, либо кликнув справа от номера строки.

Когда вы установите точку останова, вы увидите значок нового типа. Visual Studio и Code::Blocks используют красный кружок:

Рисунок 2 – Индикация точки останова в строке 5

Установите точку останова в строке 5, как показано на изображении выше.

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

Рисунок 3 – Отладчик остановился в точке останова в строке 5

Это как если бы вы запустили выполнение до курсора в этой точке.

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

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

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

Сначала запустите новый сеанс отладки, а затем выполнение до курсора в строке 5. Теперь выберите продолжить. Программа продолжится до конца (она не остановится на строке 5 снова, даже если строка 5 выполняется еще дважды).

Затем установите точку останова в строке 5, затем выберите запуск. Программа остановится на строке 5. Теперь выберите продолжить. Программа остановится на строке 5 во второй раз. Выберите продолжить снова, и она остановится в третий раз. Еще одна команда продолжить, и программа завершится. Вы можете видеть, что точка останова заставляла программу останавливаться столько раз, сколько выполнялась эта строка.

Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET)

Начиная с Visual Studio 2019, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium).

Visual Studio поддерживает отладку только для браузеров Chrome и Internet Explorer.

Однако, вы не сможете автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода.

Поместите инструкцию в той строке, где нужно прервать выполнение. Эта инструкция прерывает выполнение динамического скрипта и начинает отладку сразу же при его создании.
Загрузите страницу и откройте динамический документ в Visual Studio. Чтобы воспользоваться этим методом, нужно открыть динамический файл в процессе отладки, задать в нем точку останова и обновить страницу. В зависимости от выбранного браузера (Chrome или Internet Explorer) вы сможете найти этот файл с помощью следующих действий.

Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > .

Observação

Если вы используете Chrome, может появиться сообщение: Источник недоступен между тегами <script> . Это нормально, просто продолжайте отладку.

Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome.

Для Internet Explorer откройте пункты меню Обозреватель решений > Документы скриптов > Windows Internet Explorer > .

Дополнительные сведения см. в руководстве по отладке проектов ASP.NET в браузере Google Chrome на стороне клиента.

Настраиваем расширения

Ниже приведен список расширений, которые нам понадобятся для правильной настройки VS Code. Откройте VS Code и перейдите на панель расширений (Ctrl + Shift + X), которая находится на левой панели инструментов, и начните загружать друг за другом следующие расширения:

C / C++ от Microsoft — Для корректной работы этого расширения нам понадобится установленный и добавленный в PATH компилятор MinGW. Если у вас его нет, следуйте этому руководству.

C++ Intellisense от austin.

Python от Microsoft — вам нужно будет настроить Python для работы этого расширения

Загрузите и установите последнюю версию отсюда.

Java Extension Pack от Microsoft — Перед установкой убедитесь, что в вашей системе настроены Java 8 JDK и JRE и указаны все необходимые переменные среды для Java. Если нет, посмотрите это видео о том, как настроить Java на вашем компьютере.

Code Runner от Jun Han — мы будем использовать это расширение для запуска всех наших программ. Для этого необходимо выполнить некоторые шаги по настройке. Мы увидим эти шаги в следующих разделах.

Расширения, перечисленные ниже, необязательны для дальнейшей настройки, но я рекомендую вам обратить на них внимание, посмотреть, заинтересуют ли они вас, и если нет, то перейти к следующему разделу. (Необязательно)Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем

Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

(Необязательно)Material Theme от Mattia Astronio — это расширение содержит множество приятных глазу тем. Вы можете выбрать любую, какая понравится. Лично я предпочитаю Monokai, которая доступна в VS Code по умолчанию, без каких-либо расширений.

Чтобы выбрать тему, нажмите Ctrl + Shift + P. Откроется палитра команд. Осуществите поиск по слову “theme” и выберите опцию Color Theme. Чтобы настроить иконки, можете выбрать опцию File Icon Theme.

Расширения для тех, кто интересуется FrontEnd-фреймворками для веб-разработки, такими как Angular и React:

(Необязательно) Angular Language Service от Angular.
(Необязательно) Angular Snippets от John Papa.
(Необязательно) ES7 React / Redux / GraphQL / React-Native snippets от dsznajder.
(Необязательно) React Native Tools от Microsoft.
(Необязательно) Live Server от Ritwick Dey.

Итого

Приостановить выполнение скрипта можно тремя способами:

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

При остановке мы можем отлаживать – проанализировать переменные и пошагово пройти по процессу, что поможет отыскать проблему.

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

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

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