Cloudflare Docs
Workers
Cloudflare Docs
Workers
GitHub icon
Visit Workers on GitHub
Set theme to dark (⇧+D)
  1. Products
  2. Workers
  3. Learning
  4. Playground

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 playground

​​ Hello 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:

  1. Log in to the Cloudflare dashboard and select your account.
  2. In Account Home, select Workers & Pages.
  3. In Overview, select your Worker > 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.