Как остановить программу в visual studio code
Visual Studio Code отличный выбор для начинающего программиста, имеет необходимый минимум:
- неплохую документацию
- автодополнение кода (с использованием IntelliSense)
- подсветка синтаксиса
- встроенный отладчик
- расширение функционала за счет плагинов
- управление системой контроля версий git
- кроссплатформенный
- бесплатный, с открытым исходным кодом
Также редактор адаптирован для Веб-разработки и вполне подойдет для серьезных проектов как основной инструмент редактирования кода.
Установка¶
Linux¶
Для Linux существуют два типа пакетов, самых популярных форматов, rpm и deb.
Установка в Ubuntu/Debian:
Fedora > 22 версии:
После установки можно запустить редактор следующей командой:
Пакетный менеджер Nix работает на любом Linux дистрибутиве, содержит богатую базу уже готовых пакетов, в том числе и vscode.
Установка пакетного менеджера:
Плагины¶
Редактор имеет возможность расширения функционала за счет плагинов и удобный интерфейс их установки, доступный по нажатию кнопки:
Из списка можно выбрать любой плагин и установить, после чего он применит свои настройки к редактору.
Расширения можно искать введя название или ключевые слова в строке поиска, например Python .
Python¶
После установки плагина Python нам становятся доступны многие функции:
- Автодополнение кода
- Проверка синтаксиса
- Отладка
- Подсказки
- Переход к определению функции, класса и прочее
Автодополнение¶
Работает при наборе по нажатию Ctrl + Space .
Проверка синтаксиса¶
Показывает ошибки в коде:
Работает если установлены Python пакеты Pylint , Pep8 или Flake8 .
Отладка¶
Встроенный в редактор отладчик позволяет отлаживать код визуально, устанавливать точки останова мышкой и просматривать переменные в отдельном окне. Это похоже на отладку в различных IDE, таких как QtCreator или Wingware.
Также избавляет программиста писать мучительные строки типа printf или import pdb;pdb.set_trace(); .
Настройки¶
Настройки хранятся в формате JSON и доступны из меню File->Preferences->User Settings .
Шрифт¶
Шрифт задается в настройках File->Preferences->User Settings :
Автодополнение через <Tab>¶
Более привычно дополнять код по клавише <Tab> . Для этого необходимо открыть настройки пользователя File->Preferences->User Settings и прописать опцию editor.tabCompletion :
Открываем командную строку Ctrl + Shift + P
Вводим команду Configure Language
Меняем локаль на нужную, например ru :
Цветовое оформление задается в настройках File->Preferences->Color Theme .
Умеет подсвечивать изменения в файлах с предыдущего коммита, выполнять команды git и отслеживать состояние, например какая текущая ветка.
Python скрипты¶
Visual Studio Code требует для отладки открывать не просто файл, а директорию. Это необходимо, чтобы в этом каталоге сохранить локальные настройки редактора. Такая директория будет считаться проектом для редактора.
Для примера, создадим директорию hello1 и откроем в редакторе File->Open Folder. .
Создадим в этой директории файл myapp.py :
Для запуска приложения, заходим в режим отладки по нажатию на кнопку:
Пока у нас нет никаких настроек отладки/запуска проекта, но при первом запуске редактор предложит их выбрать из существующих шаблонов.
Шаблон Python создает настройки в файле launch.json в локальной директории, которые выглядят примерно так:
Это универсальный шаблон, который добавляет несколько вариантов запуска приложений. Нас будет интересовать первый вариант Python , просто запускающий python файл.
Запущенное приложение останавливается на первой строчке, что позволяет нам продолжать выполнение программы по шагам.
После выполнения второй строки, интерпретатор выдаст ошибку ImportError: No module named pyramid.config . Это происходит из-за того что в нашем Python окружении не установлен модуль pyramid .
Решить эту проблему можно двумя способами:
Установить Pyramid в глобальное окружение.
Создать виртуальное окружение, установить в нем Pyramid и прописать его в настройках Visual Studio Code.
Создаем виртуальное окружение:
Прописываем путь до виртуального окружения в настройках проекта Visual Studio Code (файл launch.json ):
Добавим файл .gitignore :
Создаем первый коммит
Для создания коммита требуется ввести комментарий и нажать на кнопку в виде галочки.
Прописываем путь до гитхаба в нашем проекте, при помощи команды Git Easy:Add Orign
Отправляем изменения на GitHub , при помощи команды Git Easy:Push Current Branch to Origin
Для того чтобы проверка синтаксиса заработала, необходимо создать файл .vscode/settings.json и переопределить в нем глобальные настройки для нашего проекта:
Pyramid¶
Фреймворк Pyramid имеет несколько стартовых шаблонов, которые нужны для того, чтобы не начинать писать код с нуля. Рассмотрим как создать шаблон с БД sqlite + SQLAlchemy и настроить его в Visual Studio Code.
Для начала создадим директорию hello2 и виртуальное окружение hello2_env :
После установки Pyramid , в окружении появляется команда pcreate . С ее помощью создадим проект по шаблону:
Устанавливаем его как Python пакет:
Но так-как БД еще не создана, отображается страница с подсказкой как ее инициализировать:
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.
Быстро добавить комментарий
Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.
Перейти к строке под номером
Windows — Ctrl + G
Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.
Поменять строку местами с соседними
Alt и стрелки меняют текущую строку местами с соседними.
Дублировать строку
Windows — Shift + Alt + ↓ / ↑
Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.
Перейти к парной скобке
Windows — Ctrl + Shift + \
Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.
Переименовать переменную
Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.
Отформатировать документ
Windows — Shift + Alt + F
VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.
Перейти к объявлению переменной
Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.
Включить/выключить перенос слов
Windows — Alt + Z
Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.
Включить дзен-режим
Windows — Ctrl + K Z
Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape.
На интерактивных курсах все клавиши станут горячими
Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.
Набор всех доступных горячих клавиш (быстрых команд) для работы с редактором кода VSCode, которые значительно упрощают ведение разработки и написание кода.
Все десктопные программы имеют в своём арсенале быстрые команды комбинацией клавишь, называемые как горячие клавиши. Скорей всего вы уже знакомы с некоторыми командами горячими клавишами для управлением Windows. Так же и у самого популярного редактора кода Visual Studio Code есть большой набор своих горячих клавишь.
Основные
Ctrl + ⇧Shift + P или F1 Показать палитру команд
Ctrl + P Быстрое открытие, переход в файл.
Ctrl + ⇧Shift + N Новое окно/экземпляр
Ctrl + ⇧Shift + W Закрыть окно/экземпляр
Ctrl + , Параметры (Пользовательские настройки)
Ctrl + K или Ctrl + S Горячие клавиши (управление)
Редактирование - Базовые
Ctrl + X Вырезать строку (пустое выделение)
Ctrl + C Копировать строку (пустое выделение)
Alt + ↑ / ↓ Переместить строку вверх/вниз
⇧Shift + Alt + ↓ ИЛИ ↑ Копировать строку вверх/вниз
Ctrl + ⇧Shift + K Удалить строку
Ctrl + Enter Вставить строку ниже
Ctrl + ⇧Shift + Enter Вставить строку выше
Ctrl + ⇧Shift + \ Перейти к соответствующей скобке
Ctrl + ] ИЛИ [ Отступ/уменьшить отступ линии
Home ИЛИ End Перейти к началу / концу строки
Ctrl + Home Перейти к началу файла
Ctrl + End Перейти в конец файла
Ctrl + ↑ ИЛИ ↓ Прокрутка строки вверх / вниз
Alt + PgUp / PgDn Прокрутка страницы вверх / вниз
Ctrl + ⇧Shift + [ Свернуть фрагмент кода
Ctrl + ⇧Shift + ] Развернуть фрагмент кода
Ctrl + K Ctrl + [ Свернуть все сворачиваемые фрагменты кода
Ctrl + K Ctrl + ] Развернуть все сворачиваемые фрагменты кода
Ctrl + K Ctrl + 0 Fold (collapse) all regions
Ctrl + K Ctrl + J Unfold (uncollapse) all regions
Ctrl + K Ctrl + C Добавить строчный комментарий //
Ctrl + K Ctrl + U Удалить строчный комментарий //
Ctrl + / Поставить/снять строчный комментарий //
⇧Shift + Alt + A Поставить/снять блочный комментарий /* . */
Alt + Z Вкл/выкл перенос строк
Навигация
Ctrl + T Показать все символы
Ctrl + G Перейти к строке.
Ctrl + P Перейти к файлу.
Ctrl + ⇧Shift + O Перейти к символу.
Ctrl + ⇧Shift + M Показать панель проблем
F8 Перейти к следующей ошибке или предупреждению
⇧Shift + F8 Перейти к предыдущей ошибке или предупреждению
Ctrl + ⇧Shift + Tab↹ Навигация по истории вкладок редактора
Ctrl + M Toggle Tab moves focus
Поиск и замена
Ctrl + H Заменить
F3 ИЛИ ⇧Shift + F3 Найти следующий/предыдущий
Alt + Enter Select all occurences of Find match
Ctrl + D Add selection to next Find match
Ctrl + K Ctrl + D Move last selection to next Find match
Alt + C ИЛИ R ИЛИ W Toggle case-sensitive / regex / whole word
Мульти-курсор и выделение
Alt + Click Вставить курсор - Insert cursor
Ctrl + Alt + ↑ ИЛИ ↓ Insert cursor above / below
Ctrl + U Undo last cursor operation
⇧Shift + Alt + I Insert cursor at end of each line selected
Ctrl + I Select current line
Ctrl + ⇧Shift + L Select all occurrences of current selection
Ctrl + F2 Select all occurrences of current word
⇧Shift + Alt + → Expand selection
⇧Shift + Alt + ← Shrink selection
⇧Shift + Alt + (drag mouse) Column (box) selection
Ctrl + ⇧Shift + Alt + (arrow key) Column (box) selection
Ctrl + ⇧Shift + Alt + PgUp / PgDn Column (box) selection page up/down
Редактирование многих языков
Ctrl + Пробел Trigger suggestion
Ctrl + ⇧Shift + Пробел Trigger parameter hints
⇧Shift + Alt + F Format document
Ctrl + K Ctrl + F Format selection
F12 Go to Definition
Alt + F12 Peek Definition
Ctrl + K F12 Open Definition to the side
Ctrl + . Quick Fix
⇧Shift + F12 Show References
F2 Переименовать символ
Ctrl + K Ctrl + X Trim trailing whitespace
Ctrl + K M Change file language
Управление редактором
Ctrl + F4 , Ctrl + W Закрыть редактор
Ctrl + K F Закрыть папку
Ctrl + \ Разделить редактор
Ctrl + 1 ИЛИ 2 ИЛИ 3 Focus into 1st, 2nd or 3rd editor group
Ctrl + K Ctrl + ← ИЛИ → Focus into previous/next editor group
Ctrl + ⇧Shift + PgUp ИЛИ PgDn Move editor left/right
Ctrl + K ← ИЛИ → Move active editor group
Управление файлами
Ctrl + N Новый файл
Ctrl + O Открыть файл.
Ctrl + S Сохранить
Ctrl + ⇧Shift + S Сохранить как.
Ctrl + K S Сохранить все
Ctrl + F4 Закрыть
Ctrl + K Ctrl + W Закрыть все
Ctrl + ⇧Shift + T Открыть закрытый редактор - Reopen closed editor
Ctrl + K Enter Оставить открытым редактор в режиме предварительного просмотра - Keep preview mode editor open
Ctrl + Tab↹ Открыть следующий
Ctrl + ⇧Shift + Tab↹ Открыть предыдущий
Ctrl + K P Копировать путь активного файла
Ctrl + K R Открыть активный файл в проводнике
Ctrl + K O Показать активный файл в новом окне/экземпляре
Display
F11 Toggle full screen
⇧Shift + Alt + 0 Toggle editor layout (horizontal/vertical)
Ctrl + = ИЛИ - Zoom in/out
Ctrl + B Toggle Sidebar visibility
Ctrl + ⇧Shift + E Show Explorer / Toggle focus
Ctrl + ⇧Shift + F Показать Поиск
Ctrl + ⇧Shift + G Show Source Control
Ctrl + ⇧Shift + D Показать Отладка (Debug)
Ctrl + ⇧Shift + X Показать Расширения
Ctrl + ⇧Shift + H Replace in files
Ctrl + ⇧Shift + J Toggle Search details
Ctrl + ⇧Shift + U Show Output panel
Ctrl + ⇧Shift + V Open Markdown preview
Ctrl + K V Open Markdown preview to the side
Ctrl + K Z Zen Mode (Esc Esc to exit)
Отладка (Debug)
F9 Переключить точку останова
F11 / ⇧Shift + F11 Step into/out
Ctrl + K Ctrl + I Show hover
Интегрированный терминал
Ctrl + ` - Показать встроенный терминал
Ctrl + Shift + ` - Создать новый терминал
Ctrl + C Копировать выделенное
Ctrl + V Вставить в активный терминал
Ctrl + ↑ ИЛИ ↓ Прокрутить вверх/вниз
⇧Shift + PgUp ИЛИ PgDn Прокрутить на одну страницу вверх/вниз
Ctrl + Home Прокрутка в начало
Ctrl + End Прокрутка в конец
Способность отладки кода является важным навыком разработчика. Важно понимать и использовать широкий спектр инструментов отладки, которые существуют для конкретного языка программирования.
К сожалению, отладка может показаться не столь очевидной при работе с 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, как ему отлаживать наше приложение.
Читайте также: