INTEGRITY Документация

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

Отладка через точки останова

При локальной разработке 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:

  1. Создайте .vscode папку в корневой папке вашего проекта, если её ещё нет.
  2. Внутри этой папки создайте 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
		}
	]
}
  1. Откройте проект в VS Code, откройте новое окно терминала из VS Code и выполните npx wrangler dev чтобы запустить локальный сервер разработки.

  2. В верхней части Запуск и отладка панели должна появиться возможность выбрать конфигурацию. Выберите Wrangler, и нажмите на значок воспроизведения. Wrangler: Remote Process [0] должен появиться на панели Call Stack слева.

  3. Вернуться к .js или .ts файл в вашем проекте и добавьте хотя бы одну точку останова.

  4. Откройте браузер и перейдите по локальному URL-адресу Worker (по умолчанию http://127.0.0.1:8787). Точка останова должна сработать, и вы сможете просмотреть подробности о коде в указанной строке.