Skip to content

Changelog: Chrome devtools x Vite plugin #22606

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 30, 2025
Merged

Changelog: Chrome devtools x Vite plugin #22606

Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b02aed8
Changelog: Chrome devtools x Vite plugin
irvinebroque May 22, 2025
b1636d8
Apply suggestions from code review
irvinebroque May 30, 2025
f8075b1
Update src/content/changelog/workers/2025-05-21-vite-plugin-chrome-de…
irvinebroque May 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions src/content/changelog/workers/2025-05-21-vite-plugin-chrome-devtools.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-21T13: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/)

Loading