Playground
The quickest way to experiment with Cloudflare Workers is in the Playground. It does not require any setup. The Playground is a sandbox which gives an instant way to preview and test a Workers script directly in the browser against any site.
Launch playgroundHello world
When you arrive in the playground, you will see this default code:
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
return new Response('Hello world');
}
This is the least complex Worker you can write. When the Worker receives a request, the fetch event is dispatched.
RespondWith
intercepts the event, promising to return the result of the handleRequest function to the client. Finally, handleRequest is actually called, and it returns a text
response
of "Hello world" which is delivered back to the client.
Refer to the documentation for
addEventListener
and
FetchEvent
to learn more.
Beyond hello world
To get familiar with Workers, experiment with the Playground by borrowing Examples from the documentation. This will allow you to experience firsthand what Workers can do.
Using the Playground
There are two versions of the Playground available: the browser Playground and the dashboard Playground, also known as the previewer.
To access the dashboard Playground, log into your Cloudflare account and go to Account Home > Workers > your Worker script > Quick edit.
When you have code you are ready to test, select Save and Deploy to preview at the bottom of the script panel.
Now you should be able to see a preview on the right side of that exact code running just as it would in a browser. Enter your website’s address in the right section to preview the Workers script running on that site.
You can modify the script and click the preview button to view the effect on the request.
To test a raw HTTP request — not in an HTML previewer, for example, to test a POST request — go to HTTP. To run the HTTP preview, select Run Test.
Devtools
For debugging Workers inside the Playground, use the developer tools at the bottom of the Playground’s preview panel. The developer tools for the Workers Playground works similar to the developer tools in Chrome or Firefox.
Network tab
Network shows the outgoing requests from your Workers script — that is, any calls to fetch inside your script.
Console Logs
The console displays the output of any calls to console.log that were called for the current preview run as well as any other preview runs in that session.
Sources
Sources displays the sources that make up your Workers script. Note that access KV, text, and secret bindings are only accessible when authenticated with an account. This means you must be logged in to the dashboard, or use wrangler dev with your account credentials.