Усовершенствуйте рабочий процесс отладки React с помощью VS Code и отладки Chrome
В нашем последнем выпуске нашего Отладчика Chrome для VS Code мы внесли ряд улучшений в наш механизм сопоставления источников, который позволяет нам поддерживать редактирование и отладку в реальном времени прямо из коробки с помощью create-response-app. .
Это позволяет вам, как разработчику, писать и отлаживать код React, не выходя из редактора, и, что наиболее важно, позволяет вести непрерывный рабочий процесс разработки, при котором переключение контекста минимально, так как вам не нужно переключаться между инструментами.
Теперь вы можете писать код, устанавливать точки останова, вносить изменения в код и отлаживать только что измененный код - все из вашего редактора 🔥 🎉 🎈
Как начать за 6 шагов
- Загрузите последнюю версию VS Code и установите наш отладчик Chrome.
- Создайте свое приложение React с помощью create-react-app
- Используйте следующую конфигурацию для своего
launch.jsonfile, чтобы настроить отладчик VS Code и поместить его в.vscodeв корневой папке.
4. Запустите приложение React, запустив npm start в своем любимом терминале.
5. Начните отладку в VS Code, нажав F5или щелкнув зеленый значок отладки.
Удачной отладки! 🎉🎈
Подробности
Наш отладчик Chrome теперь поддерживает механизм горячей замены модуля Webpack, который отправляет изменения модуля в браузер, запустив локальный наблюдатель файлов.
Теперь наш отладчик может улавливать эти изменения и повторно применяет вновь созданную исходную карту HMR к загруженным исходным файлам на лету. Это обеспечивает возможность редактирования и отладки в реальном времени, без необходимости в дополнительных средствах отслеживания файлов или фоновых инструментах.
