Как отладить HTML код в Visual Studio Code: пошаговая инструкция

Visual Studio Code (VS Code) – популярный редактор кода, идеально подходящий для веб-разработки. Он предлагает множество функций, которые упрощают процесс кодирования, включая мощный отладчик. В этой статье мы расскажем о том, как использовать отладчик VS Code для отладки вашего HTML кода.

Как отладить HTML код в Visual Studio Code

Настройка отладчика в Visual Studio Code

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

• Откройте VS Code и перейдите в меню "Extensions" (иконка квадрат с шестерёнкой).
• Введите "Debugger for Chrome" в поле поиска.
• Установите расширение от Microsoft.

2. Создание конфигурации отладки:

• Нажмите "Run" > "Add Configuration... ".
• Выберите "Chrome" из списка существующих конфигураций.
• VS Code создаст файл .vscode/launch.json.

3. Настройка конфигурации:

• В файле launch.json найдите строку "url": "http://localhost:5500/index.html".
• Замените index.html на имя вашего HTML файла.
• Если вы используете другой порт, измените значение 5500.

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

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

1. Запуск отладки:

• Нажмите "Run" > "Start Debugging" (иконка жучка в левом верхнем углу).
• VS Code запустит Chrome и откроет ваш HTML файл.

2. Установка точек останова:

• Щелкните слева от номера строки, в которой вы хотите установить точку останова.
• VS Code поставит красный кружок, обозначающий точку останова.

3. Отладка кода:

• Когда исполнение достигает точки останова, в VS Code появляется строка с переменными.
• Вы можете с помощью кнопок "Step Over", "Step Into", "Step Out" использовать отладчик:Step Over: Пропускает текущую строку.
  Step Into: Заходит в функцию.
  Step Out: Выходит из функции.
  

4. Дополнительные возможности:

• Консоль: Вы можете использовать консоль для вывода информации и выполнения Javascript кода.
• Просмотр переменных: Вы можете просматривать значения переменных и вводить их в консоль.

Советы:

• Используйте console.log() для вывода информации в консоль.
• Проверяйте значения переменных с помощью отладчика.
• Добавляйте комментарии в код, чтобы легче понять его работу.