Foreversoft.ru

IT Справочник
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Список ошибок visual studio

ОТЛАДКА В VISUAL STUDIO. ПОИСК ЛОГИЧЕСКИХ ОШИБОК В ПРОГРАММЕ

Дата добавления: 2014-09-25 ; просмотров: 1726 ; Нарушение авторских прав

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

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

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

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

Начало сеанса отладки

Первый шаг отладки приложения – это выбор команды Start Debugging (F5) на стандартной панели инструментов или в меню Debug, после чего приложение запускается в режиме отладки.

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

Установка точек останова

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

Установить точку останова на какой-либо строке кода можно при помощи щелчка по полю индикаторов данной строки (рис. 16). Либо можно установить курсор на нужной строке и нажать клавишу F9.

Рисунок 16.Установка точки останова

Просмотр данных в отладчике

Когда выполнение программы в сеансе отладки приостановлено (например, при помощи точки останова), можно изучить состояние и содержимое ее переменных и объектов. Для этого в VS можно использовать три вида окон: Local (Локальные), Autos (Видимые) и Watch (Контрольные).

Доступ к окнам можно получить нажав Debug->Windows->выбрать нужное окно(Рис. 17)

Рисунок 17. Доступ к окнам

Окно Local показывает все переменные и их значения для текущей области видимости отладчика. Это дает вам представление обо всем, что имеется в текущей выполняющейся функции. Переменные в этом окне организованы в список и автоматически настраиваются отладчиком. На рис. 18 показан пример окна Local. С его помощью можно увидеть приложение нашего примера, которое приостановлено до обнуления соответствующих элементов массива. Обратите внимание, что объект (массив) a развернут для того, чтобы показать значения его элементов в момент остановки выполнения программы. По мере установки значений результаты будут отображаться в столбце Value.

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

Читать еще:  Основные принципы архитектуры фон неймана

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

показано окно Autos для той же самой строки кода, которая показана на рис. 18. Обратите внимание на разницу.

Окна Watch в VS позволяют настраивать собственный список переменных и выражений, за которыми нужно наблюдать (рис. 20). Окна Watch выглядят и ведут себя точно так же, как и окна Local и Autos. Кроме того, те элементы, которые вы размещаете в окнах Watch, сохраняются между сеансами отладки.

Рисунок 18. Окно Local

Рисунок 19. Окно Autos

Вы получаете доступ к окнам Watch из меню или панели инструментов Debug (рис. 17). Четыре окна Watch (которые называются Watch 1, Watch 2, Watch 3 и Watch 4) позволяют настроить четыре списка элементов, за которыми необходимо наблюдать. Эта возможность может быть особенно полезна в том случае, когда каждый список относится к отдельной области видимости вашего приложения.

Переменную или выражение в окно Watch 1 можно добавить из редактора кода. Для этого в редакторе кода выделите переменную (или выражение), щелкните по ней правой кнопкой мыши и выберите пункт Add Watch. При этом выделенная переменная (или выражение) будет помещена в окно Watch 1. Вы можете также перетащить выделенный элемент в это окно.

Рисунок 20. Окно Watch 1

Пошаговое прохождение для поиска ошибки

После того как в нашем примере отладчик, встретив точку останова, прервал выполнение программы, далее можно выполнять код по шагам (режим трассировки). Для этого можно выбрать команду Step into на панели инструментов Debug или нажать функциональную клавишу F11(Рис. 21). Это приведет к последовательному выполнению кода по одной строке, что позволит вам видеть одновременно и ход выполнения приложения, и состояние объектов программы по мере выполнения кода. Команда Step into (F11) позволяет продвигаться по коду по одной строке. Вызов этой команды выполнит текущую строку кода и поместит курсор на следующую выполняемую строку. Важное различие между Step into и другими похожими командами состоит в

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

Если сделать так в нашем примере, то вы увидите ошибку: обнуление элементов массива должно начинаться не с элемента с индексом i1, а со следующего элемента i1+1.

Команда Step out (F10) позволяет вам сохранять фокус в текущей функции (не заходя в вызываемые ею подпрограммы), т. е. вызов Run out приведет к выполнению строки за строкой, но не заведет вас в вызовы функций и при этом следующей выполняемой

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

Рис 21. Команда Step Into

Одной из более удобных (и часто упускаемых) функциональных возможностей набора инструментов отладки является функция Run to cursor ( Выполнить до текущей позиции). Она работает в полном соответствии со своим названием. Вы устанавливаете курсор на некий код и вызываете эту команду. Приложение компилируется и выполняется до тех пор, пока не доходит до той строки, где находится курсор. В этой точке отладчик прерывает приложение и выдает вам эту строку кода для пошагового прохождения. Рис. 22.

Читать еще:  Архитектура сети token ring

Рисунок 22. Вызов команды Run To Cursor

Продолжить отладку после точки останова можно повторным нажатием на кнопку F5 (Start Debugging).

Рисунок 23. Результат работы программы после исправления ошибки

Рассмотрим пошаговое выполнение программы с использованием окна Watch на простейшем примере.

5 советов и хитростей для Visual Studio Code

1. Проверка типа JavaScript

Разберёмся, как добавить простую проверку типа JavaScript в Visual Studio Code. Посмотрите на этот JavaScript-пример, в котором намереваемся суммировать два числа:

Пример с неверным типом переменной

Вы заметите, что попытка неудачная. Вам покажется это пустяком, но при написании финансовых программ, чувствительных к расчётам, легко вляпаться по неосторожности. Решить проблему помогают такие инструменты, как TypeScript и Flow. Но иногда нам не хватает бюджета или времени, чтобы внедрить TypeScript в программный поток. Поэтому смотрите, как справиться с помощью VS Code.

Добавьте комментарий @ts-check в начало файла. Вы увидите, что Visual Studio автоматически выделяет ошибки:

@ts-check в код» data-src=»https://media.proglib.io/posts/2019/10/11/1cae4c7d18061d76549d36c33f399a42.png» > Эффект добавления @ts-check в код

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

Заметили, что мы до сих пор не решили изначальную проблему с проверкой при суммировании двух чисел?

Функция принимает два аргумента, пытается складывать их и должна бы выдать ошибку из-за невозможности прибавить строку к числу. Этого не происходит, потому что в первом случае переменную x инициализировали как число, на основании чего VS Code сделал заключение о типе. А функцию не инициализируем. Так что редактор на самом деле не знает, как интерпретировать типы параметров для функции добавления.

Чтобы сообщить VS Code типы параметров функции, используем документирование. Если набрать /** и нажать Enter , VS Code находит эту функцию, разбирает сигнатуру и создаёт JS doc:

add » data-src=»https://media.proglib.io/posts/2019/10/11/f7d2f502dae99aebb65d408a23dfc7df.png» > Сгенерированная документация для функции add

Добавим тип number для обоих параметров. Теперь посмотрим, как VS Code начал ловить ошибку, которая возникала из-за передачи строки в качестве второго аргумента:

Отображение ошибки после указания типа в JS doc

Если изменить аргумент на число, ошибка исчезает.

2. Рефакторинг с помощью переименования символов

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

Скажем, нам понадобилось изменить словарь или объект foo в counter , но он уже используется тысячу раз по всему проекту, в куче различных файлов. А также в планах переименовать ключ атрибута bark в value , чтобы получилось counter.value вместо foo.bark . Как этого добиться?

Примитивный способ – выполнить глобальный поиск и замену через панель поиска ( Shift + Cmd + F в Mac OS или Shift + Ctrl + F в Windows и Linux). Это быстро, но и небезопасно – если в проекте обнаружится переменная с именем food , то простая замена также затронет эту переменную. Получим counterd , ой!

Именованные объекты называются «символами». И самый простой и «правильный» способ сделать это – использовать функцию Rename Symbol в VS Code. Поместите курсор на «символы», которые собираетесь переименовать, затем нажмите F2 (также на Mac OS). Появится текстовое поле рядом с выбранным объектом. Таким образом, ссылки на это имя по всему проекту будут правильно переименованы. Если использовать это для компонента React, тег разметки JSX тоже переименовывается!

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

Посмотрим, как использовать Snippets в Visual Studio Code. Благодаря этой опции вы сможете создавать пользовательские фрагменты кода. И не придётся полагаться на расширение или VS Code плагины с добавлением фрагментов.

Читать еще:  Архитектура клиент сервер в бд

Чтобы создать сниппет, нажмите Cmd + Shift + P и в строке поиска наберите User Snippets.

Поиск меню настройки

Откройте меню настройки пользовательских фрагментов Configure User Snippets и найдите конкретный язык, для которого создаёте фрагмент. В нашем случае это JavaScript, поэтому выбираем его и нажимаем Enter . После чего редактор выдаёт нам файл JavaScript или JSON. Вы можете легко создавать новое расширение в нём. В нашем случае продолжаем работать с полученным примером.

Пример фрагмента

Видите? Фрагмент – в сущности объект, и у каждого объекта три свойства: prefix , description , body . Префикс сообщает VS Code, что этот фрагмент скоро будет активирован. Описание напоминает, что вы как разработчик активируете фрагмент, как только начинаете печатать этот конкретный префикс. Тело – собственно код, который генерируется после активации фрагмента. Если посмотрите внимательно, вы увидите два плейсхолдера, обозначенных как 1 и 2 . Чтобы понять, что они делают, посмотрим на этот фрагмент в действии.

Если открыть файл JavaScript и напечатать react-stateless , то после нажатия Enter вы увидите, как фрагмент генерируется.

react-stateless » data-src=»https://media.proglib.io/posts/2019/10/11/c08e87806e5e0162fd65213fd12c04c5.png» > Созданный фрагмент после ввода react-stateless

Главный момент – ComponentName . Посмотрите внимательно на тело фрагмента и поймёте, что ComponentName – первый плейсхолдер. Если изменить ComponentName на Todo и нажать Tab во фрагменте, курсор не добавит пробел, а перепрыгнет к аргументу log . И он также редактируется:

Фрагмент после редактирования

4. Горячие клавиши для редактирования

В редакторе разработчики не только набирают текст, но и перемещают его куски.

Замечали, что делает VS Code при нажатии стандартных горячих клавиш для копирования, вставки и вырезания без выделения символов? Применяет действие ко всей строке. Это отлично подходит для редактирования целых строк текста.

Рассмотрим другие шорткаты для дублирования и перемещения строк.

Alt + Up или Alt + Down перемещают строку, на которой сейчас курсор, вверх или вниз. Shift + Alt + Up или Shift + Alt + Down дублируют строку и располагают её выше или ниже текущей строки. Эти сокращения также работают при выделении нескольких строк. Однако в дистрибутивах Linux встречаются конфликты этих комбинаций с общесистемным сопоставлением клавиш по умолчанию. В таком случае придётся переназначить их в настройках VS Code.

Однако самая крутая фишка – Shift + Ctrl + Cmd + Right/Left (на Mac OS) для расширения или сокращения выделения блока. Попробуйте это внутри вложенного блока кода и поймёте, о чём речь! Эквивалент для Windows и Linux – Shift + Alt + Right/Left .

5. Преобразование кода в Visual Studio Code

Иногда для достижения целей нужна современная версия JavaScript, но из-за использования в проекте более старых версий перейти на новую становится крайне сложно. На помощь приходит VS Code опция, которая преобразует код в более новые версии, даже если вы писали его в старых.

Если нажать на следующую функцию-конструктор, VS Code подсвечивает подсказку в виде лампочки. Кликните по ней и увидите предложение преобразовать функцию в ES 2015 класс.

Подсказка для конвертации функции-конструктора

Когда согласитесь конвертировать функцию в ES 2015 класс, VS автоматически определит методы-прототипы этой конкретной функции-конструктора и преобразует всё в класс.

Или представьте, что собираетесь преобразовать Promise в async и await . Нажмите на функцию, которая возвращает Promise и увидите подсказку, клик по которой откроет предложение конвертировать объект в функцию async .

Promise в async » data-src=»https://media.proglib.io/posts/2019/10/11/d13c1b6e1d60f8f3b1f85cc67f52e633.png» > Выбор преобразования функции с Promise в async

Как только нажмёте на него, функция конвертируется в async с использованием await .

Результат преобразования

Ссылка на основную публикацию
Adblock
detector