← Cloudflare Workers / workers / observability / dev-tools

Breakpointy

Při lokálním vývoji Workeru pomocí Wrangleru nebo Vite můžete ladit pomocí breakpointů ve svém Workeru. Breakpointy umožňují zjistit, co se děje v daném bodě průběhu Workeru. Funkce breakpointů je dostupná jak v DevTools, tak ve VS Code.

Více informací o ladění pomocí breakpointů v Chrome DevTools najdete v Článek Chrome o breakpointech ↗.

Pomocí vestavěného nástroje VSCode JavaScript Debug Terminals ↗, stačí otevřít JS Debug Terminal (Cmd + Shift + P a poté zadejte javascript debug) a spusťte wrangler dev (nebo vite dev) přímo z ladicího terminálu. VSCode se automaticky připojí k vašemu běžícímu Workeru (i když jich máte spuštěných najednou víc!) a spustí ladicí relaci.

Chcete-li nastavit VS Code pro ladění pomocí breakpointů v projektu Worker:

1. Vytvořte .vscode složku v kořenové složce projektu, pokud ještě neexistuje.
2. V této složce vytvořte launch.json soubor následujícím obsahem:

{
	"configurations": [
		{
			"name": "Wrangler",
			"type": "node",
			"request": "attach",
			"port": 9229,
			"cwd": "/",
			"resolveSourceMapLocations": null,
			"attachExistingChildren": false,
			"autoAttachChildProcesses": false,
			"sourceMaps": true // works with or without this line
		}
	]
}

3. Otevřete svůj projekt ve VS Code, otevřete nové okno terminálu z VS Code a spusťte npx wrangler dev pro spuštění lokálního vývojového serveru.

4. V horní části Spuštění a ladění panelu byste měli vidět možnost vybrat konfiguraci. Zvolte Wrangler, a vybrat ikonu přehrání. Wrangler: Remote Process [0] by se mělo zobrazit v panelu Call Stack vlevo.

5. Vraťte se zpět na .js nebo .ts soubor ve svém projektu a přidejte alespoň jeden breakpoint.

6. Otevřete prohlížeč a přejděte na lokální URL Workeru (výchozí http://127.0.0.1:8787). Breakpoint by měl být zasažen a měli byste si moci prohlédnout podrobnosti o kódu na uvedeném řádku.

• Lokální vývoj - Vyvíjejte své Workers a připojené prostředky lokálně pomocí Wrangler a workerd ↗, pro rychlou a přesnou zpětnou vazbu.