Skip to content

Commit 3d5fc4f

Browse files
irvinebroquesdnts
authored andcommitted
Changelog: Chrome devtools x Vite plugin (cloudflare#22606)
* Changelog: Chrome devtools x Vite plugin * Apply suggestions from code review * Update src/content/changelog/workers/2025-05-21-vite-plugin-chrome-devtools.mdx
1 parent ba909a2 commit 3d5fc4f

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
---
2+
title: Debug, profile, and view logs for your Worker in Chrome Devtools — now supported in the Cloudflare Vite plugin
3+
description: The Cloudflare Vite plugin now supports debugging Cloudflare Workers using Chrome Devtools
4+
products:
5+
- workers
6+
date: 2025-05-30T13:00:00Z
7+
---
8+
9+
import { Render, PackageManagers, TypeScriptExample } from "~/components";
10+
11+
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/).
12+
13+
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/).
14+
15+
When you run `vite`, you'll now see a debug URL in your console:
16+
17+
```
18+
VITE v6.3.5 ready in 461 ms
19+
20+
➜ Local: http://localhost:5173/
21+
➜ Network: use --host to expose
22+
➜ Debug: http://localhost:5173/__debug
23+
➜ press h + enter to show help
24+
```
25+
26+
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:
27+
28+
![CPU Profile](~/assets/images/workers/observability/profile.png)
29+
30+
For more information on how to get the most out of Chrome Devtools, refer to the following docs:
31+
32+
- [Debug code by setting breakpoints](/workers/observability/dev-tools/breakpoints/)
33+
- [Profile CPU usage](/workers/observability/dev-tools/cpu-usage/)
34+
- [Observe memory usage and debug memory leaks](/workers/observability/dev-tools/memory-usage/)
35+

0 commit comments

Comments
 (0)