diff --git a/src/content/changelog/workers/2025-05-21-vite-plugin-chrome-devtools.mdx b/src/content/changelog/workers/2025-05-21-vite-plugin-chrome-devtools.mdx new file mode 100644 index 000000000000000..1daf583a0e45e2a --- /dev/null +++ b/src/content/changelog/workers/2025-05-21-vite-plugin-chrome-devtools.mdx @@ -0,0 +1,35 @@ +--- +title: Debug, profile, and view logs for your Worker in Chrome Devtools — now supported in the Cloudflare Vite plugin +description: The Cloudflare Vite plugin now supports debugging Cloudflare Workers using Chrome Devtools +products: + - workers +date: 2025-05-30T13:00:00Z +--- + +import { Render, PackageManagers, TypeScriptExample } from "~/components"; + +You can now [debug, profile, view logs, and analyze memory usage for your Worker](https://developers.cloudflare.com/workers/observability/dev-tools/) using [Chrome Devtools](https://developer.chrome.com/docs/devtools) when your Worker runs locally using the [Cloudflare Vite plugin](https://developers.cloudflare.com/workers/vite-plugin/). + +Previously, this was only possible if your Worker ran locally using the [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/), and now you can do all the same things if your Worker uses [Vite](https://vite.dev/). + +When you run `vite`, you'll now see a debug URL in your console: + +``` + VITE v6.3.5 ready in 461 ms + + ➜ Local: http://localhost:5173/ + ➜ Network: use --host to expose + ➜ Debug: http://localhost:5173/__debug + ➜ press h + enter to show help +``` + +Open the URL in Chrome, and an instance of Chrome Devtools will open and connect to your Worker running locally. You can then use Chrome Devtools to debug and introspect performance issues. For example, you can navigate to the Performance tab to understand where CPU time is spent in your Worker: + +![CPU Profile](~/assets/images/workers/observability/profile.png) + +For more information on how to get the most out of Chrome Devtools, refer to the following docs: + +- [Debug code by setting breakpoints](/workers/observability/dev-tools/breakpoints/) +- [Profile CPU usage](/workers/observability/dev-tools/cpu-usage/) +- [Observe memory usage and debug memory leaks](/workers/observability/dev-tools/memory-usage/) +