Отладка в visual studio code
Отладка и устранение неполадок – важный навык, поскольку он позволяет разработчику эффективно и вовремя исправлять ошибки. При отладке 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 для этого проекта:
User joined the chat.
Внесение ошибки в код
Теперь мы намеренно внесем небольшую ошибку, из-за которой нам больше не удастся зарегистрировать пользователя после входа.
Откройте 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 => debugger; // added debugger
e.preventDefault();
if (!usernameInput.value) return console.log('Must supply a username');
>
//set the username and create logged in message
username = usernameInput.text; // added bug
sendMessage(< author: username, type: messageTypes.LOGIN >);
//show chat window and hide login
loginWindow.classList.add('hidden');
chatWindow.classList.remove('hidden');
>);
При достижении этого оператора ваше приложение будет приостановлено, а инструменты отладки будут активированы автоматически. Вы заметите, что приложение будет неактивным – это означает, что оно было остановлено. Вы также увидите, что в Chrome DevTools появилась вкладка Sources.
Давайте теперь подробно разберемся с тем, что мы видим на экране.
Вкладка Sources
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.
Созданная вами конфигурация будет автоматически подключена к приложению через указанный порт.
Возможно, вам потребуется внести изменения в эту конфигурацию, чтобы правильно указать исходный код приложения.
Если вы работаете с тестовым приложением, вам следует изменить порт с 8080 на 3000.
Наше тестовое приложение обслуживается из public каталога, и вам следует обновить webRoot, чтобы отразить это.
Для отладки тестового приложения файл launch.json должен иметь такой вид:
"version": "0.2.0",
"configurations": [
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "$/public"
>
] >
Примечание: имейте в виду, что ваше приложение уже должно быть запущено локально по определенному порту, чтобы эта конфигурация работала.
Определив конфигурацию, вы можете начать сеанс отладки, нажав зеленую кнопку воспроизведения в верхней части панели. Вы также можете использовать меню ( Run → Start Debugging ) и горячие клавиши.
Ваше приложение появится в окне Chrome.
Вы увидите панель отладки, которая появляется на заднем плане в VS Code. С помощью этой панели вы можете приостанавливать, перезапускать, возобновлять и использовать функции для навигации по коду и взаимодействия с отладчиком.
Подключив отладку, вы можете установить точку останова в коде, как делали это в Chrome. Кликните на пустое место рядом с номером строки.
Если вы работаете с тестовым приложением, создайте точку останова в том же месте, что и в предыдущем разделе, только внутри обратного вызова события входа.
Теперь при попытке войти в систему без ввода имени пользователя сработает точка останова. Она переключит контекст обратно в VS Code для дальнейшего исследования ошибки.
Далее вся функциональность, которую мы обсуждали в разделе, посвященном Chrome, полностью отображается в VS Code. Если вы хотите добавить условную точку останова, щелкните правой кнопкой мыши на пустое пространство и выберите Add Conditional Breakpoint… и укажите условие. Если вы хотите отслеживать переменную, нужно добавить новую переменную и ввести имя переменной, которую нужно отслеживать. Если вы хотите изучить переменные, перейдите во вкладку Variables.
Заключение
В этом мануале для отладки приложения мы использовали Chrome и Visual Studio Code. Понимая, как работают эти инструменты, вы сможете выбрать рабочий процесс, который лучше всего подойдет для решения вашей проблемы.
Узнайте, как выполнять интерактивную отладку экспериментов, конвейеров и развертываний Машинного обучения Azure с помощью Visual Studio Code (VS Code) и debugpy.
Запуск и отладка экспериментов в локальной среде
Используйте расширение Машинное обучение Azure для проверки, запуска и отладки экспериментов машинного обучения перед их отправкой в облако.
Предварительные требования
Расширение Машинного обучения Azure для VS Code (предварительный просмотр). Дополнительные сведения см. в разделе Настройка расширения Машинного обучения Azure VS Code.
Расширение Машинного обучения Azure для VS Code по умолчанию использует CLI (версии 2.0). Инструкции в этом руководстве предполагают использование версии CLI 1.0. Чтобы переключиться на CLI версии 1.0, задайте для параметра azureML.CLI Compatibility Mode в Visual Studio Code значение 1.0 . дополнительные сведения об изменении параметров в Visual Studio Code см. в документации по параметрам пользователя и рабочей области.
Docker Desktop для Mac и Windows
Подсистема Docker для Linux.
Для Windows, хотя и не является обязательным, настоятельно рекомендуется использовать Docker с подсистемой Windows для Linux (WSL) 2.
Отладка эксперимента локально
Перед выполнением эксперимента локально убедитесь в том, что:
- DOCKER работает.
- azureML.CLI Compatibility Mode параметр в Visual Studio Code имеет значение 1.0 , как указано в предварительных требованиях
В VS Code откройте представление расширения Машинного обучения Azure.
Разверните узел подписки, содержащий рабочую область. Если у вас ее еще нет, можно создать рабочую область машинного обучения Azure с помощью расширения.
Разверните узел рабочей области.
Щелкните правой кнопкой мыши узел Эксперименты и выберите Создать эксперимент. При появлении запроса введите имя для эксперимента.
Разверните узел эксперименты, щелкните правой кнопкой мыши эксперимент, который необходимо запустить, и выберите команду Запустить эксперимент.
В списке параметров для запуска эксперимента выберите локально.
В первый раз используйте только в Windows. При появлении запроса на разрешение общей папки выберите Да. Включение файлового ресурса позволяет Docker подключать каталог, содержащий скрипт, к контейнеру. Кроме того, он позволяет Docker сохранять журналы и выходные данные из запуска во временном каталоге в системе.
Выберите Да для отладки эксперимента. В противном случае нажмите кнопку Нет. Если выбрать нет, ваш эксперимент будет выполняться локально без подключения к отладчику.
Выберите создать новую конфигурацию запуска, чтобы создать конфигурацию запуска. Конфигурация запуска определяет скрипт, который требуется запустить, зависимости и наборы данных. Кроме того, если у вас уже есть такая возможность, выберите ее в раскрывающемся списке.
После отправки эксперимента создается образ Docker, содержащий скрипт, и конфигурации, указанные в конфигурации запуска.
Когда начинается процесс сборки образа Docker, файловый поток 60_control_log.txt выводится в консоль вывода в VS Code.
Первое создание образа Docker может занять несколько минут.
После сборки образа появится запрос на запуск отладчика. Задайте точки останова в скрипте и нажмите кнопку запустить отладчик, когда будете готовы начать отладку. Это присоединяет отладчик VS Code к контейнеру, выполняющему эксперимент. Кроме того, в расширении Машинное обучение Azure наведите указатель мыши на узел для текущего запуска и щелкните значок воспроизведения, чтобы запустить отладчик.
Для одного эксперимента нельзя использовать несколько сеансов отладки. Однако можно выполнить отладку двух или более экспериментов, используя несколько экземпляров VS Code.
На этом этапе вы сможете пошагово отлаживать код с помощью VS Code.
Если вы хотите отменить запуск в любой момент, щелкните правой кнопкой мыши узел выполнить и выберите команду Отменить запуск.
Аналогично удаленному запуску эксперимента можно развернуть узел выполнения, чтобы проверить журналы и выходные данные.
Образы Docker, использующие те же зависимости, определенные в вашей среде, используются повторно между запусками. Однако при запуске эксперимента с помощью новой или другой среды создается новый образ. Так как эти образы сохраняются в локальном хранилище, рекомендуется удалить старые или неиспользуемые образы Docker. Чтобы удалить образы из системы, используйте Docker CLI или расширение VS Code Docker.
Отладка и устранение неполадок в конвейерах машинного обучения
В некоторых случаях может потребоваться интерактивная отладка кода Python, используемого в конвейере машинного обучения. С помощью VS Code и debugpy можно присоединяться к коду, как он выполняется в среде обучения.
Предварительные требования
Рабочая область машинного обучения Azure, настроенная для использования виртуальной сети Azure.
Конвейер машинного обучения Azure, использующий скрипты Python в рамках этапов конвейера. Например, PythonScriptStep.
Машинное обучение вычислительного кластера Azure, который находится в виртуальной сети и используется конвейером для обучения.
Среда разработки, которая находится в виртуальной сети. Средой разработки может быть одно из следующего:
- Виртуальная машина Azure в виртуальной сети
- Вычислительный экземпляр виртуальной машины записной книжки в виртуальной сети
- Клиентский компьютер, имеющий подключение к виртуальной сети по частной сети либо по VPN, либо через ExpressRoute.
Дополнительные сведения об использовании виртуальной сети Azure с Машинным обучением Azure см. в статье Общие сведения об изоляции и конфиденциальности виртуальной сети.
Хотя вы можете работать с ресурсами Машинного обучения Azure, которые не находятся за виртуальной сетью, рекомендуется использовать виртуальную сеть.
Принцип работы
Этапы конвейера машинного обучения запускают скрипты Python. Эти скрипты изменяются для выполнения следующих действий:
Регистрировать IP-адрес узла, на котором они выполняются. Используйте IP-адрес для подключения отладчика к сценарию.
Запустите компонент отладки debugpy и дождитесь подключения отладчика.
В среде разработки вы отслеживаете журналы, созданные процессом обучения, чтобы найти IP-адрес, на котором выполняется сценарий.
Вы указываете VS Code IP-адреса для подключения отладчика к с помощью launch.json файла.
Вы подключаете отладчик и интерактивно пройдите по сценарию.
Настройка скриптов Python
Чтобы включить отладку, внесите следующие изменения в скрипты Python, используемые шагами в конвейере ML:
Добавьте в файл следующие операторы импорта:
Добавьте следующие аргументы. Эти аргументы позволяют включить отладчик по мере необходимости и задать время ожидания для подключения отладчика:
Добавьте следующие операторы. Эти инструкции загружают текущий контекст выполнения, чтобы можно было зарегистрировать IP-адрес узла, на котором выполняется код:
Добавьте инструкцию if , запускающую debugpy, и дождитесь присоединения отладчика. Если отладчик не подключается до истечения времени ожидания, сценарий продолжится в нормальном режиме. Обязательно замените значения HOST и PORT в listen собственной функцией.
В следующем примере кода Python показан простой файл train.py , позволяющий выполнять отладку:
Настройка конвейера машинного обучения
Чтобы предоставить пакеты Python, необходимые для запуска debugpy и получения контекста выполнения, создайте среду и задайте pip_packages=['debugpy', 'azureml-sdk==<SDK-VERSION>'] . Измените версию пакета SDK, чтобы она соответствовала используемой. В следующем фрагменте кода показано, как создать кластер AKS:
В разделе Настройка скриптов Python в скрипты, используемые этапами конвейера машинного обучения, были добавлены новые аргументы. В следующем фрагменте кода показано, как использовать эти аргументы, чтобы включить отладку для компонента и установить время ожидания. Здесь также показано, как использовать созданную ранее среду, задав runconfig=run_config :
При выполнении конвейера каждый шаг создает дочерний запуск. Если включена отладка, то измененный сценарий записывает в журнал сведения, аналогичные следующему тексту в 70_driver_log.txt для дочернего запуска:
Сохраните значение ip_address . Они будут использоваться в следующем разделе.
Вы также можете найти IP-адрес из журналов выполнения для дочернего выполнения этого шага конвейера. Дополнительные сведения о просмотре этих сведений см. в статье мониторинг запусков и метрик эксперимента машинного обучения Azure.
Настройка среды разработки
Чтобы установить debugpy в среде разработки VS Code, используйте следующую команду:
Дополнительные сведения об использовании PTVSD в VS Code см. на этой странице.
Чтобы настроить VS Code для взаимодействия с вычислителем Машинного обучения Azure, в котором работает отладчик, создайте новую конфигурацию отладки:
В VS Code выберите меню Отладка, а затем щелкните Открыть конфигурации. Откроется файл с именем launch.json.
В файле launch.json найдите строку, содержащую "configurations": [ , и вставьте после нее следующий текст. Измените запись "host": "<IP-ADDRESS>" на IP-адрес, возвращенный в журналах из предыдущего раздела. Измените запись "localRoot": "$/code/step" на локальный каталог, содержащий копию отлаживаемого скрипта:
Если в разделе конфигурации уже есть другие записи, добавьте запятую (,) после вставленного кода.
Рекомендуется, особенно для конвейеров, размещать ресурсы для скриптов в отдельных каталогах, чтобы код был важен только для каждого из шагов. В этом примере пример значения localRoot ссылается на /code/step1 .
При отладке нескольких скриптов в разных каталогах создайте отдельный раздел конфигурации для каждого скрипта.
Сохраните файл launch.json.
Подключение отладчика
Откройте VS Code и откройте локальную копию скрипта.
Задайте точки останова, где сценарий должен останавливаться после присоединения.
На этом этапе VS Code подключается к PTVSD внутри контейнера Docker и останавливается при достижении точки останова, заданной ранее. Теперь вы можете пошагово выполнять код, просматривать переменные и т. д.
Устранение неполадок развертываний
В некоторых случаях может потребоваться интерактивная отладка кода Python, содержащегося в развертывании модели. Например, если начальный сценарий не работает и причину невозможно определить с помощью дополнительного ведения журнала. Используя VS Code и debugpy, вы можете присоединить отладчик к коду, выполняющемуся внутри контейнера Docker.
Сохраняйте время и перехватите ошибки раньше, отлаживать управляемые локальные конечные точки и развертывания локально. дополнительные сведения см. в разделе локальная отладка управляемых сетевых конечных точек в Visual Studio Code (предварительная версия).
Этот метод отладки не работает при использовании Model.deploy() и LocalWebservice.deploy_configuration для развертывания модели в локальной среде. В этом случае необходимо создать образ, используя метод Model.package().
Для локальных развертываний веб-службы требуется рабочая установка Docker в локальной системе. Дополнительные сведения об использовании Docker см. в соответствующей документации. Обратите внимание, что при работе с экземплярами вычислений Docker уже установлен.
Настройка среды разработки
Чтобы установить debugpy в локальной среде разработки VS Code, используйте следующую команду:
Дополнительные сведения об использовании PTVSD в VS Code см. на этой странице.
Чтобы настроить VS Code для взаимодействия с образом Docker, создайте новую конфигурацию отладки:
В VS Code выберите меню Отладка в области выполнения, а затем выберите Открыть конфигурации. Откроется файл с именем launch.json.
В файле launch.json найдите единицу "configurations" (строку, содержащую "configurations": [ ) и вставьте после нее следующий текст.
После вставки launch.js файл должен выглядеть следующим образом:
Если в разделе конфигурации уже есть другие записи, добавьте запятую ( , ) после вставленного кода.
Этот раздел присоединяется к контейнеру Docker через порт 5678.
Сохраните файл launch.json.
Создание образа, содержащего debugpy
Измените среду conda для своего развертывания, добавив в нее PTVSD. В следующем примере демонстрируется добавление с помощью параметра pip_packages :
Чтобы запустить debugpy и дождаться подключения при запуске службы, добавьте следующее в начало файла score.py :
Создайте образ на основе определения среды и извлеките его в локальный реестр.
В этом примере предполагается, что ws указывает на вашу рабочую область Машинное обучение Azure, а model представляет собой развертываемую модель. Файл myenv.yml содержит зависимости conda, созданные на шаге 1.
Чтобы упростить работу с изображением локально, можно использовать следующую команду, чтобы добавить тег для этого изображения. Замените myimagepath в следующей команде на значение местоположения из предыдущего шага.
На остальных шагах для обозначения расположения локального образа вы можете указывать debug:1 вместо значения полного пути.
Отладка службы
Если вы установили время ожидания для подключения debugpy в файле score.py , необходимо подключить VS Code к сеансу отладки до истечения этого времени. Запустите VS Code, откройте локальную копию score.py , установите точку останова и подготовьте ее к работе, прежде чем выполнять действия, описанные в этом разделе.
Дополнительные сведения об отладке и установке точек останова см. на этой странице.
Чтобы запустить контейнер Docker с помощью образа, используйте следующую команду:
Это присоединяет ваш score.py локально к объекту к контейнеру. Таким образом, любые изменения в редакторе автоматически отражаются в контейнере
Для лучшего удобства можно переходить к контейнеру с помощью нового интерфейса VS Code. Выберите Docker расширение на боковой панели VS Code, найдите созданный локальный контейнер в этой документации debug:1 . Щелкните этот контейнер правой кнопкой мыши и выберите "Attach Visual Studio Code" , затем автоматически откроется новый интерфейс VS Code, и этот интерфейс отобразится внутри созданного контейнера.
В контейнере выполните следующую команду в оболочке
После этого в оболочке в контейнере можно увидеть следующие выходные данные:
После нажатия зеленой стрелки и подключения отладчика в контейнере VS Code интерфейс можно увидеть некоторые новые сведения:
Кроме того, в основном интерфейсе VS Code доступны следующие возможности:
И теперь локальный объект, score.py присоединенный к контейнеру, уже остановлен в точках останова, где вы задали значение. На этом этапе VS Code подключается к PTVSD внутри контейнера Docker и останавливается при достижении точки останова, заданной ранее. Теперь вы можете пошагово выполнять код, просматривать переменные и т. д.
Дополнительные сведения об использовании VS Code для отладки Python см. на странице Отладка кода Python.
Остановка контейнера
Чтобы остановить контейнер, используйте следующую команду:
Дальнейшие действия
Теперь, когда вы настроили VS Code удаленно, вы можете использовать вычислительный экземпляр в качестве удаленного вычислений от 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 из одного проекта в другой).
Полный список конфигурационных опций можно найти здесь.
Использование отладчика
Теперь почти всё готово к работе. Следующий шаг заключается в использовании тестового проекта для того, чтобы проверить отладчик.
Запуск отладчика
Запустить отладчик можно, выполнив одно из следующих действий:
- Нажать F5 .
- Щёлкнуть по зелёной кнопке Play на панели отладки.
- Выбрать команду меню Debug → Start Debugger .
Панель инструментов, которая появляется при включении отладчика
Установка точки останова
Точки останова используются для того, чтобы сообщить отладчику о том, что ему нужно приостановить выполнение кода в определённом месте. Это позволяет программисту исследовать переменные, стек вызовов и вносить в код изменения в процессе выполнения приложения.
Установим точку останова в тестовом приложении. Откроем файл src/App.js и щёлкнем мышью по полю левее строки 11 . Тут должна появиться красная точка, которая указывает на то, что точка останова была добавлена. Вот, чтобы было понятно, анимированная версия этой инструкции:
Установка точки останова
Запуск сервера разработки
Запуск сервера
Сработавшая точка останова
Если у вас всё заработало — примите поздравления! Вы только что узнали о том, как настроить удалённую отладку в VS Code. Если вы хотите узнать подробности о самом процессе отладки в VS Code — почитайте это.
Непрерывное тестирование с помощью jest
Мне удобно, чтобы в процессе работы над кодом выполнялись модульные тесты. А именно, чтобы они вызывались всякий раз, когда я вношу изменения в программу. Благодаря create-react-app всё, что нужно для реализации такого сценария, настраивается автоматически. Для того, чтобы запустить jest , достаточно ввести в терминале команду npm test . Благодаря этому система будет наблюдать за файлами и автоматически запускать тесты при их сохранении. Выглядит это примерно так:
Непрерывное тестирование в VS Code
Итоги
В этом материале мы рассказали о том, как настроить взаимодействие VS Code и Chrome для организации удалённой отладки React-приложений. Надеемся, эта простая методика поможет сэкономить немного времени, если раньше вам приходилось постоянно переключаться между редактором, браузером и терминалом.
Отладка кода в Visual Studio происходит довольно просто, если сравнивать это т процесс с другими IDE. Плюс отладчик Visual Studio обладает довольно широкими возможностями и позволяет отлаживать различные технологии, а если имеющихся средств не хватает, то можно воспользоваться дополнениями.
Отладка кода — это один из самых важных процессов. Без отладки в свет не выходит ни одно нормальное приложение. Потому что , независимо от опыта разработчика, код не всегда работает так , как нужно. А иногда и вообще работает совершенно не так. Вот тут как раз и приходит на помощь отладчик, который позволит разобраться , что не так , и найти изъяны. Можно , конечно , много часов провести за самостоятельным выявлением багов, но отладчиком все-таки быстрее и проще.
В то же время отладка кода — это не волшебная палочка, которая быстренько найдет и исправит все недочеты вашего кода. Отладка — это процесс, при котором код пошагово выполняется в некой программе, например , в Visual Studio. В процессе выполнения идет поиск точек, где вы могли допустить ошибку. А вы в это время можете анализировать свой код и вносить необходимые правки для устранения «косяков».
Работа с отладчиком , даже с таким простым , как Visual Studio, требует определенных знаний и понимания , что там внутри происходит. Умение работать с отладчиком вам в любом случае пригодится, если вы хотите связать свою жизнь с разработкой ПО. В этой статье мы ознакомим вас с процессом отладки при помощи Visual Studio.
Отладка кода в Visual Studio
- орфографические ошибки или опечатки,
- неправильно подключенные API,
- неправильное размещение последних корректировок в код,
- и др.
- ошибка компиляции;
- ошибка преобразования типа;
- код не поддерживает синтаксис;
- и др .
Как запустить отладчик Visual Studio
- Запустить саму программу Visual Studio.
- Откр ыть код приложения, который необходимо отладить.
- Потом при помощи нажатия клавиши «F5» запустить режим отладки. Также это можно сделать через меню, если нажать «Отладка», а потом «Начать отладку» .
последовательность исполнения кода;
работу памяти;
значение переменных и др.
Какая информация выводится отладчиком Visual Studio
В заключение
Отладка в Visual Studio дает возможность довольно быстро решить проблемы с вашим кодом. Да, без определенных знаний и понимания запустить и понять отладчик Visual Studio будет нелегко, но с опытом все станет понятнее. В разработке без отладки кода — путь в никуда , п отому что стабильность работы приложения — это залог его качества. И если на самом старте разработк и игнорировать этот процесс, то нет смысла идти дальше.
Мы будем очень благодарны
если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.
Читайте также: