← Cloudflare Workers / workers / observability / dev-tools
Точки останова
Отладка через точки останова
При локальной разработке Worker с помощью Wrangler или Vite можно выполнять отладку через точки останова (breakpoints) в Worker. Точки останова позволяют посмотреть, что происходит в определенный момент выполнения Worker. Эта функциональность доступна как в DevTools, так и в VS Code.
Подробнее об отладке breakpoint через DevTools в Chrome см. в статья Chrome о точках останова ↗.
Отладочные терминалы VSCode
Использование встроенного в VSCode Отладочные терминалы JavaScript ↗, все, что нужно сделать, это открыть JS debug terminal (Cmd + Shift + P а затем введите javascript debug) и выполните wrangler dev (или vite dev) из терминала отладки. VSCode автоматически подключится к запущенному Worker (даже если у вас одновременно запущено несколько Workers!) и начнёт сеанс отладки.
Настройка VS Code для использования точек останова с launch.json файлы
Чтобы настроить VS Code для отладки с точками останова в проекте Worker:
- Создайте
.vscodeпапку в корневой папке вашего проекта, если её ещё нет. - Внутри этой папки создайте
launch.jsonфайл следующим содержимым:
{
"configurations": [
{
"name": "Wrangler",
"type": "node",
"request": "attach",
"port": 9229,
"cwd": "/",
"resolveSourceMapLocations": null,
"attachExistingChildren": false,
"autoAttachChildProcesses": false,
"sourceMaps": true // works with or without this line
}
]
}-
Откройте проект в VS Code, откройте новое окно терминала из VS Code и выполните
npx wrangler devчтобы запустить локальный сервер разработки. -
В верхней части Запуск и отладка панели должна появиться возможность выбрать конфигурацию. Выберите Wrangler, и нажмите на значок воспроизведения. Wrangler: Remote Process [0] должен появиться на панели Call Stack слева.
-
Вернуться к
.jsили.tsфайл в вашем проекте и добавьте хотя бы одну точку останова. -
Откройте браузер и перейдите по локальному URL-адресу Worker (по умолчанию
http://127.0.0.1:8787). Точка останова должна сработать, и вы сможете просмотреть подробности о коде в указанной строке.
Дополнительные материалы
- Локальная разработка - Разрабатывайте Workers и подключённые ресурсы локально с помощью Wrangler и
workerd↗, для быстрого и точного цикла обратной связи.