diff --git a/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx b/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx new file mode 100644 index 000000000000000..bb213e96ad96df0 --- /dev/null +++ b/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx @@ -0,0 +1,11 @@ +--- +title: Workers now supports JavaScript debug terminals in VSCode, Cursor and Windsurf IDEs +description: Wrangler, the Cloudflare Vite plugin, and Miniflare now support breakpoint debugging via JavaScript debug terminals in VSCode +products: + - workers +date: 2025-07-04T01:00:00Z +--- + +Workers now support breakpoint debugging using VSCode's built-in [JavaScript Debug Terminals](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal). All you have to do is open a JS debug terminal (`Cmd + Shift + P` and then type `javascript debug`) and run `wrangler dev` (or `vite dev`) from within the debug terminal. VSCode will automatically connect to your running Worker (even if you're running multiple Workers at once!) and start a debugging session. + +In 2023 we announced [breakpoint debugging support](https://blog.cloudflare.com/debugging-cloudflare-workers/) for Workers, which meant that you could easily debug your Worker code in Wrangler's built-in devtools (accessible via the `[d]` hotkey) as well as multiple other devtools clients, [including VSCode](https://developers.cloudflare.com/workers/observability/dev-tools/breakpoints/). For most developers, breakpoint debugging via VSCode is the most natural flow, but until now it's required [manually configuring a `launch.json` file](https://developers.cloudflare.com/workers/observability/dev-tools/breakpoints/#setup-vs-code-to-use-breakpoints), running `wrangler dev`, and connecting via VSCode's built-in debugger. Now it's much more seamless! diff --git a/src/content/docs/workers/observability/dev-tools/breakpoints.mdx b/src/content/docs/workers/observability/dev-tools/breakpoints.mdx index f5d9bd4e2182067..947a266a57048ea 100644 --- a/src/content/docs/workers/observability/dev-tools/breakpoints.mdx +++ b/src/content/docs/workers/observability/dev-tools/breakpoints.mdx @@ -9,11 +9,15 @@ head: [] ## Debug via breakpoints -As of Wrangler 3.9.0, you can debug via breakpoints in your Worker. Breakpoints provide the ability to review what is happening at a given point in the execution of your Worker. Breakpoint functionality exists in both DevTools and VS Code. +When developing a Worker locally using Wrangler or Vite, you can debug via breakpoints in your Worker. Breakpoints provide the ability to review what is happening at a given point in the execution of your Worker. Breakpoint functionality exists in both DevTools and VS Code. For more information on breakpoint debugging via Chrome's DevTools, refer to [Chrome's article on breakpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints/). -### Setup VS Code to use breakpoints +### VSCode debug terminals + +Using VSCode's built-in [JavaScript Debug Terminals](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal), all you have to do is open a JS debug terminal (`Cmd + Shift + P` and then type `javascript debug`) and run `wrangler dev` (or `vite dev`) from within the debug terminal. VSCode will automatically connect to your running Worker (even if you're running multiple Workers at once!) and start a debugging session. + +### Setup VS Code to use breakpoints with `launch.json` files To setup VS Code for breakpoint debugging in your Worker project: @@ -22,19 +26,19 @@ To setup VS Code for breakpoint debugging in your Worker project: ```json { - "configurations": [ - { - "name": "Wrangler", - "type": "node", - "request": "attach", - "port": 9229, - "cwd": "/", - "resolveSourceMapLocations": null, - "attachExistingChildren": false, - "autoAttachChildProcesses": false, - "sourceMaps": true // works with or without this line - } - ] + "configurations": [ + { + "name": "Wrangler", + "type": "node", + "request": "attach", + "port": 9229, + "cwd": "/", + "resolveSourceMapLocations": null, + "attachExistingChildren": false, + "autoAttachChildProcesses": false, + "sourceMaps": true // works with or without this line + } + ] } ```