From af71818e6c34380c3387053d7ee9104f80f16366 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Fri, 4 Jul 2025 17:13:14 +0100 Subject: [PATCH 1/2] Add debug terminals changelog --- .../workers/2025-07-04-javascript-debug-terminals.mdx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx 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 00000000000000..c89112c0fd5cbf --- /dev/null +++ b/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx @@ -0,0 +1,11 @@ +--- +title: Support for JavaScript debug terminals in VSCode +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 +--- + +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, using VSCode's built-in [JavaScript Debug Terminals](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal), there are just two steps: open a JS debug terminal and run `wrangler dev` (or `vite dev`). VSCode will automatically connect to your running Worker (even if you're running multiple Workers at once!) and start a debugging session. From a32f04c0426d10fa64eb8f460464ca8d2a80d3c9 Mon Sep 17 00:00:00 2001 From: Samuel Macleod Date: Mon, 14 Jul 2025 18:06:13 +0100 Subject: [PATCH 2/2] Address comments --- .../2025-07-04-javascript-debug-terminals.mdx | 6 ++-- .../observability/dev-tools/breakpoints.mdx | 34 +++++++++++-------- 2 files changed, 22 insertions(+), 18 deletions(-) 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 index c89112c0fd5cbf..bb213e96ad96df 100644 --- a/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx +++ b/src/content/changelog/workers/2025-07-04-javascript-debug-terminals.mdx @@ -1,11 +1,11 @@ --- -title: Support for JavaScript debug terminals in VSCode +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 --- -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. +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. -Now, using VSCode's built-in [JavaScript Debug Terminals](https://code.visualstudio.com/docs/nodejs/nodejs-debugging#_javascript-debug-terminal), there are just two steps: open a JS debug terminal and run `wrangler dev` (or `vite dev`). 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 f5d9bd4e218206..947a266a57048e 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 + } + ] } ```