From b16a5d15e9513a678acab3030f3711d179158aa3 Mon Sep 17 00:00:00 2001 From: William Wong Date: Tue, 23 Dec 2025 18:51:14 +0000 Subject: [PATCH 1/2] Apply PR suggestions --- docs/DEBUGGING.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/DEBUGGING.md b/docs/DEBUGGING.md index c87ecd5ff1..780ce61e39 100644 --- a/docs/DEBUGGING.md +++ b/docs/DEBUGGING.md @@ -25,7 +25,7 @@ To break into the debugger for a specific element: 2. In the Elements pane, click on the element to break into 3. Switch to Console pane, type `$0.webChat.debugger` -Then, it should break into the debugger. +Then it should break into the debugger. ![Screenshot of DevTools debugger breaking into the root container component](media/DEBUGGING/devtools-debugger.png) @@ -35,7 +35,7 @@ Use DevTools Console `debug()` to attach a debugger to specific breakpoint funct | Component | Breakpoint | Arguments | Description | | -------------- | ------------------ | ------------------------ | ------------------------ | -| Root container | `incomingActivity` | `{ activity: Activity }` | When an activity arrive | +| Root container | `incomingActivity` | `{ activity: Activity }` | When an activity arrives | | Activity | `render` | | When the activity render | To break into the debugger when an activity arrives: @@ -43,9 +43,9 @@ To break into the debugger when an activity arrives: 1. Press F12 to open Chrome DevTools 2. In the Elements pane, click on the Web Chat root container to break into - Or type `inspect($('.webchat'))` to select the first root container on the page -3. Switch to Console pane, type `debug($0.webChat.breakpoint.incomingActivity)` +3. Switch to the Console pane, type `debug($0.webChat.breakpoint.incomingActivity)` -When an activity arrive, it will automatically break into the debugger. +When an activity arrives, it will automatically break into the debugger. When breakpoints are used, the debugger may offer extra diagnostic information relevant to the triggering event, available as function arguments. @@ -53,10 +53,10 @@ When breakpoints are used, the debugger may offer extra diagnostic information r While in the debugger, the `__DEBUG_CONTEXT__` variable contains various data useful for diagnostic purpose. -| Component | Debug context | Description | -| -------------- | ---------------------------- | -------------------------------- | -| Root container | `{ activities: Activity[] }` | All messages in the chat history | -| Activity | `{ activity: Activity }` | The current message | +| Component | Debug context | Description | +| -------------- | ---------------------------- | ---------------------------------- | +| Root container | `{ activities: Activity[] }` | All activities in the chat history | +| Activity | `{ activity: Activity }` | The current message | ## Recipes @@ -76,7 +76,7 @@ $$('article').at(-1).webChat.debugger; Note: `$$()` will select all elements and put them into an array, while `$()` only select the first occurrence. -### Break into debugger when an activity arrive +### Break into debugger when an activity arrives ```js debug($('.webchat').webChat.breakpoint.incomingActivity); From 4909253a491238dc8ab96f5431b946d6aae308ae Mon Sep 17 00:00:00 2001 From: William Wong Date: Tue, 23 Dec 2025 18:57:23 +0000 Subject: [PATCH 2/2] Update entry --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index bec8a14411..098ec7e605 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -143,7 +143,7 @@ Breaking changes in this release: - Added loading animation for `copilot`, and `fluent` variants - New JSON-LD graph backend, by [@compulim](https://github.com/compulim) in PR [#5622](https://github.com/microsoft/BotFramework-WebChat/pull/5622) - Cleanup, by [@compulim](https://github.com/compulim) in PR [#5657](https://github.com/microsoft/BotFramework-WebChat/pull/5657) -- New debug API, by [@compulim](https://github.com/compulim) in PR [#5663](https://github.com/microsoft/BotFramework-WebChat/pull/5663), see [`DEBUGGING.md`](docs/DEBUGGING.md) for more +- New debug API, by [@compulim](https://github.com/compulim) in PR [#5663](https://github.com/microsoft/BotFramework-WebChat/pull/5663) and PR [#5664](https://github.com/microsoft/BotFramework-WebChat/pull/5664), see [`DEBUGGING.md`](docs/DEBUGGING.md) for more - Debug into element: open F12, select the subject in Element pane, type `$0.webChat.debugger` - Breakpoint: open F12, select the subject in Element pane, type `$0.webChat.breakpoint.incomingActivity`