Как запустить сеанс отладки в vs code
Перейти к содержимому

Как запустить сеанс отладки в vs code

  • автор:

�� Как запустить сеанс отладки в VS Code: подробная инструкция и советы ⚙️

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

def hello_world(): print("Привет, мир!") hello_world()

В этом примере, если вы установите точку останова на второй строке кода (print(«Привет, мир!»)), то выполнение программы остановится на этой строке при запуске сеанса отладки.

Детальный ответ

Как запустить сеанс отладки в VS Code

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

Шаг 1: Установка расширения «Debugger for Chrome»

Первым шагом в запуске сеанса отладки в VS Code является установка необходимого расширения. В данном случае мы будем использовать расширение «Debugger for Chrome», которое позволяет отлаживать код, работающий в браузере Google Chrome.

Чтобы установить расширение, выполните следующие действия:

  1. Откройте VS Code.
  2. Перейдите во вкладку «Extensions» (Расширения) в левой панели.
  3. Поиском найдите расширение «Debugger for Chrome».
  4. Нажмите кнопку «Install» (Установить), а затем подтвердите установку.

Шаг 2: Настройка конфигурации отладки

После установки расширения «Debugger for Chrome» необходимо настроить конфигурацию отладки. Конфигурация определяет, какой код будет отлаживаться и каким образом.

Для настройки конфигурации выполните следующие действия:

  1. Откройте панель «Run and Debug» (Запуск и отладка) в левой панели.
  2. Нажмите кнопку «Create a launch.json file» (Создать файл launch.json).
  3. Выберите «Chrome» из списка окружений.
  4. Оставьте настройки по умолчанию или настройте их в соответствии с вашим проектом.
  5. Сохраните файл launch.json.

Шаг 3: Запуск сеанса отладки

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

  1. Откройте файл, который вы хотите отлаживать в VS Code.
  2. Поставьте точку останова, указав место программы, на котором хотите остановить выполнение кода.
  3. Нажмите комбинацию клавиш Ctrl + Shift + D, чтобы открыть панель отладки.
  4. Выберите конфигурацию отладки, которую вы настроили в предыдущем шаге.
  5. Нажмите кнопку «Start Debugging» (Запустить отладку).

Шаг 4: Использование сеанса отладки

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

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

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

Заключение

С помощью сеанса отладки в VS Code вы можете эффективно находить и исправлять ошибки в своих программах. Надеюсь, эта статья помогла вам разобраться в процессе запуска сеанса отладки и использования его функционала. Успехов в вашей разработке!

Руководство. Отладка консольного приложения .NET с помощью Visual Studio Code

В этом учебнике представлены средства отладки, доступные в Visual Studio Code для работы с приложениями .NET.

Необходимые компоненты

  • В этом учебнике используется консольное приложение, созданное в руководстве Создание консольного приложения .NET в Visual Studio Code.

Использование конфигурации отладочной сборки

В .NET используются две встроенные конфигурации сборки — Отладка и Выпуск. Вы воспользуетесь отладочной конфигурацией сборки для отладки и конфигурацией для выпуска для окончательного выпуска программы.

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

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

  1. Запустите Visual Studio Code.
  2. Откройте папку проекта, созданную по инструкциям из статьи Создание консольного приложения .NET в Visual Studio Code.

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

Точка останова приостанавливает выполнение приложения на инструкции, предшествующей той строке, в которой установлена точка останова.

Breakpoint set

  1. Откройте файл Program.cs.
  2. Установите точку останова в строке, где отображается имя, дата и время, щелкнув в левом поле окна кода. Левое поле находится слева от номеров строк. Или нажмите клавишу F9 либо выберите в меню пункт Запуск>Перейти к следующей точке останова при выбранной строке кода. Красная точка в левом поле обозначает строку с точкой останова Visual Studio Code.

Настройка входных данных терминала

Точка останова находится после вызова метода Console.ReadLine . Консоль отладки не принимает входные данные терминала для выполняющейся программы. Чтобы использовать выходные данные терминала во время отладки, можно использовать встроенный терминал (одно из окон Visual Studio Code) или внешний терминал. В этом учебнике используется встроенный терминал.

  1. Папка проекта содержит папку VSCODE . Откройте файл launch.json, который находится в папке VSCODE.
  2. В файле launch.json измените console параметр с internalConsole integratedTerminal :

"console": "integratedTerminal", 

Запуск отладки

  1. Откройте окно отладки, щелкнув значок «Отладка» в меню слева. Open the Debug tab in Visual Studio Code
  2. Щелкните зеленую стрелку в верхней части панели рядом с элементом .NET Core Launch (console) (Запуск .NET Core (консоль)). Еще один способ запуска программы в режиме отладки — нажать клавишу F5 или выбрать в меню пункт Запуск>Начать отладку. Start debugging
  3. Перейдите на вкладку «Терминал «, чтобы просмотреть запрос «Что такое ваше имя?», который отображается в программе перед ожиданием ответа. Select the Terminal tab
  4. Введите строку в окне Терминал в ответ на запрос имени, а затем нажмите клавишу ВВОД . Выполнение программы остановится, когда будет достигнута точка останова, то есть перед выполнением метода Console.WriteLine . В разделе Локальные окна Переменные отображаются значения переменных, которые определены в текущем выполняемом методе. Breakpoint hit, showing Locals

Использование консоли отладки

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

  1. Выберите вкладку Консоль отладки.
  2. Введите name = «Gracie» в запросе в нижней части окна Консоль отладки и нажмите клавишу ВВОД . Change variable values
  3. Введите currentDate = DateTime.Parse(«2019-11-16T17:25:00Z»).ToUniversalTime() в нижней части окна Консоль отладки и нажмите клавишу ВВОД . В окне Переменные отображаются новые значения переменных name и currentDate .
  4. Продолжите выполнение программы, нажав кнопку Продолжить на панели инструментов. Еще один способ продолжить — нажать клавишу F5 . Continue debugging
  5. Снова выберите вкладку Терминал. Значения, отображаемые в окне консоли, соответствуют изменениям, произведенным в окне Консоль отладки. Terminal showing the entered values
  6. Нажмите любую клавишу, чтобы выйти из приложения и остановить отладку.

Установка условной точки останова

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

Breakpoint context menu

  1. Щелкните правой кнопкой мыши красную точку, обозначающую точку останова (или щелкните ее, удерживая нажатой клавишу CTRL в macOS). В контекстном меню выберите Изменить точку останова, чтобы открыть диалоговое окно, в котором можно ввести условное выражение.
  2. Выберите Expression в раскрывающемся списке, введите следующее условное выражение и нажмите клавишу ВВОД .

String.IsNullOrEmpty(name) 

Enter a conditional expression

При каждом достижении точки останова отладчик вызывает метод String.IsNullOrEmpty(name) и останавливается на этой строке только в том случае, если вызов метода возвращает true . Вместо условного выражения можно указать количество обращений (выполнение программы будет прервано, пока инструкция не будет выполнена указанное количество раз) или условие фильтра (выполнение программы будет прервано на основе таких атрибутов, как идентификатор потока, имя процесса или имя потока).

  • Запустите отладку программы, нажав клавишу F5 .
  • Когда на вкладке Терминал появится предложение ввести имя, нажмите клавишу ВВОД . Так как указанное вами условие соблюдается ( name имеет значение null или String.Empty), выполнение программы будет остановлено при достижении точки останова, то есть перед выполнением метода Console.WriteLine . В окне Переменные указывается, что значение переменной name «» или String.Empty.
  • Убедитесь в том, что переменная содержит пустую строку, введя следующий оператор в окне Консоль отладки и нажав клавишу ВВОД . Результат true .

    name == String.Empty 

    Пошаговое выполнение программы

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

    1. Установите точку останова на открывающей фигурной скобке метода Main .
    2. Нажмите клавишу F5 , чтобы запустить отладку. Visual Studio Code выделит строку точки останова. На этом этапе в окне Переменные показано, что массив args пуст, а name и currentDate имеют значения по умолчанию.
    3. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Step-Into buttonБудет выделена следующая строка.
    4. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выполняет Console.WriteLine для запроса имени и выделяет следующую строку выполнения. Следующая строка — это Console.ReadLine для name . Окно «Переменные » не изменяется, а вкладка «Терминал » отображает запрос «Что такое ваше имя?».
    5. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio выделит назначение переменной name . В окне Переменные видно, что name по-прежнему null .
    6. Ответьте на этот запрос, введя строку на вкладке «Терминал» и нажав клавишу ВВОД . На вкладке Терминал может не отображаться введенная строка, однако метод Console.ReadLine будет записывать входные данные.
    7. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code выделит назначение переменной currentDate . В окне Переменные отображается значение, полученное в результате вызова метода Console.ReadLine. На вкладке Терминал также отображается строка, указанная в командной строке.
    8. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . В окне Переменные отображается значение переменной currentDate , которому было присвоено свойство DateTime.Now.
    9. Выберите Запуск>Шаг с заходом или нажмите клавишу F11 . Visual Studio Code вызывает метод Console.WriteLine(String, Object, Object). В окне консоли отображается форматированная строка.
    10. Выберите Запуск>Шаг с выходом или нажмите клавиши SHIFT + F11 . Step-Out button
    11. Выберите вкладку Терминал. В окне терминала отобразится сообщение «Нажмите любую клавишу, чтобы выйти. «
    12. Нажмите любую клавишу для выхода из программы.

    Использование конфигурации сборки для выпуска

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

    Чтобы создать и протестировать версию консольного приложения для выпуска, откройте терминал и выполните следующую команду:

    dotnet run --configuration Release 

    Дополнительные ресурсы

    • Debugging in Visual Studio Code (Отладка в Visual Studio Code)

    Следующие шаги

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

    Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих

    Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!

    Сегодня речь пойдет о редакторе кода Visual Studio Code или просто VS Code. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.

    Если больше интересен редактор кода Sublime Text 3 по нему статья тут https://habr.com/ru/post/458206/

    Удаление

    Если ты уже пользуешься VS Code, но решил начать с чистого листа, то я покажу, как удалить программу полностью, включая все настройки и плагины. Кроме того, что программу нужно удалить из панели управления Windows, нужно еще перейти на Диск C > Пользователи > Твое имя пользователя и здесь удалить папку .vscode

    В строке пути нужно дописать AppData, далее переходим в папку Roaming и здесь нужно удалить папку Code.

    Установка

    Отлично, теперь мы можем установить программу. Переходим на сайт code.visualstudio.com, секция Download. Здесь есть версия под Mac, Linux. Меня интересует Windows. Нажимаем и скачиваем себе на ПК. Кстати, сайт программы очень полезный, поэтому советую его изучить.

    Программа скачана, запускаем инсталлятор и следуем инструкциям: принимаем, добавляем все галочки, далее, ждем пока программа установится на наш ПК.

    Запуск на слабой машине

    Когда программа установлена, можем ее запустить. Но запустится она не на каждом компьютере. Дело в том, что программа достаточно ресурсоемкая. Поэтому на слабой машине можно получить такой результат: вместо интерфейса программы черный экран, а процессор потеет на все 100%. Но выход есть — необходимо открыть контекстное меню ярлыка программы и дописать в пути к файлу вот такой флаг: —disable-gpu

    Отлично, теперь программа запустится даже на калькуляторе.

    Установка языка

    Программа запущена и мы можем приступить к знакомству с ней. А чтобы знакомится было проще, я установлю русский язык. Для этого я щелкаю на иконку расширений, В поле поиска начинаю писать russian, пока не увижу пакет Russian Language Pack for Visual Studio Code.

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

    Экран Приветствия

    Боковую панель я пока скрою, мы еще не раз к ней вернемся.
    Первое, что мы видим — это экран приветствия. Здесь есть пункт, с помощью которого мы можем импортировать все настройки, клавиши из уже установленных редакторов, например Vim, Sublime, Atom и другие.

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

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

    Интерфейс из коробки

    Лень читать? Тут видео версия.

    Все приготовления сделаны и теперь мы можем ознакомиться с интерфейсом программы и заодно посмотрим что может VS Code из коробки.

    Вызовем окно Общие сведения об интерфейсе и посмотрим основные элементы программы.

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

    Рассмотрим все подробнее.

    Строка состояния

    Проблемы

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

    Чтобы открыть панель, нужно щелкнуть на эти иконки либо зажать Ctrl+Shift+М, здесь нам будет выводиться сам текст сообщений о проблемах.

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

    Консоль отладки

    Помимо вкладки вывода проблем в этой панели у нас еще есть Консоль отладки кода, к ней мы еще вернемся.

    Вывод

    Журнал вывода работы всех программ и систем редактора. Здесь также можно отфильтровать этот журнал, очистить его, заблокировать скролл сообщений, развернуть панель или закрыть ее.

    Терминал

    Последняя вкладка в этой панели — встроенный терминал. Вызвать его можно зажав Ctrl+`.

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

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

    Уведомления

    Справа в строке состояния мы видим уведомления, сейчас их нет. Также есть возможность отправить твит с отзывом о программе.

    Также в панели состояния будут появляться множество других элементов.

    Контекстное меню

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

    Также в этом же контекстном меню можем скрыть эту строку полностью.

    Панель действий

    По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

    1. Проводник, он же встроенный файл менеджер;
    2. Поиск;
    3. Система управления контролем версий;
    4. Запуск и отладка приложений;
    5. Установщик различных дополнений — наш редактор;
    6. Внизу шестеренка, кликнув на которую мы увидим меню основных настроек программы.

    Проводник

    Начнем с Проводника, открыть его можно кликнув на иконку либо зажав Ctrl+Shift+E.

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

    Тут мы видим 3 основные вкладки:

    1. Открытые редакторы — здесь будет список открытых для редактирования файлов.
    2. Вкладка с папками, проектами. Сейчас у нас нет открытых папок.
    3. Структура, — сейчас тут ничего нет, к ней мы вернемся позже.

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

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

    Сейчас у нас появилась пустая папка hello_vscode, а также некоторые элементы управления:

    • Создать файл;
    • Создать папку;
    • Обновить все файлы и папки;
    • Свернуть все в проводнике.

    Давай создадим некоторые файлы, которые нам нужны для проекта. Нажимаем Создать файл, пишем например Index.html. Далее мы можем создать папку css и в ней создать файл style.css. Очень удобно пользоваться этим встроенным файл менеджером.

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

    Теперь мы можем перейти в Index.html и написать туда что-то интересное, например “Hello VC Code”.

    Подсветка синтаксиса

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

    Этот список не может включать в себя абсолютно все. Например, если мы работаем с файлом .kit. Давайте создадим index.kit и скопируем туда наш код. Мы увидим, что подсветки никакой нет, а вместо элемента html мы видим надпись простой текст. Что делать в этом случае? Нам нужно кликнуть на простой текст и тут у нас есть выбор — вместо автоматического обнаружения мы можем попробовать поискать дополнения для подсветки синтаксиса именно для файлов .kit.

    Если это ничего не дает, то мы можем настроить сопоставления. Кликаем сюда и выбираем язык сопоставления для файлов .kit. В моем случае это html.

    Теперь все файлы .kit программа будет распознавать как html файл и соответствующим образом подсвечивать. Вернемся к нашему настоящему html файлу. Сохраним все, что мы тут отредактировали. Результат работы можно увидеть открыв этот файл в браузере. Во вкладке структура мы увидим, что появилась такая древовидная структура нашего документа

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

    В итоге у меня останется только папка с проектом.

    Поиск

    Поиск (Ctrl+Shift+F) — штука нужная. Пишем слово hello, которое мы указывали в нашем html файле. Поиск его сразу же нашел, подсветил, показал в каком файле. Тут же можно заменить это слово на какое-то другое.

    Здесь удобно нам все это показывает, нажав здесь на иконку слово будет заменено.

    Система управления контролем версий

    Открыть вкладку можно кликнув на иконку либо зажав Ctrl+Shift+G. Для тех, кто уже знаком с системами контроля версий, например Git, тот оценит эту возможность. Немного позже я покажу как связать свой локальный проект с репозиторием на GitHub.

    Отладка приложения

    Следующий элемент панели действий — это Отладка приложения. Этот инструмент как самостоятельно так и с помощью сторонних плагинов позволяет нам анализировать выполнение того или иного программного кода.

    Например, у нас есть некий javascript код, и для того, чтобы запустить отладку, мы можем нажать на кнопку здесь либо нажать F5.

    Результат отладки будет выведен в нижней панели, также можно устанавливать так называемые точки останова кода и перемещаться между ними, что очень удобно.

    Расширения

    Тут у нас целый склад расширений и плагинов для нашего редактора. Мы уже использовали эту вкладку для установки языкового пакета. Кликаем на иконку либо зажав сочетание клавиш Ctrl+Shift+X мы увидим поле поиска расширений и три дополнительных вкладки:

    • Включено — выводятся все установленные расширения;
    • Рекомендуемые;
    • Расширения, которые установлены, но отключены.

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

    Настройки

    На панели действий у нас остался еще один элемент — шестеренка — меню основных настроек. Здесь мы можем вызвать палитру команд кликнув тут или Ctrl+Shift+P. Откроется такой блок, где мы можем найти и выполнить любую команду редактора или установленных плагинов.

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

    Заканчивая с Панелью действий, стоит отметить, что можно быстро вызвать последнюю открытую вкладку сочетанием Ctrl+B. Также скрыв контекстное меню можно скрыть ненужный элемент. Например, Запуск и Отладка я скрою. В этом же контекстном меню можно скрыть всю панель действий целиком.

    Область редактора

    Лень читать? Тут видео версия.

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

    Здесь есть дополнительное меню для управления всеми файлами.

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

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

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

    Что тут можем мы настроить?

    Как я уже показывал, окно редактора можно разделить на несколько частей, это удобно при работе с разными файлами. Для того, чтобы посмотреть разные варианты, нужно перейти в Вид > Макет редактора. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

    Также можно быстро оформить нужное положение файлов, просто перетаскивая их. Я сразу сформировал себе нужный макет для работы. Также есть возможность настроить вид всей области редактора. Откроем Меню > Вид > Внешний вид.

    Снизу есть возможность регулировать масштаб всей программы. Не путайте с размерами шрифта. Удобно пользоваться сочетаниями клавиш. Например, для увеличения элементов я нажимаю Сtrl+, для уменьшения — Ctrl-, для сброса настроек — Ctrl+0.

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

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

    Режимы экрана

    Сверху есть полноэкранный режим при нажатии на F11. Скроется верхнее меню, кнопки управления окном программы.

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

    Есть замечательный режим Zen. Он скрывает все элементы, даже вкладки с файлами, мы концентрируемся только на одном единственном файле, на одном коде. Решаем сложную задачу, которая требует максимальной концентрации.

    Чтобы выйти из него, нажимаю Escape.

    Перенос текста

    Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав Alt + Z. Что это значит? Например, у нас есть очень длинный текст, который не помещается в область кода и появляется горизонтальная прокрутка. Если это кажется неудобным, можно нажать Alt + Z весь наш текст перенесется, чтобы поместиться в область кода.

    Есть возможность скрыть или показать мини-карту, элементы управления, то есть хлебные крошки. Если он кажется ненужным. Здесь можно отобразить непечатаемые пробелы и печатаемые символы и отрисовать управляющие символы, которые могут быть в тексте скопированы с источника.

    Цветовая схема

    Выбрать одну из установленных тем мы можем перейдя в Управление, пункт Цветовая тема. Видим список и стрелками на клавиатуре можем перемещаться между темами, подбирая себе нужную тему. Есть как темные, так и светлые варианты.

    Если ни одна из этих тем не подходит, мы можем установить свою. Для этого я возвращаюсь к вкладке Расширения, в поле поиска пишу название своей темы — SpaceOceanKit. Нахожу, нажимаю Install. Далее у меня есть выбор какую тему мне выбрать и я выбираю именно ее.

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

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

    Иконки

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

    Также установить дополнительные пакеты значков. Например, Matherial Icon Theme.

    Параметры

    Дополнительно настроить комфорт работу с кодом и в целом с редактором можно в Параметрах программы. Для этого переходим в Управление > Параметры или зажимаем Ctrl+,

    Параметры можно настроить как глобально, так и для конкретного проекта. Настроек здесь очень много. Мы пройдемся по основным.

    Автосохранение

    Первая полезная опция — автосохранение файла. Для новичков очень крутая опция. Новички часто подходят ко мне с проблемой “Почему у меня ничего не работает?” Я смотрю, а там не сохранен файл.

    1. afterDelay — файл будет сохраняться после некоторой задержки, которую можно настроить сразу здесь ниже. При выборе этой опции при редактировании файла он сразу будет сохраняться, жирная точка даже не будет появляться.
    2. onfocusChange — файл будет сохранен, когда мы перейдем на другой файл
    3. onWindowChange — когда мы перейдем совсем на другую программу, тогда файл будет сохранен автоматически.

    Выбирайте для себя удобную опцию и двигаемся дальше.

    Отображение кода

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

    Я настраиваю размер отступа при табуляции. По умолчанию она составляет 4. Как по мне, слишком широкое поле при одном Tab, поэтому я меняю на значение 3, так мне кажется более компактно. Ты же указывай комфортное для тебя значение.

    В одном файле у меня выводятся пробелы, точки при нажатии Tab, в другом — значок табуляции. За эту опцию отвечает параметр Insert Spaces. По умолчании установлена галочка, то есть будут выводиться именно пробелы. Я хочу, чтобы у меня выводились значки табуляции, поэтому галочку уберу.

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

    А то, каким образом определять вставку символов для новых открытых файлов отвечает опция Detect Indentation. Я галочку уберу, потому что хочу, чтобы для всех файлов работали именно мои настроенные параметры.

    Скрыть подсказки

    Ранее я показывал, что при наведении на элемент в коде всплывают подсказки, часто это может раздражать. Чтобы подсказки убрать, существует параметр Hover Enabled. Галочку можно снять и подсказки пропадут.

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

    Мы можем сделать его полупрозрачным, ставятся значения rgba или вообще поменять цвет на другой. Если галочку Hover Enabled уберем, то эта функция тоже пропадает.

    За вывод отвечает параметр Color Decorators, если он не нужен, галочку можно снять и никаких квадратиков цвета не будет.

    Mouse Wheel Zoom — поставив галочку, мы сможем в редакторе изменить размер шрифта зажав Ctrl и покрутив колесико мыши.

    Close Active Groups управляет тем, будет ли закрываться группа при закрытии последней вкладки в ней. Редактор можно делить на части. По умолчанию при закрытии в последней вкладки, вся вкладка закроется. Иногда это неудобно, поэтому я эту галочку снимаю. И теперь при закрытии последней вкладки группа у меня все равно останется.

    Форматирование

    Следующая группа настроек отвечает за форматирование, которое уже встроено в редакторе VC Code. Что такое форматирование? Например, мы пишем структуру, в ней еще одну структуру, но по какой-то причине съехала табуляция. При зажатии Shift + Alt + F у нас все выстроится как надо.

    Вернемся к нашим настройкам. Здесь мы можем поставить три галочки:

    1. Format On Paste — форматирование будет произведено автоматически при вставке кода.
    2. Format On Save — форматирование будет произведено в момент сохранения файла.
    3. Format On Type — форматирование будет автоматическим, то есть мы будем печатать и будет сразу все форматироваться.

    Я устанавливаю одну галочку — Форматирование при сохранении.
    Теперь, когда у меня съехала табуляция, я не обращаю внимание, в момент сохранения файла все выстроится на свои места.

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

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

    Для быстрого доступа ко всему, что мы настроили, зажимаем Ctrl+Shift+P и в строке поиска пишем Settings, пока не увидим Settings (JSON). Нажимаем и перед нами появятся наши настройки, их тут же можно менять.

    В этом же файле будем настраивать и новое расширение.

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

    Плагины

    Лень читать? Тут видео версия.

    Emmet

    — этот плагин уже встроен в редакторе VS Code из коробки. И вправду, сегодня сложно себе представить жизнь без Emmet. Супер ускоряет набор кода. Например, именно благодаря ему, я так быстро создал начальный код для HTML файла написав только восклицательный знак и нажав Tab.

    Вот еще пример. Нам нужно создать div с классом block для этого я пишу .block и нажимаю Tab. Готово!

    Или например посложнее — нам нужно создать маркированный список на 10 элементов. Пишем ul>li*10 Tab. Готово!

    То же самое применимо и к файлам стилей. Например, для тега body я хочу задать размер шрифта 20 пикселей. Для этого мне достаточно написать fz20. Нажав Tab я получу уже готовый параметр.

    Лучше ознакомиться с возможностями Emmet можно на сайте этого дополнения.

    Сниппеты

    Но еще круче создавать свои сокращения-сниппеты для быстрого вызова того иного куска кода.
    Переходим в Управление > Пользовательские фрагменты кода. Здесь есть выбор:

      Создать сниппеты для конкретного языка;
      Создать сниппеты для всех языков, но для конкретного проекта;
      Создать глобальные сниппеты для всех языков и для всех проектов.

    Создадим глобальные, здесь нужно ввести имя списка сниппетов.

    Набираю my, нажимаю и открывается файл my.code-snippets. Здесь есть всякая информация закомментированная, а также пример. Я его раскомментирую. Здесь заготовка сниппета для языка JavaScript.

    Надпись означает название самого сниппета. Параметр scope — указываем языки для которых этот сниппет будет применяться. Это необязательный параметр, можно его убрать и сниппет будет применяться для всех языков. Префикс — это сокращения, то есть что мы будем набирать, чтобы вывелся нужный отрезок кода. В поле body мы и пишем наш кусок кода. Здесь будет выводиться console.log Ниже description, здесь можем указать описание.

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

    Пишу — “Внешний отступ”, это же можно добавить и в описание. Языки вообще уберу, а префикс я поставлю например mm. В body нужно задать параметр «margin: 0px, 0px, 0px 0px;», я хочу чтобы при наборе mm у меня вывелся такой параметр. Сохраняем Ctrl+S и проверим.

    Переходим в наш style.css набираем mm и нажимаем Tab. Видим, что наш кусок кода, готовый параметр сразу появился.

    Можем проверить тот снипет, который был задан изначально в качестве примера. Переходим в файл js, набираем log Tab.

    Здесь обращаю внимание, что курсор уже моргает в нужном месте, за это отвечают переменные $1 $2. Изначально курсор будет в положении $1. Если мы нажмем Tab, то курсор перескочит в $2. С помощью этих переменных можно настраивать свой сниппет.

    Я думаю, мне не нужено объяснять, какой скорости можно добиться, грамотно настроив свои сниппеты.

    Продолжаем установку плагинов. Зажимаем Ctrl+Shift+X и переходим во вкладку с расширениями.

    Live Sass Compiler

    Идеальное для тех, кто работает с препроцессорами SASS/SCSS. Ищем наше дополнение и нажимаем Install. Индикатор сверху показывает, что идет установка, Отлично, расширение установлено. Получаем информационное окошко, что все окей.

    В строке состояния появляется кнопочка Watch Sass. И сейчас мы будем этот плагин настраивать.

    Создадим папку с нашими scss файлами, так ее и назовем. Внутри создадим style.scss.
    Напишем код:

    body < font-size: 20 px; div< font-size: 10 px; >> 

    У нас пока ничего происходить не будет, но мы можем включить кнопку Watch Sass и плагин начал следить за нашими scss\sass файлами. Рядом с ним автоматически скомпилировались два файла style.css и style.css.map.

    Все отлично работает. Но, допустим, мы хотим, чтобы файлы создавались не рядом с файлом scss, а в папке css.

    Удалим старые файлы и перейдем к настройкам. Зажимаем Shift+Ctrl+P, вызываем наш Settings (JSON). Можем вставить следующую настройку, обязательно ставим запятую и вставляем две настройки.

    "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.formats": [ < "format": "expanded", "autoprefix": "last 5 versions", "extensionName": ".css", "savePath": "css" >], 

    Я выключаю генерацию файла-карты, мап-файла. Следующие настройки для собственно самого компилятора. «format» — можно указать, каким именно способом будет генерироваться scss файл — развернутый, ужат, минифицирован и т.д.

    Следующий параметр — Автопрефикс устанавливает всякие вендорные префиксы для наших css параметров. Указал последние пять версий браузера. Далее указываются расширения конечного файла — это css. Папку указал css, все файлы будут выводиться туда.

    Смотрим, что будет происходить. Сохраняем настройки, что-то меняем и мы видим в журнале вывода что-то происходит, заглядываем в папку css и видим, что там уже создайся наш style.css. Теперь у нас все работает и выводится туда, куда нужно.

    По поводу файлов, которые мы будем включать в style.scss. Мы знаем, что файлы в scss можно импортировать какие-то другие файлы. Пишем, как обычно — import «header.scss»

    Сразу получаем ошибку, потому что такого файла не существует и все быстро исправляем. Так мы бы обычно и делали…

    Что происходит? Когда я сохраняю header.scss у меня создается файл header.css. Но мне нужно, чтобы у меня был один файл style.css, который включает в себя и header, и многие другие файлы, которые я туда подключу. Удаляем header, это неправильно. Чтобы этого не было, мне нужно переименовать файл header.scss, указать вначале имени подчеркивание, а здесь при подключении указать подчеркивание и вообще убрать расширение.

    Компилятор будет уже сам понимать, что с ним делать. В итоге, я сохраняю, у меня уже не создается отдельный файл header.css, но стили его собраны в одном файле. Теперь работать очень классно 🙂

    Live Server

    В комплекте с плагином Live Css Compiler сразу устанавливается плагин Live Server — один из самых полезных плагинов, который умеет создавать локальный сервер и автоматически обновляет нам страницу при редактировании. Если ты не пользуешься Live Css Compiler, то плагин Live Server нужно установить отдельно.

    В поиске набираем его название, у нас он уже есть, установлен автоматически вместе с Live Css Compiler. Об этом говорит кнопку в строке состояния Go Live. Мы работаем с нашими файлами, когда мы хотим увидеть результат, перейдя в index.html нажимаем на Go Live и у нас запускается Браузер.

    Я редактирую свою html файл, пишу “Hello”, сохраняю, нажимаю GoLive и сразу вижу результат в браузере.

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

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

    SCSS IntelliSense

    Покажу еще несколько интересных плагинов для препроцессора SaSS. Установим SCSS IntelliSense, этот плагин подсказывает нам интересные штуки во время работы с scss, также удобно при работе именно с этим синтаксисом.

    SCSS Formatter

    Форматирование можно отдельно установить для конкретного синтаксиса. Этот плагин форматирует sсss файлы. Также его можно подстроить.

    Auto Complete Tag

    Мегаполезный плагин в который входят Auto Rename Tag и Auto Close Tab. Несмотря на то, что VS Code умеет закрывать теги, плагин Auto Close Tab — умеет закрывать теги не только в html, но и в многих других языках. Auto Rename Tag — изменяет закрывающий элемент автоматически, если переименовать открывающий. Например, мне нужно изменить открывающий элемент на span и мы видим, что закрывающий элемент изменит название автоматически.

    Bracket Pair Colorizer

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

    Indent Rainbow

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

    Better Comments

    Плагин работает с комментариями. Обычные комментарии серые и невзрачные, но иногда нужно оставить пометки, обратить внимание и т.д. Когда плагин установлен, мы можем выделить комментарий, сделать чек-лист заданий, задать вопрос.

    Ставим для чего-то очень важного —! — текст окрашен в красный, для списка ToDO — оранжевый, для вопроса —? — синий.

    Все цвета можно настроить, есть готовый код с настройками в информации, его можно перенести и там подправить цвета под наши задачи.

    Существуют ряд полезных плагинов, которые могут улучшить или заменить встроенный объект.
    Набрав в поиске Color, можно найти очень много разных примочек для работы с цветом и выбрать для себя что-то полезное.

    BEM Helper

    Это помощник при работе с методологией BEM. Он умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Может вставлять модификатор, помимо всего умеет формировать файл стилей, будь-то css или scss файл на основе bem-разметки в html коде.

    Попробуем. Нажимаем Alt+B+E, у нас вставился объект, учитывая класс родителя, клас блока.

    Как менять сочетания клавиш?

    На примере этого плагина покажу как можно менять сочетания клавиш.
    Допустим эти сочетания клавиш нас не устраивают. Мы копируем имя плагина, переходим в Управление > Сочетание клавиш и здесь ищем BEM Helper.

    Например, мы хотим изменить сочетание клавиш для вставки элементов Insert Element. Кликаем два раза, можем указать тут любое сочетание клавиш, которое захотим.

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

    eCSStractor

    Плагин, который помогает копировать классы из html в css\scss\sass. Установим его и сразу создадим сочетания клавиш, чтобы делать все быстро. Переходим в Управление > Сочетание клавиш, ищем наш плагин eCSStractor, видим несколько команд. Меня интересует команда eCSStractor Run (With BEM Nesting).

    Нажимаем на команду, на плюсик, придумываем свободное сочетание Ctrl+Alt+1, нажимаем Enter, наши горячие клавиши присвоились.

    Тестируем: переходим в наш html файл, выделяем блок с классами, нажимаем Ctrl+Alt+1, получаем сообщение, что наши классы скопировались.

    Переходим в файл стилей и вставляем. Видим, что все работает.

    Что делать, если нам нужно скопировать просто классы, но без BEM? Возвращаемся сочетания клавиш и нам нужно назначить сочетание Ctrl+Alt+2 например.

    Тестим, выделяем, вставляем. Готово, теперь у нас есть две комбинации клавиш — по BEM и без BEM.

    CSS Navigation

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

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

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

    Это же окошко можно вызвать сочетанием Alt + F12

    Image Preview

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

    Debugger for Chrome

    Для отладки кода можно использовать не встроенный инструмент, а этот плагин и с его помощью делать отладку какого-то скрипта. При нажатии на F5 мы можем выбрать Chrome, вся отладка будет проводиться на основе этого браузера, Нужно его дополнительно настроить и пользоваться.

    Vscode Google Translate или Google Translate

    Позволяет переводить выделенный текст с одного языка на другой. Для его настройки переходим в плагин, ищем команду translate text.

    Переходим в сочетания клавиш, вставляем команду, находим ее и задаем сочетание клавиш, допустим Shift+Alt+T.
    Возвращаемся в наш html файл, выделяем слово hello, зажимаем Shift+Alt+T и получаем список языков. Далее выбираем язык, на который нужно перевести и получаем перевод.

    Если нам нужно переводить только с русского на английский, то можем зайти в Параметры > Расширения, найти этот плагин, указать основной язык, на который нужно переводить, например английский.

    Возвращаемся в сочетание клавиш, сбросить старое сочетание клавиш и добавляем это сочетание клавиш на эту команду (Preffered). У нас есть русское слово, зажимаем Shift+Alt+T и сразу получаем английское. Я этим пользуюсь постоянно и поэтому рекомендую этот плагин.

    Project Manager

    Незаменим, если ты работаешь с множеством проектов, папок и т.д. Установим его и в панели действий появится иконка папочек. Это и есть наш Project Manager.

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

    Settings Sync

    Настройка программы под себя дело не быстрое и требует усилий, и чтобы каждый раз не приходилось делать то же самое, например при переустановке Windows, существует плагин Settings Sync.

    Он помогает хранить все настройки, в частности на GitHub и при установке новой версии программы мы получаем все настройки и плагины буквально за один клик.
    Я плагин установил, нужно залогиниться с помощью GitHub, все ОК, я получил об этом сообщение.

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

    Нужно сохранить все то, что мы сегодня настроили. В информации о плагине есть сочетание Shift+Alt+U.

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

    Ну а сейчас я полностью удалю программу и попробую получить все настройки заново.

    У меня чистая программа, теперь мне нужно установить плагин Settings Sync. Устанавливаю, далее нужно залогиниться с помощью GitHub. Здесь я могу выбрать свой существующий ключ.

    Я его выбираю. Мне нужно все мои настройки получить, смотрю, какое сочетание клавиш мне для этого нужно — Shift+Alt+D.

    Нажимаем, видим чтение удаленных данных, начинает что-то происходить. Спустя некоторое время я вижу, что моя программа выглядит точно так же, как она выглядела после того, как мы ее сегодня настроили. Некоторые плагины просят перезапустить программу, — позволяем. Отлично, вот у нас и русификатор, и все расширения, все как было и это заняло пару секунд.

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

    Вот общий (более широкий) список полезных плагинов:
    Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
    Settings Sync

    Связать с GITHub

    Лень читать? Тут видео версия.

    Внимание! На ПК должен быть установлен Git.

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

    Тут мы видим изменения которые нам нужно применить. Жмем на +, чтобы применить сразу все изменения.

    Нужно написать комит, жмем на галочку, пишем что-нибудь, нажимаем на Enter. Далее нужно создать репозиторий на GitHub.Переходим по ссылке Создать новый репозиторий, пишем название, жмем кнопку Создать. Даже нас интересуют эти две команды:

    git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git
    git push -u origin master

    Копируем, переходим в редакторе и открываем терминал. Важно, чтобы мы находились внутри в папке проекта. Если это не так, нам нужно перейти в проводник, вызвать контекстное меню, указать пункт Открыть терминал. Вставляем наши две команды, нажимаем Enter.

    Загрузки, готово. Теперь наш проект полностью связан с репозиторием Git. Если мы что-то начнем менять, мы увидим что здесь у нас появится значок 1, то есть изменен 1 файл в системе версий, опять нужно применить изменения, написать комит. Достаточно нажать Меню > Отправить и наш проект загрузится на репозиторий.

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

    Дополнительно можно установить плагин GitLens, который существенно расширяет возможности системы управления контролем версий.

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

    Обучайся, развивайся, и помни — живи, а работай в свободное время!

    Как запустить сеанс отладки в vs code

    Прошли те дни, когда мне, в процессе разработки, приходилось тратить время, переключаясь между терминалом, браузером и редактором. Теперь всё делается иначе — быстрее и удобнее. Сегодня я расскажу об оптимизации повседневных дел React-разработчика. А именно, речь пойдёт о том, как связать Visual Studio Code и Google Chrome. Это даст возможность отлаживать браузерный код в редакторе.

    Средства отладки VS Code и jest от Facebook

    Настройка тестового проекта

    Прежде чем мы начнём осваивать отладку React в VS Code, создадим учебное приложение, с которым будем экспериментировать. Я часто пользуюсь create-react-app, так как очень не люблю вручную создавать пустые проекты. Поэтому предлагаю задействовать его и в этом руководстве. Как вариант, если у вас уже есть приложение, вы можете воспользоваться им.

    Итак, создадим тестовый проект. Для этого надо сделать следующее:

    • Установите create-react-app глобально, выполнив команду npm i -g create-react-app .
    • После установки создайте проект командой create-react-app vscode-tutorial .

    Настройка VS Code

    Теперь установим расширение VS Code, которое позволит редактору взаимодействовать с Chrome. VS Code подключается к Chome с использованием протокола удалённой отладки. Это — тот же протокол, который используют инструменты разработчика Chrome. Но, благодаря такому подходу, вместо того, чтобы работать со стандартными инструментами Chrome, вы можете использовать для отладки браузерного кода VS Code.

    Установка расширения Debugger for Chrome

    Итак, для того, чтобы наладить взаимодействие VS Code и Chrome, нужно установить расширение, которое называется Debugger for Chrome . Для его установки надо перейти на панель расширений и выполнить поиск по названию расширения. В результате должно получиться примерно следующее:

    Поиск расширения Debugger for Chrome

    Подключение VS Code к Chrome

    Далее, нужно настроить VS Code на подключение к Chrome. Делается это так:

    • Щёлкните по значку отладки.
    • Откройте выпадающее меню (около кнопки Play ) и выберите пункт Add Configuration… .
    • В выпадающем списке Select Environment выберите Chrome .

    Настройка связи VS Code и Chrome

    В корень проекта будет автоматически добавлена папка .vscode . В ней будет находиться файл launch.json , который используется для настройки отладчика VS Code для текущего проекта. Каждый раз, когда вы создаёте новый проект, вам нужно выполнять ту же последовательность действий для настройки удалённой отладки (ещё можно просто скопировать папку .vscode из одного проекта в другой).

    Модифицируйте в этом файле свойство url для того, чтобы оно указывало на сервер, использующийся при разработке. Для create-react-app это http://localhost:3000 . В результате ваш launch.json должен выглядеть так (благодарю Кеннета Аухенберга из команды VS Code за совет по работе с этим файлом):

    Полный список конфигурационных опций можно найти здесь.

    Использование отладчика

    Теперь почти всё готово к работе. Следующий шаг заключается в использовании тестового проекта для того, чтобы проверить отладчик.

    Запуск отладчика

    Запустить отладчик можно, выполнив одно из следующих действий:

    • Нажать F5 .
    • Щёлкнуть по зелёной кнопке Play на панели отладки.
    • Выбрать команду меню Debug → Start Debugger .

    Панель инструментов, которая появляется при включении отладчика

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

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

    Установим точку останова в тестовом приложении. Откроем файл src/App.js и щёлкнем мышью по полю левее строки 11 . Тут должна появиться красная точка, которая указывает на то, что точка останова была добавлена. Вот, чтобы было понятно, анимированная версия этой инструкции:

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

    Запуск сервера разработки

    И наконец, для того, чтобы посмотреть как всё это работает, нужно запустить сервер разработки, выполнив команду npm start в терминале. Эта команда запустит новый сервер, доступный по адресу http://localhost:3000/ .

    Запуск сервера

    Перейдите по адресу http://localhost:3000/ и вы увидите, как страница «застынет». Это происходит из-за того, что сработала точка останова. Если перейти в VS Code, можно заметить, что строка 11 будет выделена, а на панели отладки появятся сведения о стеке вызовов.

    Сработавшая точка останова

    Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.

    Непрерывное тестирование с помощью jest

    Мне удобно, чтобы в процессе работы над кодом выполнялись модульные тесты. А именно, чтобы они вызывались всякий раз, когда я вношу изменения в программу. Благодаря create-react-app всё, что нужно для реализации такого сценария, настраивается автоматически. Для того, чтобы запустить jest , достаточно ввести в терминале команду npm test . Благодаря этому система будет наблюдать за файлами и автоматически запускать тесты при их сохранении. Выглядит это примерно так:

    Непрерывное тестирование в VS Code

    Итоги

    В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.

    Уважаемые читатели! Пользуетесь ли вы какими-нибудь полезными мелочами, которые повышают производительность труда при разработке веб-приложений?

    Отладка JavaScript в Google Chrome и Visual Studio Code

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

    К сожалению, отладка может показаться не столь очевидной при работе с 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), которая будет срабатывать только при выполнении определенного условия.

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

    Мы можем сделать это, щелкнув правой кнопкой мыши на поле gutter и создав точку останова со следующим условием — usernameInput.text === » :

    В случае отладки приложения 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, как ему отлаживать наше приложение.

    VS Code хранит конфигурацию отладки в файле launch.json внутри папки .vscode . Чтобы VS Code создал этот файл для нас, в меню редактора откройте выпадающий список «Нет конфигураций» («No Configurations») и выберите «Добавить конфигурацию» («Add Configuration»).

    VS Code хранит конфигурацию отладки в файле с именем launch.json внутри папки .vscode

    Затем из этого списка выберите пункт «Chrome»:

    Из раскрывающегося списка выберите конфигурацию «Chrome: Launch»:

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

    Нам нужно внести небольшое изменение в эту конфигурацию — правильно указать на исходный код тестируемого приложения. Исходный код приложения находится в каталоге public , поэтому необходимо изменить значение свойства «webRoot».

    Чтобы это сработало, что приложение уже должно быть запущено локально на определенном порту:

    Когда конфигурация настроена, можно начать сеанс отладки, нажав зеленую кнопку «Run Code». Приложение должно открыться в окне браузера Google Chrome, как показано ниже.

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

    С запущенным отладчиком вы можете установить контрольную точку в коде так, как мы это делали в Google Chrome. Для этого нажмите на поле gutter рядом с номером нужной строки. Я устанавливаю точку останова в том же месте, что и раньше, внутри обработчика события входа в систему.

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

    Вся функциональность отладчика кода, которую мы рассмотрели в браузере Google Chrome, аналогична той, что и в редакторе VS Code.

    Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на поле gutter и выберите «условная точка останова» с определенным условием.

    Если вы хотите отследить значения какой-либо переменной, нажмите знак «плюс» чтобы добавить новую переменную и введите имя этой переменной.

    Если вы хотите изучить переменные, перейдите на вкладку переменных и исследуйте их!

    Вывод

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

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

    Моя рекомендация — потратить некоторое время на изучение отладки как в браузере Google Chrome, так и в редакторе Visual Studio Code и посмотреть, что вам больше нравится. Если у вас есть какие-либо вопросы или комментарии, найдите меня в Twitter.

    Debugging

    One of the key features of Visual Studio Code is its great debugging support. VS Code’s built-in debugger helps accelerate your edit, compile, and debug loop.

    Debugging diagram

    Debugger extensions

    VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets transpiled to JavaScript.

    For debugging other languages and runtimes (including PHP, Ruby, Go, C#, Python, C++, PowerShell and many others), look for Debuggers extensions in the VS Code Marketplace or select Install Additional Debuggers in the top-level Run menu.

    Below are several popular extensions which include debugging support:

    Tip: The extensions shown above are dynamically queried. Select an extension tile above to read the description and reviews to decide which extension is best for you.

    Start debugging

    The following documentation is based on the built-in Node.js debugger, but most of the concepts and features are applicable to other debuggers as well.

    It is helpful to first create a sample Node.js application before reading about debugging. You can follow the Node.js walkthrough to install Node.js and create a simple «Hello World» JavaScript application ( app.js ). Once you have a simple application set up, this page will take you through VS Code debugging features.

    Run and Debug view

    To bring up the Run and Debug view, select the Run and Debug icon in the Activity Bar on the side of VS Code. You can also use the keyboard shortcut ⇧⌘D (Windows, Linux Ctrl+Shift+D ) .

    Run and Debug icon

    The Run and Debug view displays all information related to running and debugging and has a top bar with debugging commands and configuration settings.

    If running and debugging is not yet configured (no launch.json has been created), VS Code shows the Run start view.

    Simplified initial Run and Debug view

    Run menu

    The top-level Run menu has the most common run and debug commands:

    Run menu

    Launch configurations

    To run or debug a simple app in VS Code, select Run and Debug on the Debug start view or press F5 and VS Code will try to run your currently active file.

    However, for most debugging scenarios, creating a launch configuration file is beneficial because it allows you to configure and save debugging setup details. VS Code keeps debugging configuration information in a launch.json file located in a .vscode folder in your workspace (project root folder) or in your user settings or workspace settings.

    To create a launch.json file, click the create a launch.json file link in the Run start view.

    launch configuration

    VS Code will try to automatically detect your debug environment, but if this fails, you will have to choose it manually:

    debug environment selector

    Here is the launch configuration generated for Node.js debugging:

    If you go back to the File Explorer view ( ⇧⌘E (Windows, Linux Ctrl+Shift+E ) ), you’ll see that VS Code has created a .vscode folder and added the launch.json file to your workspace.

    launch.json in Explorer

    Note: You can debug a simple application even if you don’t have a folder open in VS Code, but it is not possible to manage launch configurations and set up advanced debugging. The VS Code Status Bar is purple if you do not have a folder open.

    Note that the attributes available in launch configurations vary from debugger to debugger. You can use IntelliSense suggestions ( ⌃Space (Windows, Linux Ctrl+Space ) ) to find out which attributes exist for a specific debugger. Hover help is also available for all attributes.

    Do not assume that an attribute that is available for one debugger automatically works for other debuggers too. If you see green squiggles in your launch configuration, hover over them to learn what the problem is and try to fix them before launching a debug session.

    launch.json IntelliSense

    Review all automatically generated values and make sure that they make sense for your project and debugging environment.

    Launch versus attach configurations

    In VS Code, there are two core debugging modes, Launch and Attach, which handle two different workflows and segments of developers. Depending on your workflow, it can be confusing to know what type of configuration is appropriate for your project.

    If you come from a browser Developer Tools background, you might not be used to «launching from your tool,» since your browser instance is already open. When you open DevTools, you are simply attaching DevTools to your open browser tab. On the other hand, if you come from a server or desktop background, it’s quite normal to have your editor launch your process for you, and your editor automatically attaches its debugger to the newly launched process.

    The best way to explain the difference between launch and attach is to think of a launch configuration as a recipe for how to start your app in debug mode before VS Code attaches to it, while an attach configuration is a recipe for how to connect VS Code’s debugger to an app or process that’s already running.

    VS Code debuggers typically support launching a program in debug mode or attaching to an already running program in debug mode. Depending on the request ( attach or launch ), different attributes are required, and VS Code’s launch.json validation and suggestions should help with that.

    Add a new configuration

    To add a new configuration to an existing launch.json , use one of the following techniques:

    • Use IntelliSense if your cursor is located inside the configurations array.
    • Press the Add Configuration button to invoke snippet IntelliSense at the start of the array.
    • Choose Add Configuration option in the Run menu.

    VS Code also supports compound launch configurations for starting multiple configurations at the same time; for more details, please read this section.

    In order to start a debug session, first select the configuration named Launch Program using the Configuration dropdown in the Run and Debug view. Once you have your launch configuration set, start your debug session with F5 .

    Alternatively, you can run your configuration through the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ) by filtering on Debug: Select and Start Debugging or typing ‘debug ‘ and selecting the configuration you want to debug.

    As soon as a debugging session starts, the DEBUG CONSOLE panel is displayed and shows debugging output, and the Status Bar changes color (orange for default color themes):

    debug session

    In addition, the debug status appears in the Status Bar showing the active debug configuration. By selecting the debug status, a user can change the active launch configuration and start debugging without needing to open the Run and Debug view.

    Debug status

    Debug actions

    Once a debug session starts, the Debug toolbar will appear on the top of the editor.

    Debug Actions

    Action Explanation
    Continue / Pause
    F5
    Continue: Resume normal program/script execution (up to the next breakpoint).
    Pause: Inspect code executing at the current line and debug line-by-line.
    Step Over
    F10
    Execute the next method as a single command without inspecting or following its component steps.
    Step Into
    F11
    Enter the next method to follow its execution line-by-line.
    Step Out
    ⇧F11 (Windows, Linux Shift+F11 )
    When inside a method or subroutine, return to the earlier execution context by completing remaining lines of the current method as though it were a single command.
    Restart
    ⇧⌘F5 (Windows, Linux Ctrl+Shift+F5 )
    Terminate the current program execution and start debugging again using the current run configuration.
    Stop
    ⇧F5 (Windows, Linux Shift+F5 )
    Terminate the current program execution.

    Tip: Use the setting debug.toolBarLocation to control the location of the debug toolbar. It can be the default floating , docked to the Run and Debug view, or hidden . A floating debug toolbar can be dragged horizontally and also down to the editor area.

    Run mode

    In addition to debugging a program, VS Code supports running the program. The Debug: Run (Start Without Debugging) action is triggered with ⌃F5 (Windows, Linux Ctrl+F5 ) and uses the currently selected launch configuration. Many of the launch configuration attributes are supported in ‘Run’ mode. VS Code maintains a debug session while the program is running, and pressing the Stop button terminates the program.

    Tip: The Run action is always available, but not all debugger extensions support ‘Run’. In this case, ‘Run’ will be the same as ‘Debug’.

    Breakpoints

    Breakpoints can be toggled by clicking on the editor margin or using F9 on the current line. Finer breakpoint control (enable/disable/reapply) can be done in the Run and Debug view’s BREAKPOINTS section.

    • Breakpoints in the editor margin are normally shown as red filled circles.
    • Disabled breakpoints have a filled gray circle.
    • When a debugging session starts, breakpoints that cannot be registered with the debugger change to a gray hollow circle. The same might happen if the source is edited while a debug session without live-edit support is running.

    If the debugger supports breaking on different kinds of errors or exceptions, those will also be available in the BREAKPOINTS view.

    The Reapply All Breakpoints command sets all breakpoints again to their original location. This is helpful if your debug environment is «lazy» and «misplaces» breakpoints in source code that has not yet been executed.

    Breakpoints

    Optionally, breakpoints can be shown in the editor’s overview ruler by enabling the setting debug.showBreakpointsInOverviewRuler :

    breakpoints in overview ruler

    Logpoints

    A Logpoint is a variant of a breakpoint that does not «break» into the debugger but instead logs a message to the console. Logpoints are especially useful for injecting logging while debugging production servers that cannot be paused or stopped.

    A Logpoint is represented by a «diamond» shaped icon. Log messages are plain text but can include expressions to be evaluated within curly braces (‘<>‘).

    Just like regular breakpoints, Logpoints can be enabled or disabled and can also be controlled by a condition and/or hit count.

    Note: Logpoints are supported by VS Code’s built-in Node.js debugger, but can be implemented by other debug extensions. The Python and Java extensions, for example, support Logpoints.

    Data inspection

    Variables can be inspected in the VARIABLES section of the Run and Debug view or by hovering over their source in the editor. Variable values and expression evaluation are relative to the selected stack frame in the CALL STACK section.

    Debug Variables

    Variable values can be modified with the Set Value action from the variable’s context menu. Additionally, you can use the Copy Value action to copy the variable’s value, or Copy as Expression action to copy an expression to access the variable.

    Variables and expressions can also be evaluated and watched in the Run and Debug view’s WATCH section.

    Debug Watch

    Variable names and values can be filtered by typing while the focus is on the VARIABLES section.

    Filtering in the Variables section

    Launch.json attributes

    There are many launch.json attributes to help support different debuggers and debugging scenarios. As mentioned above, you can use IntelliSense ( ⌃Space (Windows, Linux Ctrl+Space ) ) to see the list of available attributes once you have specified a value for the type attribute.

    launch json suggestions

    The following attributes are mandatory for every launch configuration:

    • type — the type of debugger to use for this launch configuration. Every installed debug extension introduces a type: node for the built-in Node debugger, for example, or php and go for the PHP and Go extensions.
    • request — the request type of this launch configuration. Currently, launch and attach are supported.
    • name — the reader-friendly name to appear in the Debug launch configuration dropdown.

    Here are some optional attributes available to all launch configurations:

    • presentation — using the order , group , and hidden attributes in the presentation object, you can sort, group, and hide configurations and compounds in the Debug configuration dropdown and in the Debug quick pick.
    • preLaunchTask — to launch a task before the start of a debug session, set this attribute to the label of a task specified in tasks.json (in the workspace’s .vscode folder). Or, this can be set to $ to use your default build task.
    • postDebugTask — to launch a task at the very end of a debug session, set this attribute to the name of a task specified in tasks.json (in the workspace’s .vscode folder).
    • internalConsoleOptions — this attribute controls the visibility of the Debug Console panel during a debugging session.
    • debugServer — for debug extension authors only: this attribute allows you to connect to a specified port instead of launching the debug adapter.
    • serverReadyAction — if you want to open a URL in a web browser whenever the program under debugging outputs a specific message to the debug console or integrated terminal. For details see section Automatically open a URI when debugging a server program below.

    Many debuggers support some of the following attributes:

    • program — executable or file to run when launching the debugger
    • args — arguments passed to the program to debug
    • env — environment variables (the value null can be used to «undefine» a variable)
    • envFile — path to dotenv file with environment variables
    • cwd — current working directory for finding dependencies and other files
    • port — port when attaching to a running process
    • stopOnEntry — break immediately when the program launches
    • console — what kind of console to use, for example, internalConsole , integratedTerminal , or externalTerminal

    Variable substitution

    VS Code makes commonly used paths and other values available as variables and supports variable substitution inside strings in launch.json . This means that you do not have to use absolute paths in debug configurations. For example, $ gives the root path of a workspace folder, $ the file open in the active editor, and $ the environment variable ‘Name’. You can see a full list of predefined variables in the Variables Reference or by invoking IntelliSense inside the launch.json string attributes.

    Platform-specific properties

    Launch.json supports defining values (for example, arguments to be passed to the program) that depend on the operating system where the debugger is running. To do so, put a platform-specific literal into the launch.json file and specify the corresponding properties inside that literal.

    Below is an example that passes «args» to the program differently on Windows:

    Valid operating properties are «windows» for Windows, «linux» for Linux, and «osx» for macOS. Properties defined in an operating system specific scope override properties defined in the global scope.

    Please note that the type property cannot be placed inside a platform-specific section, because type indirectly determines the platform in remote debugging scenarios, and that would result in a cyclic dependency.

    In the example below, debugging the program always stops on entry except on macOS:

    Global launch configuration

    VS Code supports adding a «launch» object inside your User settings. This «launch» configuration will then be shared across your workspaces. For example:

    Advanced breakpoint topics

    Conditional breakpoints

    A powerful VS Code debugging feature is the ability to set conditions based on expressions, hit counts, or a combination of both.

    • Expression condition: The breakpoint will be hit whenever the expression evaluates to true .
    • Hit count: The ‘hit count’ controls how many times a breakpoint needs to be hit before it will ‘break’ execution. Whether a ‘hit count’ is respected and the exact syntax of the expression vary among debugger extensions.

    You can add a condition and/or hit count when creating a source breakpoint (with the Add Conditional Breakpoint action) or when modifying an existing one (with the Edit Condition action). In both cases, an inline text box with a dropdown menu opens where you can enter expressions:

    Condition and hit count editing support is also supported for function and exception breakpoints. You can initiate condition editing from the context menu or the new inline Edit Condition action.

    An example of condition editing in the BREAKPOINTS view:

    If a debugger does not support conditional breakpoints, the Add Conditional Breakpoint and Edit Condition actions will be missing.

    Inline breakpoints

    Inline breakpoints will only be hit when the execution reaches the column associated with the inline breakpoint. This is particularly useful when debugging minified code which contains multiple statements in a single line.

    An inline breakpoint can be set using ⇧F9 (Windows, Linux Shift+F9 ) or through the context menu during a debug session. Inline breakpoints are shown inline in the editor.

    Inline breakpoints can also have conditions. Editing multiple breakpoints on a line is possible through the context menu in the editor’s left margin.

    Function breakpoints

    Instead of placing breakpoints directly in source code, a debugger can support creating breakpoints by specifying a function name. This is useful in situations where source is not available but a function name is known.

    A function breakpoint is created by pressing the + button in the BREAKPOINTS section header and entering the function name. Function breakpoints are shown with a red triangle in the BREAKPOINTS section.

    Data breakpoints

    If a debugger supports data breakpoints, they can be set from the context menu in the VARIABLES view. The Break on Value Change/Read/Access commands will add a data breakpoint that is hit when the value of the underlying variable changes/is read/is accessed. Data breakpoints are shown with a red hexagon in the BREAKPOINTS section.

    Debug Console REPL

    Expressions can be evaluated with the Debug Console REPL (Read-Eval-Print Loop) feature. To open the Debug Console, use the Debug Console action at the top of the Debug pane or use the View: Debug Console command ( ⇧⌘Y (Windows, Linux Ctrl+Shift+Y ) ). Expressions are evaluated after you press Enter and the Debug Console REPL shows suggestions as you type. If you need to enter multiple lines, use Shift+Enter between the lines and then send all lines for evaluation with Enter . Debug Console input uses the mode of the active editor, which means that the Debug Console input supports syntax coloring, indentation, auto closing of quotes, and other language features.

    Debug Console

    Note: You must be in a running debug session to use the Debug Console REPL.

    Redirect input/output to/from the debug target

    Redirecting input/output is debugger/runtime specific, so VS Code does not have a built-in solution that works for all debuggers.

    Here are two approaches you might want to consider:

    Launch the program to debug («debug target») manually in a terminal or command prompt and redirect input/output as needed. Make sure to pass the appropriate command line options to the debug target so that a debugger can attach to it. Create and run an «attach» debug configuration that attaches to the debug target.

    If the debugger extension you are using can run the debug target in VS Code’s Integrated Terminal (or an external terminal), you can try to pass the shell redirect syntax (for example, «») as arguments.

    Here’s an example launch.json configuration:

    Multi-target debugging

    For complex scenarios involving more than one process (for example, a client and a server), VS Code supports multi-target debugging.

    Using multi-target debugging is simple: after you’ve started a first debug session, you can just launch another session. As soon as a second session is up and running, the VS Code UI switches to multi-target mode:

    • The individual sessions now show up as top-level elements in the CALL STACK view.
      Callstack View
    • The debug toolbar shows the currently active session (and all other sessions are available in a dropdown menu).
      Debug Actions Widget
    • Debug actions (for example, all actions in the debug toolbar) are performed on the active session. The active session can be changed either by using the dropdown menu in the debug toolbar or by selecting a different element in the CALL STACK view.
    Compound launch configurations

    An alternative way to start multiple debug sessions is by using a compound launch configuration. A compound launch configuration lists the names of two or more launch configurations that should be launched in parallel. Optionally a preLaunchTask can be specified that is run before the individual debug sessions are started. The boolean flag stopAll controls whether manually terminating one session will stop all of the compound sessions.

    Compound launch configurations are displayed in the launch configuration dropdown menu.

    Remote debugging

    VS Code does not itself support remote debugging: this is a feature of the debug extension you are using, and you should consult the extension’s page in the Marketplace for support and details.

    There is, however, one exception: the Node.js debugger included in VS Code supports remote debugging. See the Node.js Debugging topic to learn how to configure this.

    Automatically open a URI when debugging a server program

    Developing a web program typically requires opening a specific URL in a web browser in order to hit the server code in the debugger. VS Code has a built-in feature «serverReadyAction» to automate this task.

    Here is an example of a simple Node.js Express application:

    This application first installs a «Hello World» handler for the «/» URL and then starts to listen for HTTP connections on port 3000. The port is announced in the Debug Console, and typically, the developer would now type http://localhost:3000 into their browser application.

    The serverReadyAction feature makes it possible to add a structured property serverReadyAction to any launch config and select an «action» to be performed:

    Here the pattern property describes the regular expression for matching the program’s output string that announces the port. The pattern for the port number is put into parenthesis so that it is available as a regular expression capture group. In this example, we are extracting only the port number, but it is also possible to extract a full URI.

    The uriFormat property describes how the port number is turned into a URI. The first %s is substituted by the first capture group of the matching pattern.

    The resulting URI is then opened outside of VS Code («externally») with the standard application configured for the URI’s scheme.

    Trigger Debugging via Edge or Chrome

    Alternatively, the action can be set to debugWithEdge or debugWithChrome . In this mode, a webRoot property can be added that is passed to the Chrome or Edge debug session.

    To simplify things a bit, most properties are optional and we use the following fallback values:

    • pattern: «listening on.* (https?://\\S+|[0-9]+)» which matches the commonly used messages «listening on port 3000» or «Now listening on: https://localhost:5001».
    • uriFormat: «http://localhost:%s»
    • webRoot: «$ «
    Triggering an Arbitrary Launch Config

    In some cases, you may need to configure additional options for the browser debug session—or use a different debugger entirely. You can do this by setting action to startDebugging with a name property set to the name of the launch configuration to start when the pattern is matched.

    The named launch configuration must be in the same file or folder as the one with the serverReadyAction .

    Here the serverReadyAction feature in action:

    Next steps

    To learn about VS Code’s Node.js debugging support, take a look at:

      — Describes the Node.js debugger, which is included in VS Code. — The Node.js debugger also supports TypeScript debugging.

    To see tutorials on the basics of Node.js debugging, check out these videos:

      — Showcases the basics of debugging. — Shows how to attach a debugger to a running Node.js process.

    To learn about debugging support for other programming languages via VS Code extensions:

    Отладка JavaScript с помощью Visual Studio Code и DevTools от Google Chrome

    Отладка и устранение неполадок – важный навык, поскольку он позволяет разработчику эффективно и вовремя исправлять ошибки. При отладке JavaScript вне интегрированной среды (IDE) даже опытным разработчикам не всегда очевидно, какие инструменты нужно использовать.

    В этом мануале мы рассмотрим отладку JavaScript с помощью Google Chrome DevTools, а также с помощью популярного текстового редактора Visual Studio Code (VS Code).

    Требования
    • ​​Последняя версия Google Chrome на вашем компьютере.
    • Последняя версия Visual Studio Code на вашем компьютере.
    • Локальная установка Node.js (у нас есть мануалы для macOS, CentOS 8, Ubuntu 20.04, Debian 10).

    Примеры, которые мы рассмотрим в этом мануале, вы можете выполнить на одном из ваших проектов JavaScript, которые можно запустить на сервере Node. Если у вас нет такого проекта, создайте тестовое приложение.

    1: Создание тестового приложения (опционально)

    Если у вас нет проекта JavaScript, с которым вы могли бы работать в ходе выполнения этого мануала, вы можете создать тестовый проект Quick Chat.

    С помощью Git клонируйте этот репозиторий. Также можно загрузить zip-файл и разархивировать его содержимое.

    Примечание: Если вам нужно установить Git, читайте мануал Разработка проектов с открытым исходным кодом: начало работы с Git.

    Для этого руководства мы будем использовать код из part-8. Для начала рекомендуем ознакомиться с кодом, чтобы понять, как работает это приложение.

    Перейдите в каталог проекта, а затем в каталог part-8:

    cd Design-and-Build-a-Chat-Application-with-Socket.io
    cd part-8

    Установите пакеты npm для этого проекта:

    Если вы зайдете в Chrome и посетите 127.0.0.1:3000, вы увидите запрос имени пользователя. Когда вы введете имя и нажмете кнопку «Chat!», вы будете перенаправлены в приложение чата и увидите следующее сообщение:

    User joined the chat.

    Если ввести текст в поле ввода внизу окна и нажать кнопку «Send», ваши сообщения отобразятся в окне чата.

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

    Внесение ошибки в код

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

    Откройте part-8/public/app.js в текстовом редакторе и найдите строку 96:

    //set the username and create logged in message
    username = usernameInput.value;

    Замените ее следующей строкой:

    //set the username and create logged in message
    username = usernameInput.text; // added bug

    Обновите вкладку браузера. Войдите в чат, после чего вы увидите:

    undefined joined the chat.

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

    2: Основы отладки

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

    После срабатывания точки останова обычно есть следующие варианты:

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

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

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

    3: Отладка в Google Chrome

    Чтобы начать отладку в Chrome, добавьте в приложение оператор debugger.

    Если вы работаете с тестовым приложением, которое мы создали в разделе 1, вы можете добавить оператор в обработчик события клика loginBtn:

    loginBtn.addEventListener(‘click’, e =>
    //set the username and create logged in message
    username = usernameInput.text; // added bug
    sendMessage( );
    //show chat window and hide login
    loginWindow.classList.add(‘hidden’);
    chatWindow.classList.remove(‘hidden’);
    >);

    При достижении этого оператора ваше приложение будет приостановлено, а инструменты отладки будут активированы автоматически. Вы заметите, что приложение будет неактивным – это означает, что оно было остановлено. Вы также увидите, что в Chrome DevTools появилась вкладка Sources.

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

    Вкладка Sources

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

    Chrome дает вам возможность просматривать этот код не просто так: теперь вы можете устанавливать в нем точки останова. Точка останова – это преднамеренная остановка или пауза в программе.

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

    Вкладка Scope

    Во вкладке Scope у вас есть возможность проверить переменные в приложении. Здесь вы найдете раздел Local (локальная область действия функции, в которой находится точка останова), раздел Global (глобальная область) и Script (в нем вы можете просмотреть переменные в рамках текущего скрипта).

    На этот этап отладки уйдет значительная часть времени. Это гораздо эффективнее, чем записывать множество операторов console.log().

    Вкладка Watch

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

    Используйте кнопку + и введите имя переменной, которую вы хотите отслеживать.

    Если вы тоже работаете с тестовым приложением, вы можете использовать:

    Стек вызовов и список точек останова

    Последние разделы позволят вам просмотреть список точек останова, стек вызовов и т.д.

    Если вы работаете с тестовым приложением, стек вызовов будет содержать функцию обработчика событий для кнопки входа (loginBtn.addEventListener.e). Она указана, потому что это единственная вызываемая на данный момент функция. По мере вызова других функций эта цепочка будет обновляться соответствующим образом.

    Также обратите внимание на кнопки со стрелками в верхней части отладчика.

    Они соответствуют функциям, на которые ссылаются для продолжения выполнения вашего кода или для его пошагового выполнения (построчно или по функциям). Немного поработайте с этими кнопками, чтобы привыкнуть к тому, как управлять выполнением кода.

    Вы можете установить различные виды точек останова. Давайте посмотрим, как создать условную точку останова, которая срабатывает только при выполнении определенного условия. Кликните правой кнопкой мыши по пустому пространству и выберите Add conditional breakpoint…

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

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

    Обратите внимание: множество доступных параметров точки останова здесь не рассматриваются.

    4: Отладка в VS Code

    Как вы уже видели, Chrome DevTools предлагает отличные возможности и большое количество функций для отладки приложения. Однако Visual Studio Code предоставляет аналогичные функции отладки, но более плавно интегрированные в вашу среду.

    Чтобы начать отладку в VS Code, установите расширение Debugger for Chrome.

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

    Открыв эту панель, вы увидите инструменты, аналогичные тем, что мы уже видели в Chrome: переменные, Watch, стек вызовов и точки останова.

    Большинство функций, которые вы получаете в Chrome DevTools, доступны и здесь, в VS Code.

    Теперь, когда вы увидели вкладку Debug, создайте конфигурацию запуска, которая сообщит VS Code, как отлаживать ваше приложение. VS Code хранит конфигурации отладки в файле launch.json в папке .vscode.

    Чтобы VS Code создал этот файл, вы можете нажать на ссылку, указанную в панели, в сообщении To customize Run and Debug create a launch.json file. Вы также можете сделать это через меню: выберите Run → Add Configuration… → Chrome .

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

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

    Если вы работаете с тестовым приложением, вам следует изменить порт с 8080 на 3000.

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

    Для отладки тестового приложения файл launch.json должен иметь такой вид:

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

    Определив конфигурацию, вы можете начать сеанс отладки, нажав зеленую кнопку воспроизведения в верхней части панели. Вы также можете использовать меню ( Run → Start Debugging ) и горячие клавиши.

    Ваше приложение появится в окне Chrome.

    Вы увидите панель отладки, которая появляется на заднем плане в VS Code. С помощью этой панели вы можете приостанавливать, перезапускать, возобновлять и использовать функции для навигации по коду и взаимодействия с отладчиком.

    Подключив отладку, вы можете установить точку останова в коде, как делали это в Chrome. Кликните на пустое место рядом с номером строки.

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

    Теперь при попытке войти в систему без ввода имени пользователя сработает точка останова. Она переключит контекст обратно в VS Code для дальнейшего исследования ошибки.

    Далее вся функциональность, которую мы обсуждали в разделе, посвященном Chrome, полностью отображается в VS Code. Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на пустое пространство и выберите Add Conditional Breakpoint… и укажите условие. Если вы хотите отслеживать переменную, нужно добавить новую переменную и ввести имя переменной, которую нужно отслеживать. Если вы хотите изучить переменные, перейдите во вкладку Variables.

    Заключение

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

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

    Похожие публикации:

    1. Зернистость экрана монитора как убрать
    2. Как передать фото с фотоаппарата на телефон через wifi canon
    3. Как сбросить пароль в линукс минт
    4. Как узнать адрес сетевой карты
  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *