From f93546c596afb7dc395832b3dc27a67d0e7d15c2 Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:30:57 -0700 Subject: [PATCH 1/8] Document the `Aspire.Hosting.Browsers` package on the browser logs page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The browser logs feature now ships as a standalone hosting package `Aspire.Hosting.Browsers`. The integration page didn't tell readers which package to install — it jumped straight from the introduction into a `WithBrowserLogs()` example, which left users guessing. - Add an 'Install the package' section with the standard `InstallPackage` component pointing at `Aspire.Hosting.Browsers`. - Update the code example titles from `AppHost/Program.cs` to `AppHost.cs` to match the Aspire 13.x convention. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../docs/integrations/devtools/browser-logs.mdx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 8fbb7df3b..fd2c3799e 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -3,6 +3,8 @@ title: Browser logs description: Learn how to capture and configure browser console logs in Aspire using the BrowserLogs resource. --- +import InstallPackage from '@components/InstallPackage.astro'; + The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource's console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. :::caution[Experimental API] @@ -14,11 +16,17 @@ The browser logs feature in Aspire lets you attach a tracked Chromium browser se - A Chromium-based browser (Microsoft Edge or Google Chrome) installed on the development machine. The tracked browser uses an Aspire-managed user data directory and never touches the user's normal browser profile. - A parent resource that exposes at least one HTTP or HTTPS endpoint. Any resource with endpoints is supported — projects, containers, executables, or any custom resource — not just projects. HTTPS endpoints are preferred over HTTP when selecting the target URL. +## Install the package + +The browser logs feature ships in the [📦 Aspire.Hosting.Browsers](https://www.nuget.org/packages/Aspire.Hosting.Browsers) hosting package. Install it in your AppHost project: + + + ## Add browser logs to a resource Call `WithBrowserLogs()` on any resource that exposes an HTTP or HTTPS endpoint: -```csharp title="AppHost/Program.cs" +```csharp title="AppHost.cs" #pragma warning disable ASPIREBROWSERLOGS001 var builder = DistributedApplication.CreateBuilder(args); @@ -43,7 +51,7 @@ The display names are the labels shown on the dashboard; the command IDs are the `WithBrowserLogs` accepts optional parameters to pin the browser, profile, or user data mode at design time: -```csharp +```csharp title="AppHost.cs" builder.AddProject("web") .WithBrowserLogs( browser: "msedge", From 03fb6bc44d5c1a0e77400fa20a33eefb55087cd9 Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:38:13 -0700 Subject: [PATCH 2/8] Add TypeScript AppHost samples to the browser logs page The Aspire TypeScript codegen now exposes `withBrowserLogs(options?)` on resources, mirroring the C# `WithBrowserLogs(...)` extension. Add TypeScript variants alongside the C# samples following the same `Tabs syncKey='aspire-lang'` pattern used on the PostgreSQL hosting page, and fix the `InstallPackage` prop name to match the component contract (`packageName`). Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../integrations/devtools/browser-logs.mdx | 45 ++++++++++++++++--- 1 file changed, 38 insertions(+), 7 deletions(-) diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index fd2c3799e..0a6bc5f9e 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -3,12 +3,13 @@ title: Browser logs description: Learn how to capture and configure browser console logs in Aspire using the BrowserLogs resource. --- +import { Tabs, TabItem } from '@astrojs/starlight/components'; import InstallPackage from '@components/InstallPackage.astro'; The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource's console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. :::caution[Experimental API] -`WithBrowserLogs` is an experimental API gated behind the `ASPIREBROWSERLOGS001` diagnostic ID. You must suppress this warning to use the API. +The browser logs API is experimental. In C#, `WithBrowserLogs` is gated behind the `ASPIREBROWSERLOGS001` diagnostic ID, which you must suppress to use the API. ::: ## Prerequisites @@ -20,13 +21,15 @@ The browser logs feature in Aspire lets you attach a tracked Chromium browser se The browser logs feature ships in the [📦 Aspire.Hosting.Browsers](https://www.nuget.org/packages/Aspire.Hosting.Browsers) hosting package. Install it in your AppHost project: - + ## Add browser logs to a resource -Call `WithBrowserLogs()` on any resource that exposes an HTTP or HTTPS endpoint: +Add browser logs to any resource that exposes an HTTP or HTTPS endpoint: -```csharp title="AppHost.cs" + + +```csharp title="C# — AppHost.cs" #pragma warning disable ASPIREBROWSERLOGS001 var builder = DistributedApplication.CreateBuilder(args); @@ -36,6 +39,20 @@ builder.AddProject("web") builder.Build().Run(); ``` + + +```typescript title="TypeScript — apphost.ts" +import { createBuilder } from './.modules/aspire.js'; + +const builder = await createBuilder(); + +const web = await builder.addProject("web", "../WebFrontend/WebFrontend.csproj"); +await web.withBrowserLogs(); + +await builder.build().run(); +``` + + This registers a child resource named `-browser-logs` (for the example above, `web-browser-logs`) of resource type `BrowserLogs` beneath the parent. The child resource appears in the Aspire dashboard and exposes the following commands: @@ -49,20 +66,34 @@ The display names are the labels shown on the dashboard; the command IDs are the ## Optional parameters -`WithBrowserLogs` accepts optional parameters to pin the browser, profile, or user data mode at design time: +Pin the browser, profile, or user data mode at design time: -```csharp title="AppHost.cs" + + +```csharp title="C# — AppHost.cs" builder.AddProject("web") .WithBrowserLogs( browser: "msedge", userDataMode: BrowserUserDataMode.Isolated); ``` + + +```typescript title="TypeScript — apphost.ts" +import { BrowserUserDataMode } from './.modules/aspire.js'; + +await web.withBrowserLogs({ + browser: "msedge", + userDataMode: BrowserUserDataMode.Isolated, +}); +``` + + | Parameter | Description | |---|---| | `browser` | Logical browser name (`"msedge"`, `"chrome"`) or an explicit executable path. Defaults to an installed Edge in `Shared` user data mode and an installed Chrome in `Isolated` user data mode, falling back to the other Chromium browser if the preferred one is missing, or to `"chrome"` if neither is detected. | | `profile` | Chromium profile name or directory name. Only valid when the effective user data mode is `Shared`. | -| `userDataMode` | `BrowserUserDataMode.Shared` (default) — a persistent user data directory shared across all AppHosts on the machine. `BrowserUserDataMode.Isolated` — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user's normal browser profile is never modified. | +| `userDataMode` | `Shared` (default) — a persistent user data directory shared across all AppHosts on the machine. `Isolated` — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user's normal browser profile is never modified. | ## Configure via app settings From f793f0676a089c1385d9b2b509825acb3446910c Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:39:51 -0700 Subject: [PATCH 3/8] Add TypeScript install path for the browser logs package Mirror the PostgreSQL installation pattern: wrap install in an `aspire-lang` Tabs block with a C# tab (CLI, file-based AppHost directive, PackageReference) and a TypeScript tab (CLI plus the `aspire.config.json` packages entry). The `InstallPackage` component only covers C# install methods, so it can't represent the TypeScript config workflow. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../integrations/devtools/browser-logs.mdx | 47 ++++++++++++++++++- 1 file changed, 45 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 0a6bc5f9e..313bf3d31 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -4,7 +4,7 @@ description: Learn how to capture and configure browser console logs in Aspire u --- import { Tabs, TabItem } from '@astrojs/starlight/components'; -import InstallPackage from '@components/InstallPackage.astro'; +import LearnMore from '@components/LearnMore.astro'; The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource's console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. @@ -21,7 +21,50 @@ The browser logs API is experimental. In C#, `WithBrowserLogs` is gated behind t The browser logs feature ships in the [📦 Aspire.Hosting.Browsers](https://www.nuget.org/packages/Aspire.Hosting.Browsers) hosting package. Install it in your AppHost project: - + + + +```bash title="Terminal" +aspire add browsers +``` + + + Learn more about [`aspire add`](/reference/cli/commands/aspire-add/) in the command reference. + + +Or, choose a manual installation approach: + +```csharp title="C# — AppHost.cs" +#:package Aspire.Hosting.Browsers@* +``` + +```xml title="XML — AppHost.csproj" + +``` + + + + +```bash title="Terminal" +aspire add browsers +``` + + + Learn more about [`aspire add`](/reference/cli/commands/aspire-add/) in the command reference. + + +This updates your `aspire.config.json` with the browser logs hosting integration package: + +```json title="aspire.config.json" ins={3} +{ + "packages": { + "Aspire.Hosting.Browsers": "13.3.0" + } +} +``` + + + ## Add browser logs to a resource From ab92bb408f4694726ff8932032cc621f8a4e842d Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:41:28 -0700 Subject: [PATCH 4/8] Use AddViteApp in browser logs samples Browser logs apply to any HTTP/HTTPS resource, but a Vite frontend makes the example more concrete (and matches a common scenario where console output is what readers want to see). Use `AddViteApp` / `addViteApp` in both code blocks. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../src/content/docs/integrations/devtools/browser-logs.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 313bf3d31..0b89bf8c9 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -77,7 +77,7 @@ Add browser logs to any resource that exposes an HTTP or HTTPS endpoint: var builder = DistributedApplication.CreateBuilder(args); -builder.AddProject("web") +builder.AddViteApp("web", "../web") .WithBrowserLogs(); builder.Build().Run(); @@ -89,7 +89,7 @@ import { createBuilder } from './.modules/aspire.js'; const builder = await createBuilder(); -const web = await builder.addProject("web", "../WebFrontend/WebFrontend.csproj"); +const web = await builder.addViteApp("web", "../web"); await web.withBrowserLogs(); await builder.build().run(); @@ -114,7 +114,7 @@ Pin the browser, profile, or user data mode at design time: ```csharp title="C# — AppHost.cs" -builder.AddProject("web") +builder.AddViteApp("web", "../web") .WithBrowserLogs( browser: "msedge", userDataMode: BrowserUserDataMode.Isolated); From 05f77f733f8a63110b77dae492f721fdc8816608 Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:58:22 -0700 Subject: [PATCH 5/8] Refine browser logs page after doc-tester pass - Lead with 'any browseable resource' framing and call out that Vite is just an example. Add a pointer to Aspire.Hosting.JavaScript so readers know AddViteApp lives in a different package. - Annotate the '../web' path so copy-pasters know what directory the example expects. - Chain the TypeScript fluent API directly off addViteApp(...) instead of splitting through an intermediate const, matching the rest of the TS code samples in the page. - Link 'aspire secret set' to its CLI reference and clarify what follow-up clicks of 'Save to user secrets' do. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../page-2026-05-01T06-52-36-437Z.yml | 786 ++++++++++++++++++ .../integrations/devtools/browser-logs.mdx | 19 +- 2 files changed, 797 insertions(+), 8 deletions(-) create mode 100644 .playwright-mcp/page-2026-05-01T06-52-36-437Z.yml diff --git a/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml b/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml new file mode 100644 index 000000000..785a87cff --- /dev/null +++ b/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml @@ -0,0 +1,786 @@ +- generic [ref=e1]: + - link "Skip to content" [ref=e2] [cursor=pointer]: + - /url: "#_top" + - generic [ref=e3]: + - banner [ref=e4]: + - generic [ref=e5]: + - link "Aspire" [ref=e7] [cursor=pointer]: + - /url: / + - generic [ref=e8]: Aspire + - button "Search" [ref=e11] [cursor=pointer]: + - img [ref=e12] + - generic [ref=e14]: Search + - generic [ref=e15]: + - generic [ref=e16]: ⌘ + - generic [ref=e17]: K + - generic [ref=e18]: + - button "Open cookie preferences dialog" [ref=e19] [cursor=pointer]: + - generic [ref=e20]: Cookie Preferences + - img [ref=e21] + - button "Open install Aspire CLI dialog" [ref=e23] [cursor=pointer]: + - generic [ref=e24]: Install Aspire CLI + - img [ref=e25] + - link "Docs" [ref=e27] [cursor=pointer]: + - /url: /docs/ + - link "Try Aspire" [ref=e28] [cursor=pointer]: + - /url: /get-started/first-app/ + - navigation "Main": + - generic [ref=e31]: + - generic [ref=e32]: + - generic [ref=e33]: + - generic [ref=e35]: + - img + - generic [ref=e36]: Filter sidebar + - textbox "Filter sidebar entries" [active] [ref=e37]: + - /placeholder: Filter sidebar… + - button "Collapse sidebar" [ref=e39] [cursor=pointer]: + - img [ref=e40] + - button "Integrations" [ref=e44] [cursor=pointer]: + - img [ref=e46] + - generic [ref=e49]: Integrations + - img [ref=e50] + - list [ref=e53]: + - listitem [ref=e54]: + - group [ref=e55]: + - generic "Aspire integrations" [ref=e56] [cursor=pointer]: + - generic [ref=e57]: Aspire integrations + - img [ref=e58] + - list [ref=e60]: + - listitem [ref=e61]: + - link "Overview" [ref=e62] [cursor=pointer]: + - /url: /integrations/ + - listitem [ref=e63]: + - link "What are Aspire integrations?" [ref=e64] [cursor=pointer]: + - /url: /integrations/overview/ + - listitem [ref=e65]: + - link "Explore integration gallery" [ref=e66] [cursor=pointer]: + - /url: /integrations/gallery/ + - listitem [ref=e67]: + - group [ref=e68]: + - generic "Artificial Intelligence (AI)" [ref=e69] [cursor=pointer]: + - generic [ref=e70]: Artificial Intelligence (AI) + - img [ref=e71] + - listitem [ref=e73]: + - group [ref=e74]: + - generic "Custom integrations" [ref=e75] [cursor=pointer]: + - generic [ref=e76]: Custom integrations + - img [ref=e77] + - listitem [ref=e79]: + - group [ref=e80]: + - generic "Cloud providers" [ref=e81] [cursor=pointer]: + - generic [ref=e82]: Cloud providers + - img [ref=e83] + - listitem [ref=e85]: + - group [ref=e86]: + - generic "Caching & state" [ref=e87] [cursor=pointer]: + - generic [ref=e88]: Caching & state + - img [ref=e89] + - listitem [ref=e91]: + - group [ref=e92]: + - generic "Compute & hosting" [ref=e93] [cursor=pointer]: + - generic [ref=e94]: Compute & hosting + - img [ref=e95] + - listitem [ref=e97]: + - group [ref=e98]: + - generic "Data & databases" [ref=e99] [cursor=pointer]: + - generic [ref=e100]: Data & databases + - img [ref=e101] + - listitem [ref=e103]: + - group [ref=e104]: + - generic "Frameworks & runtimes" [ref=e105] [cursor=pointer]: + - generic [ref=e106]: Frameworks & runtimes + - img [ref=e107] + - listitem [ref=e109]: + - group [ref=e110]: + - generic "Messaging & eventing" [ref=e111] [cursor=pointer]: + - generic [ref=e112]: Messaging & eventing + - img [ref=e113] + - listitem [ref=e115]: + - group [ref=e116]: + - generic "Security & identity" [ref=e117] [cursor=pointer]: + - generic [ref=e118]: Security & identity + - img [ref=e119] + - listitem [ref=e121]: + - group [ref=e122]: + - generic "Observability & logging" [ref=e123] [cursor=pointer]: + - generic [ref=e124]: Observability & logging + - img [ref=e125] + - listitem [ref=e127]: + - group [ref=e128]: + - generic "Reverse proxies & APIs" [ref=e129] [cursor=pointer]: + - generic [ref=e130]: Reverse proxies & APIs + - img [ref=e131] + - listitem [ref=e133]: + - group [ref=e134]: + - generic "Dev tools & extensions" [ref=e135] [cursor=pointer]: + - generic [ref=e136]: Dev tools & extensions + - img [ref=e137] + - list [ref=e139]: + - listitem [ref=e140]: + - link "Browser logs" [ref=e141] [cursor=pointer]: + - /url: /integrations/devtools/browser-logs/ + - listitem [ref=e142]: + - link "Data API Builder" [ref=e143] [cursor=pointer]: + - /url: /integrations/devtools/dab/ + - listitem [ref=e144]: + - link "Dev Tunnels" [ref=e145] [cursor=pointer]: + - /url: /integrations/devtools/dev-tunnels/ + - listitem [ref=e146]: + - group [ref=e147]: + - generic "flagd" [ref=e148] [cursor=pointer]: + - generic [ref=e149]: flagd + - img [ref=e150] + - listitem [ref=e152]: + - group [ref=e153]: + - generic "goff" [ref=e154] [cursor=pointer]: + - generic [ref=e155]: goff + - img [ref=e156] + - listitem [ref=e158]: + - link "k6" [ref=e159] [cursor=pointer]: + - /url: /integrations/devtools/k6/ + - listitem [ref=e160]: + - group [ref=e161]: + - generic "MailPit" [ref=e162] [cursor=pointer]: + - generic [ref=e163]: MailPit + - img [ref=e164] + - listitem [ref=e166]: + - link "SQL Database Projects" [ref=e167] [cursor=pointer]: + - /url: /integrations/devtools/sql-projects/ + - link "aspire.dev" [ref=e169] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire.dev + - img [ref=e170] + - text: aspire.dev + - generic [ref=e173]: + - complementary [ref=e174]: + - generic [ref=e175]: + - navigation "On this page Overview" [ref=e176]: + - group [ref=e177]: + - generic "On this page Overview" [ref=e178]: + - generic [ref=e179] [cursor=pointer]: + - text: On this page + - img [ref=e180] + - generic [ref=e182]: Overview + - navigation "On this page" [ref=e186]: + - heading "On this page" [level=2] [ref=e187] + - list [ref=e188]: + - listitem [ref=e189]: + - link "Overview" [ref=e190] [cursor=pointer]: + - /url: "#_top" + - listitem [ref=e191]: + - link "Prerequisites" [ref=e192] [cursor=pointer]: + - /url: "#prerequisites" + - listitem [ref=e193]: + - link "Install the package" [ref=e194] [cursor=pointer]: + - /url: "#install-the-package" + - listitem [ref=e195]: + - link "Add browser logs to a resource" [ref=e196] [cursor=pointer]: + - /url: "#add-browser-logs-to-a-resource" + - listitem [ref=e197]: + - link "Optional parameters" [ref=e198] [cursor=pointer]: + - /url: "#optional-parameters" + - listitem [ref=e199]: + - link "Configure via app settings" [ref=e200] [cursor=pointer]: + - /url: "#configure-via-app-settings" + - listitem [ref=e201]: + - link "Configure browser logs" [ref=e202] [cursor=pointer]: + - /url: "#configure-browser-logs" + - listitem [ref=e203]: + - link "Browser sessions, tabs, and process sharing" [ref=e204] [cursor=pointer]: + - /url: "#browser-sessions-tabs-and-process-sharing" + - listitem [ref=e205]: + - link "How browser logs are captured" [ref=e206] [cursor=pointer]: + - /url: "#how-browser-logs-are-captured" + - listitem [ref=e207]: + - link "See also" [ref=e208] [cursor=pointer]: + - /url: "#see-also" + - main [ref=e210]: + - generic [ref=e212]: + - heading "Browser logs" [level=1] [ref=e213] + - generic [ref=e214]: + - button "Copy Markdown" [ref=e215] [cursor=pointer]: + - img [ref=e216] + - generic [ref=e218]: Copy Markdown + - generic [ref=e219]: + - button "Open" [ref=e221] [cursor=pointer]: + - generic [ref=e222]: Open + - img [ref=e223] + - button "Share" [ref=e226] [cursor=pointer]: + - generic [ref=e227]: Share + - img [ref=e228] + - generic [ref=e231]: + - navigation "Breadcrumb" [ref=e232]: + - generic [ref=e233]: + - link "Integrations" [ref=e234] [cursor=pointer]: + - /url: /integrations/ + - img [ref=e235] + - text: Integrations + - generic [ref=e237]: / + - generic [ref=e238]: Dev tools & extensions + - generic [ref=e239]: / + - generic [ref=e240]: Browser logs + - generic [ref=e241]: + - paragraph [ref=e242]: The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource’s console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. + - complementary "Experimental API" [ref=e243]: + - paragraph [ref=e244]: + - img [ref=e245] + - text: Experimental API + - paragraph [ref=e248]: + - text: The browser logs API is experimental. In C#, + - code [ref=e249]: WithBrowserLogs + - text: is gated behind the + - code [ref=e250]: ASPIREBROWSERLOGS001 + - text: diagnostic ID, which you must suppress to use the API. + - generic [ref=e251]: + - heading "Prerequisites" [level=2] [ref=e252] + - link "Section titled “Prerequisites”" [ref=e253] [cursor=pointer]: + - /url: "#prerequisites" + - img [ref=e255] + - generic [ref=e257]: Section titled “Prerequisites” + - list [ref=e258]: + - listitem [ref=e259]: A Chromium-based browser (Microsoft Edge or Google Chrome) installed on the development machine. The tracked browser uses an Aspire-managed user data directory and never touches the user’s normal browser profile. + - listitem [ref=e260]: A parent resource that exposes at least one HTTP or HTTPS endpoint. Any resource with endpoints is supported — projects, containers, executables, or any custom resource — not just projects. HTTPS endpoints are preferred over HTTP when selecting the target URL. + - generic [ref=e261]: + - heading "Install the package" [level=2] [ref=e262] + - link "Section titled “Install the package”" [ref=e263] [cursor=pointer]: + - /url: "#install-the-package" + - img [ref=e265] + - generic [ref=e267]: Section titled “Install the package” + - paragraph [ref=e268]: + - text: The browser logs feature ships in the + - link "📦 Aspire.Hosting.Browsers" [ref=e269] [cursor=pointer]: + - /url: https://www.nuget.org/packages/Aspire.Hosting.Browsers + - text: "hosting package. Install it in your AppHost project:" + - generic [ref=e270]: + - tablist [ref=e272]: + - tab "C#" [selected] [ref=e273] [cursor=pointer] + - tab "TypeScript" [ref=e274] [cursor=pointer] + - tabpanel "C#" [ref=e275]: + - figure "Terminal" [ref=e277]: + - generic [ref=e279]: Terminal + - generic "Terminal in Install the package (1 of 2)" [ref=e280]: + - code [ref=e281]: + - generic [ref=e283]: aspire add browsers + - button "Copied aspire add browsers to clipboard" [ref=e285] [cursor=pointer] + - generic [ref=e287]: + - img [ref=e288] + - paragraph [ref=e291]: + - text: Learn more about + - link "aspire add" [ref=e292] [cursor=pointer]: + - /url: /reference/cli/commands/aspire-add/ + - code [ref=e293]: aspire add + - text: in the command reference. + - paragraph [ref=e294]: "Or, choose a manual installation approach:" + - figure "C# — AppHost.cs" [ref=e296]: + - generic [ref=e298]: C# — AppHost.cs + - generic "C# — AppHost.cs in Install the package" [ref=e299]: + - code [ref=e300]: + - generic [ref=e302]: + - text: "#:package" + - generic [ref=e303]: Aspire.Hosting.Browsers@ + - text: "*" + - 'button "Copied #:package Aspire.Hosting.Browsers@* to clipboard" [ref=e305] [cursor=pointer]' + - figure "XML — AppHost.csproj" [ref=e308]: + - generic [ref=e310]: XML — AppHost.csproj + - generic "XML — AppHost.csproj in Install the package" [ref=e311]: + - code [ref=e312]: + - generic [ref=e314]: + - text: + - button "Copied to clipboard" [ref=e319] [cursor=pointer] + - text: + + - generic [ref=e321]: + - heading "Add browser logs to a resource" [level=2] [ref=e322] + - link "Section titled “Add browser logs to a resource”" [ref=e323] [cursor=pointer]: + - /url: "#add-browser-logs-to-a-resource" + - img [ref=e325] + - generic [ref=e327]: Section titled “Add browser logs to a resource” + - paragraph [ref=e328]: "Add browser logs to any resource that exposes an HTTP or HTTPS endpoint:" + - generic [ref=e329]: + - tablist [ref=e331]: + - tab "C#" [selected] [ref=e332] [cursor=pointer] + - tab "TypeScript" [ref=e333] [cursor=pointer] + - tabpanel "C#" [ref=e334]: + - figure "C# — AppHost.cs" [ref=e336]: + - generic [ref=e338]: C# — AppHost.cs + - generic "C# — AppHost.cs in Add browser logs to a resource" [ref=e339]: + - code [ref=e340]: + - generic [ref=e342]: "#pragma warning disable ASPIREBROWSERLOGS001" + - generic [ref=e346]: var builder = DistributedApplication.CreateBuilder(args); + - generic [ref=e350]: + - text: builder.AddViteApp( + - generic [ref=e351]: "\"web\"" + - generic [ref=e352]: "," + - generic [ref=e353]: "\"../web\"" + - text: ) + - generic [ref=e355]: .WithBrowserLogs(); + - generic [ref=e360]: + - text: builder.Build + - generic [ref=e361]: (). + - text: Run(); + - 'button "Copied #pragma warning disable ASPIREBROWSERLOGS001var builder = DistributedApplication.CreateBuilder(args);builder.AddViteApp(\"web\", \"../web\") .WithBrowserLogs();builder.Build().Run(); to clipboard" [ref=e363] [cursor=pointer]' + - paragraph [ref=e365]: + - text: This registers a child resource named + - code [ref=e366]: -browser-logs + - text: (for the example above, + - code [ref=e367]: web-browser-logs + - text: ) of resource type + - code [ref=e368]: BrowserLogs + - text: "beneath the parent. The child resource appears in the Aspire dashboard and exposes the following commands:" + - table [ref=e369]: + - rowgroup [ref=e370]: + - row "Display name Command ID Description" [ref=e371]: + - columnheader "Display name" [ref=e372] + - columnheader "Command ID" [ref=e373] + - columnheader "Description" [ref=e374] + - rowgroup [ref=e375]: + - row "Open tracked browser open-tracked-browser Launches a Chromium browser attached to the resource’s primary URL. Console output streams to the resource’s log view." [ref=e376]: + - cell "Open tracked browser" [ref=e377]: + - strong [ref=e378]: Open tracked browser + - cell "open-tracked-browser" [ref=e379]: + - code [ref=e380]: open-tracked-browser + - cell "Launches a Chromium browser attached to the resource’s primary URL. Console output streams to the resource’s log view." [ref=e381] + - row "Configure tracked browser configure-tracked-browser Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see Configure browser logs)." [ref=e382]: + - cell "Configure tracked browser" [ref=e383]: + - strong [ref=e384]: Configure tracked browser + - cell "configure-tracked-browser" [ref=e385]: + - code [ref=e386]: configure-tracked-browser + - cell "Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see Configure browser logs)." [ref=e387]: + - text: Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see + - link "Configure browser logs" [ref=e388] [cursor=pointer]: + - /url: "#configure-browser-logs" + - text: ). + - row "Capture screenshot capture-screenshot Captures a screenshot of the active browser session and attaches it as a command artifact." [ref=e389]: + - cell "Capture screenshot" [ref=e390]: + - strong [ref=e391]: Capture screenshot + - cell "capture-screenshot" [ref=e392]: + - code [ref=e393]: capture-screenshot + - cell "Captures a screenshot of the active browser session and attaches it as a command artifact." [ref=e394] + - paragraph [ref=e395]: The display names are the labels shown on the dashboard; the command IDs are the stable identifiers used when invoking commands programmatically. + - generic [ref=e396]: + - heading "Optional parameters" [level=2] [ref=e397] + - link "Section titled “Optional parameters”" [ref=e398] [cursor=pointer]: + - /url: "#optional-parameters" + - img [ref=e400] + - generic [ref=e402]: Section titled “Optional parameters” + - paragraph [ref=e403]: "Pin the browser, profile, or user data mode at design time:" + - generic [ref=e404]: + - tablist [ref=e406]: + - tab "C#" [selected] [ref=e407] [cursor=pointer] + - tab "TypeScript" [ref=e408] [cursor=pointer] + - tabpanel "C#" [ref=e409]: + - figure "C# — AppHost.cs" [ref=e411]: + - generic [ref=e413]: C# — AppHost.cs + - generic "C# — AppHost.cs in Optional parameters" [ref=e414]: + - code [ref=e415]: + - generic [ref=e417]: + - text: builder.AddViteApp( + - generic [ref=e418]: "\"web\"" + - generic [ref=e419]: "," + - generic [ref=e420]: "\"../web\"" + - text: ) + - generic [ref=e422]: .WithBrowserLogs( + - generic [ref=e425]: + - text: "browser:" + - generic [ref=e427]: "\"msedge\"" + - text: "," + - generic [ref=e429]: "userDataMode: BrowserUserDataMode.Isolated);" + - 'button "Copied builder.AddViteApp(\"web\", \"../web\") .WithBrowserLogs( browser: \"msedge\", userDataMode: BrowserUserDataMode.Isolated); to clipboard" [ref=e432] [cursor=pointer]' + - table [ref=e434]: + - rowgroup [ref=e435]: + - row "Parameter Description" [ref=e436]: + - columnheader "Parameter" [ref=e437] + - columnheader "Description" [ref=e438] + - rowgroup [ref=e439]: + - row "browser Logical browser name (\"msedge\", \"chrome\") or an explicit executable path. Defaults to an installed Edge in Shared user data mode and an installed Chrome in Isolated user data mode, falling back to the other Chromium browser if the preferred one is missing, or to \"chrome\" if neither is detected." [ref=e440]: + - cell "browser" [ref=e441]: + - code [ref=e442]: browser + - cell "Logical browser name (\"msedge\", \"chrome\") or an explicit executable path. Defaults to an installed Edge in Shared user data mode and an installed Chrome in Isolated user data mode, falling back to the other Chromium browser if the preferred one is missing, or to \"chrome\" if neither is detected." [ref=e443]: + - text: Logical browser name ( + - code [ref=e444]: "\"msedge\"" + - text: "," + - code [ref=e445]: "\"chrome\"" + - text: ) or an explicit executable path. Defaults to an installed Edge in + - code [ref=e446]: Shared + - text: user data mode and an installed Chrome in + - code [ref=e447]: Isolated + - text: user data mode, falling back to the other Chromium browser if the preferred one is missing, or to + - code [ref=e448]: "\"chrome\"" + - text: if neither is detected. + - row "profile Chromium profile name or directory name. Only valid when the effective user data mode is Shared." [ref=e449]: + - cell "profile" [ref=e450]: + - code [ref=e451]: profile + - cell "Chromium profile name or directory name. Only valid when the effective user data mode is Shared." [ref=e452]: + - text: Chromium profile name or directory name. Only valid when the effective user data mode is + - code [ref=e453]: Shared + - text: . + - row "userDataMode Shared (default) — a persistent user data directory shared across all AppHosts on the machine. Isolated — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified." [ref=e454]: + - cell "userDataMode" [ref=e455]: + - code [ref=e456]: userDataMode + - cell "Shared (default) — a persistent user data directory shared across all AppHosts on the machine. Isolated — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified." [ref=e457]: + - code [ref=e458]: Shared + - text: (default) — a persistent user data directory shared across all AppHosts on the machine. + - code [ref=e459]: Isolated + - text: — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified. + - generic [ref=e460]: + - heading "Configure via app settings" [level=2] [ref=e461] + - link "Section titled “Configure via app settings”" [ref=e462] [cursor=pointer]: + - /url: "#configure-via-app-settings" + - img [ref=e464] + - generic [ref=e466]: Section titled “Configure via app settings” + - paragraph [ref=e467]: + - text: Browser, profile, and user data mode can be supplied from configuration instead of code. Use these keys in + - emphasis [ref=e468]: appsettings.json + - text: "or environment variables:" + - table [ref=e469]: + - rowgroup [ref=e470]: + - row "Scope Configuration key Accepted values" [ref=e471]: + - columnheader "Scope" [ref=e472] + - columnheader "Configuration key" [ref=e473] + - columnheader "Accepted values" [ref=e474] + - rowgroup [ref=e475]: + - row "Global (all resources) Aspire:Hosting:BrowserLogs:Browser Logical name (msedge, chrome) or executable path" [ref=e476]: + - cell "Global (all resources)" [ref=e477] + - cell "Aspire:Hosting:BrowserLogs:Browser" [ref=e478]: + - code [ref=e479]: Aspire:Hosting:BrowserLogs:Browser + - cell "Logical name (msedge, chrome) or executable path" [ref=e480]: + - text: Logical name ( + - code [ref=e481]: msedge + - text: "," + - code [ref=e482]: chrome + - text: ) or executable path + - row "Global Aspire:Hosting:BrowserLogs:Profile Chromium profile name or directory name" [ref=e483]: + - cell "Global" [ref=e484] + - cell "Aspire:Hosting:BrowserLogs:Profile" [ref=e485]: + - code [ref=e486]: Aspire:Hosting:BrowserLogs:Profile + - cell "Chromium profile name or directory name" [ref=e487] + - row "Global Aspire:Hosting:BrowserLogs:UserDataMode Shared or Isolated (case-insensitive)" [ref=e488]: + - cell "Global" [ref=e489] + - cell "Aspire:Hosting:BrowserLogs:UserDataMode" [ref=e490]: + - code [ref=e491]: Aspire:Hosting:BrowserLogs:UserDataMode + - cell "Shared or Isolated (case-insensitive)" [ref=e492]: + - code [ref=e493]: Shared + - text: or + - code [ref=e494]: Isolated + - text: (case-insensitive) + - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:Browser Same as global Browser" [ref=e495]': + - cell "Per-resource" [ref=e496] + - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:Browser" [ref=e497]': + - code [ref=e498]: "Aspire:Hosting:BrowserLogs:{ResourceName}:Browser" + - cell "Same as global Browser" [ref=e499]: + - text: Same as global + - code [ref=e500]: Browser + - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:Profile Same as global Profile" [ref=e501]': + - cell "Per-resource" [ref=e502] + - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:Profile" [ref=e503]': + - code [ref=e504]: "Aspire:Hosting:BrowserLogs:{ResourceName}:Profile" + - cell "Same as global Profile" [ref=e505]: + - text: Same as global + - code [ref=e506]: Profile + - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode Same as global UserDataMode" [ref=e507]': + - cell "Per-resource" [ref=e508] + - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode" [ref=e509]': + - code [ref=e510]: "Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode" + - cell "Same as global UserDataMode" [ref=e511]: + - text: Same as global + - code [ref=e512]: UserDataMode + - paragraph [ref=e513]: + - text: Explicit method arguments to + - code [ref=e514]: WithBrowserLogs + - text: take precedence over configuration. Per-resource keys take precedence over global keys. + - generic [ref=e515]: + - heading "Configure browser logs" [level=2] [ref=e516] + - link "Section titled “Configure browser logs”" [ref=e517] [cursor=pointer]: + - /url: "#configure-browser-logs" + - img [ref=e519] + - generic [ref=e521]: Section titled “Configure browser logs” + - paragraph [ref=e522]: + - text: The + - strong [ref=e523]: Configure tracked browser + - text: command opens an interactive settings dialog directly in the Aspire dashboard. Use it to adjust the browser session at runtime without restarting the AppHost. + - paragraph [ref=e524]: "The dialog presents the following options:" + - list [ref=e525]: + - listitem [ref=e526]: + - strong [ref=e527]: Scope + - text: — Apply changes to the current resource only, or globally to all browser log resources in the AppHost. + - listitem [ref=e528]: + - strong [ref=e529]: Browser + - text: — Choose a detected Chromium browser (Edge or Chrome) or specify a custom executable path. + - listitem [ref=e530]: + - strong [ref=e531]: User data mode + - text: — + - code [ref=e532]: Shared + - text: (cross-AppHost persistent data directory) or + - code [ref=e533]: Isolated + - text: (per-AppHost persistent data directory). + - listitem [ref=e534]: + - strong [ref=e535]: Profile + - text: — Select a discovered Chromium profile from the Aspire-managed browser hive (available in + - code [ref=e536]: Shared + - text: mode only). + - listitem [ref=e537]: + - strong [ref=e538]: Save to user secrets + - text: — Persist the selected settings to the AppHost’s user secrets so they are restored on the next run. This option is only shown when the AppHost project has a user secrets ID configured (run + - code [ref=e539]: aspire secret set + - text: once in the AppHost project to initialize and store a secret). + - complementary "Note" [ref=e540]: + - paragraph [ref=e541]: + - img [ref=e542] + - text: Note + - paragraph [ref=e545]: + - text: The + - strong [ref=e546]: Configure tracked browser + - text: command is only available when the Aspire dashboard’s interaction service is active (that is, when the dashboard is connected to the AppHost). It is disabled in standalone dashboard mode. + - paragraph [ref=e547]: "After confirming the dialog, the new configuration takes effect immediately: the current browser session restarts with the updated settings." + - generic [ref=e548]: + - heading "Browser sessions, tabs, and process sharing" [level=2] [ref=e549] + - link "Section titled “Browser sessions, tabs, and process sharing”" [ref=e550] [cursor=pointer]: + - /url: "#browser-sessions-tabs-and-process-sharing" + - img [ref=e552] + - generic [ref=e554]: Section titled “Browser sessions, tabs, and process sharing” + - paragraph [ref=e555]: + - text: Aspire shares one Chromium process across every tracked browser session that targets the same browser executable and user data directory. Each call to + - strong [ref=e556]: Open tracked browser + - text: opens a + - strong [ref=e557]: new tab + - text: (Chrome DevTools Protocol page target) inside that shared browser, not a new window or process. + - paragraph [ref=e558]: "This means:" + - list [ref=e559]: + - listitem [ref=e560]: Multiple resources that all use the default settings share a single browser window with one tab per resource. + - listitem [ref=e561]: + - text: Switching + - code [ref=e562]: userDataMode + - text: from + - code [ref=e563]: Shared + - text: to + - code [ref=e564]: Isolated + - text: ", choosing a different" + - code [ref=e565]: browser + - text: ", or selecting a different" + - code [ref=e566]: profile + - text: produces a different identity, which spins up a separate browser process. + - listitem [ref=e567]: + - text: Within the same user data directory, requesting a named + - code [ref=e568]: profile + - text: while another session is already running with a different profile fails with a conflict error rather than silently mixing profiles. + - listitem [ref=e569]: The tracked browser persists across AppHost runs. When you stop the AppHost, the browser stays open; the next AppHost run adopts the existing browser via the Chrome DevTools Protocol endpoint and adds new tabs to it. + - generic [ref=e570]: + - heading "How browser logs are captured" [level=2] [ref=e571] + - link "Section titled “How browser logs are captured”" [ref=e572] [cursor=pointer]: + - /url: "#how-browser-logs-are-captured" + - img [ref=e574] + - generic [ref=e576]: Section titled “How browser logs are captured” + - paragraph [ref=e577]: + - text: The tracked browser connects to the Aspire AppHost over the + - link "Chrome DevTools Protocol (CDP)" [ref=e578] [cursor=pointer]: + - /url: https://chromedevtools.github.io/devtools-protocol/ + - text: ". Aspire subscribes to the following CDP domains and forwards events to the resource’s console log stream:" + - list [ref=e579]: + - listitem [ref=e580]: + - strong [ref=e581]: Runtime + - text: — JavaScript console messages + - listitem [ref=e582]: + - strong [ref=e583]: Log + - text: — browser-level log entries + - listitem [ref=e584]: + - strong [ref=e585]: Page + - text: — page lifecycle events + - listitem [ref=e586]: + - strong [ref=e587]: Network + - text: — network requests and failures + - complementary "Tip" [ref=e588]: + - paragraph [ref=e589]: + - img [ref=e590] + - text: Tip + - paragraph [ref=e594]: + - text: Browser logs are a complement to + - link "browser telemetry" [ref=e595] [cursor=pointer]: + - /url: /dashboard/enable-browser-telemetry/ + - text: ", which uses the OpenTelemetry JavaScript SDK to send traces and metrics from within the browser app itself. The two features can be used together." + - generic [ref=e596]: + - heading "See also" [level=2] [ref=e597] + - link "Section titled “See also”" [ref=e598] [cursor=pointer]: + - /url: "#see-also" + - img [ref=e600] + - generic [ref=e602]: Section titled “See also” + - list [ref=e603]: + - listitem [ref=e604]: + - link "Browser sessions, tabs, and process sharing" [ref=e605] [cursor=pointer]: + - /url: "#browser-sessions-tabs-and-process-sharing" + - listitem [ref=e606]: + - link "Enable browser telemetry" [ref=e607] [cursor=pointer]: + - /url: /dashboard/enable-browser-telemetry/ + - listitem [ref=e608]: + - link "Explore Aspire dashboard features" [ref=e609] [cursor=pointer]: + - /url: /dashboard/explore/ + - listitem [ref=e610]: + - link "AppHost configuration" [ref=e611] [cursor=pointer]: + - /url: /app-host/configuration/ + - generic [ref=e613]: + - generic [ref=e614]: + - generic [ref=e616]: + - link "Edit page" [ref=e618] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire.dev/edit/main/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx + - img [ref=e619] + - text: Edit page + - link "Translate this page" [ref=e621] [cursor=pointer]: + - /url: /i18n/ + - img [ref=e622] + - text: Translate this page + - link "Next Data API Builder" [ref=e625] [cursor=pointer]: + - /url: /integrations/devtools/dab/ + - img [ref=e626] + - generic [ref=e628]: + - text: Next + - text: Data API Builder + - generic [ref=e629]: + - generic [ref=e630]: Connect with us + - generic [ref=e631]: + - link "RSS feed (opens in new tab)" [ref=e632] [cursor=pointer]: + - /url: /rss.xml + - img [ref=e633] + - link "GitHub (opens in new tab)" [ref=e635] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire + - img [ref=e636] + - link "Discord (opens in new tab)" [ref=e638] [cursor=pointer]: + - /url: https://discord.com/invite/raNPcaaSj8 + - img [ref=e639] + - link "X (opens in new tab)" [ref=e641] [cursor=pointer]: + - /url: https://x.com/aspiredotdev + - img [ref=e642] + - link "BlueSky (opens in new tab)" [ref=e644] [cursor=pointer]: + - /url: https://bsky.app/profile/aspire.dev + - img [ref=e645] + - link "YouTube (opens in new tab)" [ref=e647] [cursor=pointer]: + - /url: https://www.youtube.com/@aspiredotdev + - img [ref=e648] + - link "Twitch (opens in new tab)" [ref=e650] [cursor=pointer]: + - /url: https://www.twitch.tv/aspiredotdev + - img [ref=e651] + - link "Blog (opens in new tab)" [ref=e653] [cursor=pointer]: + - /url: https://devblogs.microsoft.com/aspire + - img [ref=e654] + - generic [ref=e656]: + - navigation "Legal" [ref=e657]: + - paragraph [ref=e658]: Legal + - list [ref=e659]: + - listitem [ref=e660]: + - link "Your Privacy Choices Opt-Out Icon Your Privacy Choices" [ref=e661] [cursor=pointer]: + - /url: https://aka.ms/yourcaliforniaprivacychoices + - img "Your Privacy Choices Opt-Out Icon" [ref=e662] + - text: Your Privacy Choices + - listitem [ref=e667]: + - link "Privacy & Cookies" [ref=e668] [cursor=pointer]: + - /url: https://go.microsoft.com/fwlink/?LinkId=521839 + - listitem [ref=e669]: + - link "Terms of Use" [ref=e670] [cursor=pointer]: + - /url: https://go.microsoft.com/fwlink/?LinkID=206977 + - listitem [ref=e671]: + - link "Trademarks" [ref=e672] [cursor=pointer]: + - /url: https://go.microsoft.com/fwlink/?linkid=2196228 + - listitem [ref=e673]: + - link "Support" [ref=e674] [cursor=pointer]: + - /url: /support/ + - generic [ref=e675]: + - paragraph [ref=e676]: Community + - list [ref=e677]: + - listitem [ref=e678]: + - link "Follow" [ref=e679] [cursor=pointer]: + - /url: https://x.com/aspiredotdev + - img [ref=e680] + - text: Follow + - listitem [ref=e682]: + - link "Collaborate" [ref=e683] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire + - img [ref=e684] + - text: Collaborate + - listitem [ref=e686]: + - link "Discord" [ref=e687] [cursor=pointer]: + - /url: https://discord.com/invite/raNPcaaSj8 + - img [ref=e688] + - text: Discord + - listitem [ref=e690]: + - link "Discuss" [ref=e691] [cursor=pointer]: + - /url: https://www.reddit.com/r/aspiredotdev + - img [ref=e692] + - text: Discuss + - listitem [ref=e694]: + - link "Watch" [ref=e695] [cursor=pointer]: + - /url: https://www.youtube.com/@aspiredotdev + - img [ref=e696] + - text: Watch + - navigation "Resources" [ref=e698]: + - paragraph [ref=e699]: Resources + - list [ref=e700]: + - listitem [ref=e701]: + - link "Reference" [ref=e702] [cursor=pointer]: + - /url: /reference/overview/ + - listitem [ref=e703]: + - link "Contributor guide" [ref=e704] [cursor=pointer]: + - /url: /community/contributor-guide/ + - listitem [ref=e705]: + - link "Releases" [ref=e706] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire/releases + - listitem [ref=e707]: + - link "Aspire brand" [ref=e708] [cursor=pointer]: + - /url: https://microsoft.github.io/aspire-brand/ + - listitem [ref=e709]: + - link "Contact" [ref=e710] [cursor=pointer]: + - /url: https://support.microsoft.com/en-US/contactus/ + - region "Preferences" [ref=e711]: + - paragraph [ref=e712]: Preferences + - generic [ref=e713]: + - generic [ref=e715]: + - img + - combobox "Select theme" [ref=e716] [cursor=pointer]: + - option "Auto" [selected] + - option "Dark" + - option "Light" + - img + - generic [ref=e718]: + - img + - combobox "Select language" [ref=e719] [cursor=pointer]: + - option "English" [selected] + - option "Deutsch" + - option "Español" + - option "日本語" + - option "Français" + - option "Italiano" + - option "Bahasa Indonesia" + - option "简体中文" + - option "Português do Brasil" + - option "한국어" + - option "Türkçe" + - option "Русский" + - option "हिंदी" + - option "Dansk" + - option "Українська" + - img + - generic [ref=e721]: + - img + - combobox "Select keyboard shortcuts style" [ref=e722] [cursor=pointer]: + - option "macOS" [selected] + - option "Windows" + - option "Linux" + - img + - generic [ref=e723]: + - link "SHA — ff27819" [ref=e724] [cursor=pointer]: + - /url: https://github.com/microsoft/aspire.dev/commit/ff2781961f972c1690c1d2db2f812a81a0ea2615 + - generic [ref=e725]: © Microsoft 2026 + - generic [ref=e728]: + - button "Menu" [ref=e729]: + - img [ref=e731] + - generic: Menu + - button "Inspect" [ref=e735]: + - img [ref=e737] + - generic: Inspect + - button "Audit" [ref=e739]: + - generic [ref=e740]: + - img [ref=e741] + - img [ref=e744] + - generic: Audit + - button "Settings" [ref=e747]: + - img [ref=e749] + - generic: Settings \ No newline at end of file diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 0b89bf8c9..3853bf392 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -68,7 +68,7 @@ This updates your `aspire.config.json` with the browser logs hosting integration ## Add browser logs to a resource -Add browser logs to any resource that exposes an HTTP or HTTPS endpoint: +Browser logs work with **any resource that exposes an HTTP or HTTPS endpoint that can be rendered in a browser** — projects, containers, executables, or custom resources. The examples below use [Vite](https://vite.dev/) (from the [📦 Aspire.Hosting.JavaScript](https://www.nuget.org/packages/Aspire.Hosting.JavaScript) package) for illustration, but the same `WithBrowserLogs()` call applies to any browseable resource: @@ -77,6 +77,7 @@ Add browser logs to any resource that exposes an HTTP or HTTPS endpoint: var builder = DistributedApplication.CreateBuilder(args); +// "../web" points at a sibling directory containing a Vite app. builder.AddViteApp("web", "../web") .WithBrowserLogs(); @@ -89,8 +90,9 @@ import { createBuilder } from './.modules/aspire.js'; const builder = await createBuilder(); -const web = await builder.addViteApp("web", "../web"); -await web.withBrowserLogs(); +// "../web" points at a sibling directory containing a Vite app. +builder.addViteApp("web", "../web") + .withBrowserLogs(); await builder.build().run(); ``` @@ -124,10 +126,11 @@ builder.AddViteApp("web", "../web") ```typescript title="TypeScript — apphost.ts" import { BrowserUserDataMode } from './.modules/aspire.js'; -await web.withBrowserLogs({ - browser: "msedge", - userDataMode: BrowserUserDataMode.Isolated, -}); +builder.addViteApp("web", "../web") + .withBrowserLogs({ + browser: "msedge", + userDataMode: BrowserUserDataMode.Isolated, + }); ``` @@ -163,7 +166,7 @@ The dialog presents the following options: - **Browser** — Choose a detected Chromium browser (Edge or Chrome) or specify a custom executable path. - **User data mode** — `Shared` (cross-AppHost persistent data directory) or `Isolated` (per-AppHost persistent data directory). - **Profile** — Select a discovered Chromium profile from the Aspire-managed browser hive (available in `Shared` mode only). -- **Save to user secrets** — Persist the selected settings to the AppHost's user secrets so they are restored on the next run. This option is only shown when the AppHost project has a user secrets ID configured (run `aspire secret set` once in the AppHost project to initialize and store a secret). +- **Save to user secrets** — Persist the selected settings to the AppHost's user secrets so they're restored on the next run. This option is only shown when the AppHost project has a user secrets ID configured. Run [`aspire secret set`](/reference/cli/commands/aspire-secret-set/) once in the AppHost project to initialize a user secrets store; subsequent **Save to user secrets** clicks then write the browser configuration into it. :::note The **Configure tracked browser** command is only available when the Aspire dashboard's interaction service is active (that is, when the dashboard is connected to the AppHost). It is disabled in standalone dashboard mode. From f35b84188768b595dde29d4cb284d2663c9298a0 Mon Sep 17 00:00:00 2001 From: David Fowler Date: Thu, 30 Apr 2026 23:58:29 -0700 Subject: [PATCH 6/8] Remove accidental Playwright MCP snapshot dump Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .gitignore | 1 + .../page-2026-05-01T06-52-36-437Z.yml | 786 ------------------ 2 files changed, 1 insertion(+), 786 deletions(-) delete mode 100644 .playwright-mcp/page-2026-05-01T06-52-36-437Z.yml diff --git a/.gitignore b/.gitignore index 26f9578fb..0e4e67ae1 100644 --- a/.gitignore +++ b/.gitignore @@ -454,3 +454,4 @@ FodyWeavers.xsd bin/ obj/ tmp-ts-validation/ +.playwright-mcp/ diff --git a/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml b/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml deleted file mode 100644 index 785a87cff..000000000 --- a/.playwright-mcp/page-2026-05-01T06-52-36-437Z.yml +++ /dev/null @@ -1,786 +0,0 @@ -- generic [ref=e1]: - - link "Skip to content" [ref=e2] [cursor=pointer]: - - /url: "#_top" - - generic [ref=e3]: - - banner [ref=e4]: - - generic [ref=e5]: - - link "Aspire" [ref=e7] [cursor=pointer]: - - /url: / - - generic [ref=e8]: Aspire - - button "Search" [ref=e11] [cursor=pointer]: - - img [ref=e12] - - generic [ref=e14]: Search - - generic [ref=e15]: - - generic [ref=e16]: ⌘ - - generic [ref=e17]: K - - generic [ref=e18]: - - button "Open cookie preferences dialog" [ref=e19] [cursor=pointer]: - - generic [ref=e20]: Cookie Preferences - - img [ref=e21] - - button "Open install Aspire CLI dialog" [ref=e23] [cursor=pointer]: - - generic [ref=e24]: Install Aspire CLI - - img [ref=e25] - - link "Docs" [ref=e27] [cursor=pointer]: - - /url: /docs/ - - link "Try Aspire" [ref=e28] [cursor=pointer]: - - /url: /get-started/first-app/ - - navigation "Main": - - generic [ref=e31]: - - generic [ref=e32]: - - generic [ref=e33]: - - generic [ref=e35]: - - img - - generic [ref=e36]: Filter sidebar - - textbox "Filter sidebar entries" [active] [ref=e37]: - - /placeholder: Filter sidebar… - - button "Collapse sidebar" [ref=e39] [cursor=pointer]: - - img [ref=e40] - - button "Integrations" [ref=e44] [cursor=pointer]: - - img [ref=e46] - - generic [ref=e49]: Integrations - - img [ref=e50] - - list [ref=e53]: - - listitem [ref=e54]: - - group [ref=e55]: - - generic "Aspire integrations" [ref=e56] [cursor=pointer]: - - generic [ref=e57]: Aspire integrations - - img [ref=e58] - - list [ref=e60]: - - listitem [ref=e61]: - - link "Overview" [ref=e62] [cursor=pointer]: - - /url: /integrations/ - - listitem [ref=e63]: - - link "What are Aspire integrations?" [ref=e64] [cursor=pointer]: - - /url: /integrations/overview/ - - listitem [ref=e65]: - - link "Explore integration gallery" [ref=e66] [cursor=pointer]: - - /url: /integrations/gallery/ - - listitem [ref=e67]: - - group [ref=e68]: - - generic "Artificial Intelligence (AI)" [ref=e69] [cursor=pointer]: - - generic [ref=e70]: Artificial Intelligence (AI) - - img [ref=e71] - - listitem [ref=e73]: - - group [ref=e74]: - - generic "Custom integrations" [ref=e75] [cursor=pointer]: - - generic [ref=e76]: Custom integrations - - img [ref=e77] - - listitem [ref=e79]: - - group [ref=e80]: - - generic "Cloud providers" [ref=e81] [cursor=pointer]: - - generic [ref=e82]: Cloud providers - - img [ref=e83] - - listitem [ref=e85]: - - group [ref=e86]: - - generic "Caching & state" [ref=e87] [cursor=pointer]: - - generic [ref=e88]: Caching & state - - img [ref=e89] - - listitem [ref=e91]: - - group [ref=e92]: - - generic "Compute & hosting" [ref=e93] [cursor=pointer]: - - generic [ref=e94]: Compute & hosting - - img [ref=e95] - - listitem [ref=e97]: - - group [ref=e98]: - - generic "Data & databases" [ref=e99] [cursor=pointer]: - - generic [ref=e100]: Data & databases - - img [ref=e101] - - listitem [ref=e103]: - - group [ref=e104]: - - generic "Frameworks & runtimes" [ref=e105] [cursor=pointer]: - - generic [ref=e106]: Frameworks & runtimes - - img [ref=e107] - - listitem [ref=e109]: - - group [ref=e110]: - - generic "Messaging & eventing" [ref=e111] [cursor=pointer]: - - generic [ref=e112]: Messaging & eventing - - img [ref=e113] - - listitem [ref=e115]: - - group [ref=e116]: - - generic "Security & identity" [ref=e117] [cursor=pointer]: - - generic [ref=e118]: Security & identity - - img [ref=e119] - - listitem [ref=e121]: - - group [ref=e122]: - - generic "Observability & logging" [ref=e123] [cursor=pointer]: - - generic [ref=e124]: Observability & logging - - img [ref=e125] - - listitem [ref=e127]: - - group [ref=e128]: - - generic "Reverse proxies & APIs" [ref=e129] [cursor=pointer]: - - generic [ref=e130]: Reverse proxies & APIs - - img [ref=e131] - - listitem [ref=e133]: - - group [ref=e134]: - - generic "Dev tools & extensions" [ref=e135] [cursor=pointer]: - - generic [ref=e136]: Dev tools & extensions - - img [ref=e137] - - list [ref=e139]: - - listitem [ref=e140]: - - link "Browser logs" [ref=e141] [cursor=pointer]: - - /url: /integrations/devtools/browser-logs/ - - listitem [ref=e142]: - - link "Data API Builder" [ref=e143] [cursor=pointer]: - - /url: /integrations/devtools/dab/ - - listitem [ref=e144]: - - link "Dev Tunnels" [ref=e145] [cursor=pointer]: - - /url: /integrations/devtools/dev-tunnels/ - - listitem [ref=e146]: - - group [ref=e147]: - - generic "flagd" [ref=e148] [cursor=pointer]: - - generic [ref=e149]: flagd - - img [ref=e150] - - listitem [ref=e152]: - - group [ref=e153]: - - generic "goff" [ref=e154] [cursor=pointer]: - - generic [ref=e155]: goff - - img [ref=e156] - - listitem [ref=e158]: - - link "k6" [ref=e159] [cursor=pointer]: - - /url: /integrations/devtools/k6/ - - listitem [ref=e160]: - - group [ref=e161]: - - generic "MailPit" [ref=e162] [cursor=pointer]: - - generic [ref=e163]: MailPit - - img [ref=e164] - - listitem [ref=e166]: - - link "SQL Database Projects" [ref=e167] [cursor=pointer]: - - /url: /integrations/devtools/sql-projects/ - - link "aspire.dev" [ref=e169] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire.dev - - img [ref=e170] - - text: aspire.dev - - generic [ref=e173]: - - complementary [ref=e174]: - - generic [ref=e175]: - - navigation "On this page Overview" [ref=e176]: - - group [ref=e177]: - - generic "On this page Overview" [ref=e178]: - - generic [ref=e179] [cursor=pointer]: - - text: On this page - - img [ref=e180] - - generic [ref=e182]: Overview - - navigation "On this page" [ref=e186]: - - heading "On this page" [level=2] [ref=e187] - - list [ref=e188]: - - listitem [ref=e189]: - - link "Overview" [ref=e190] [cursor=pointer]: - - /url: "#_top" - - listitem [ref=e191]: - - link "Prerequisites" [ref=e192] [cursor=pointer]: - - /url: "#prerequisites" - - listitem [ref=e193]: - - link "Install the package" [ref=e194] [cursor=pointer]: - - /url: "#install-the-package" - - listitem [ref=e195]: - - link "Add browser logs to a resource" [ref=e196] [cursor=pointer]: - - /url: "#add-browser-logs-to-a-resource" - - listitem [ref=e197]: - - link "Optional parameters" [ref=e198] [cursor=pointer]: - - /url: "#optional-parameters" - - listitem [ref=e199]: - - link "Configure via app settings" [ref=e200] [cursor=pointer]: - - /url: "#configure-via-app-settings" - - listitem [ref=e201]: - - link "Configure browser logs" [ref=e202] [cursor=pointer]: - - /url: "#configure-browser-logs" - - listitem [ref=e203]: - - link "Browser sessions, tabs, and process sharing" [ref=e204] [cursor=pointer]: - - /url: "#browser-sessions-tabs-and-process-sharing" - - listitem [ref=e205]: - - link "How browser logs are captured" [ref=e206] [cursor=pointer]: - - /url: "#how-browser-logs-are-captured" - - listitem [ref=e207]: - - link "See also" [ref=e208] [cursor=pointer]: - - /url: "#see-also" - - main [ref=e210]: - - generic [ref=e212]: - - heading "Browser logs" [level=1] [ref=e213] - - generic [ref=e214]: - - button "Copy Markdown" [ref=e215] [cursor=pointer]: - - img [ref=e216] - - generic [ref=e218]: Copy Markdown - - generic [ref=e219]: - - button "Open" [ref=e221] [cursor=pointer]: - - generic [ref=e222]: Open - - img [ref=e223] - - button "Share" [ref=e226] [cursor=pointer]: - - generic [ref=e227]: Share - - img [ref=e228] - - generic [ref=e231]: - - navigation "Breadcrumb" [ref=e232]: - - generic [ref=e233]: - - link "Integrations" [ref=e234] [cursor=pointer]: - - /url: /integrations/ - - img [ref=e235] - - text: Integrations - - generic [ref=e237]: / - - generic [ref=e238]: Dev tools & extensions - - generic [ref=e239]: / - - generic [ref=e240]: Browser logs - - generic [ref=e241]: - - paragraph [ref=e242]: The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource’s console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. - - complementary "Experimental API" [ref=e243]: - - paragraph [ref=e244]: - - img [ref=e245] - - text: Experimental API - - paragraph [ref=e248]: - - text: The browser logs API is experimental. In C#, - - code [ref=e249]: WithBrowserLogs - - text: is gated behind the - - code [ref=e250]: ASPIREBROWSERLOGS001 - - text: diagnostic ID, which you must suppress to use the API. - - generic [ref=e251]: - - heading "Prerequisites" [level=2] [ref=e252] - - link "Section titled “Prerequisites”" [ref=e253] [cursor=pointer]: - - /url: "#prerequisites" - - img [ref=e255] - - generic [ref=e257]: Section titled “Prerequisites” - - list [ref=e258]: - - listitem [ref=e259]: A Chromium-based browser (Microsoft Edge or Google Chrome) installed on the development machine. The tracked browser uses an Aspire-managed user data directory and never touches the user’s normal browser profile. - - listitem [ref=e260]: A parent resource that exposes at least one HTTP or HTTPS endpoint. Any resource with endpoints is supported — projects, containers, executables, or any custom resource — not just projects. HTTPS endpoints are preferred over HTTP when selecting the target URL. - - generic [ref=e261]: - - heading "Install the package" [level=2] [ref=e262] - - link "Section titled “Install the package”" [ref=e263] [cursor=pointer]: - - /url: "#install-the-package" - - img [ref=e265] - - generic [ref=e267]: Section titled “Install the package” - - paragraph [ref=e268]: - - text: The browser logs feature ships in the - - link "📦 Aspire.Hosting.Browsers" [ref=e269] [cursor=pointer]: - - /url: https://www.nuget.org/packages/Aspire.Hosting.Browsers - - text: "hosting package. Install it in your AppHost project:" - - generic [ref=e270]: - - tablist [ref=e272]: - - tab "C#" [selected] [ref=e273] [cursor=pointer] - - tab "TypeScript" [ref=e274] [cursor=pointer] - - tabpanel "C#" [ref=e275]: - - figure "Terminal" [ref=e277]: - - generic [ref=e279]: Terminal - - generic "Terminal in Install the package (1 of 2)" [ref=e280]: - - code [ref=e281]: - - generic [ref=e283]: aspire add browsers - - button "Copied aspire add browsers to clipboard" [ref=e285] [cursor=pointer] - - generic [ref=e287]: - - img [ref=e288] - - paragraph [ref=e291]: - - text: Learn more about - - link "aspire add" [ref=e292] [cursor=pointer]: - - /url: /reference/cli/commands/aspire-add/ - - code [ref=e293]: aspire add - - text: in the command reference. - - paragraph [ref=e294]: "Or, choose a manual installation approach:" - - figure "C# — AppHost.cs" [ref=e296]: - - generic [ref=e298]: C# — AppHost.cs - - generic "C# — AppHost.cs in Install the package" [ref=e299]: - - code [ref=e300]: - - generic [ref=e302]: - - text: "#:package" - - generic [ref=e303]: Aspire.Hosting.Browsers@ - - text: "*" - - 'button "Copied #:package Aspire.Hosting.Browsers@* to clipboard" [ref=e305] [cursor=pointer]' - - figure "XML — AppHost.csproj" [ref=e308]: - - generic [ref=e310]: XML — AppHost.csproj - - generic "XML — AppHost.csproj in Install the package" [ref=e311]: - - code [ref=e312]: - - generic [ref=e314]: - - text: - - button "Copied to clipboard" [ref=e319] [cursor=pointer] - - text: + - - generic [ref=e321]: - - heading "Add browser logs to a resource" [level=2] [ref=e322] - - link "Section titled “Add browser logs to a resource”" [ref=e323] [cursor=pointer]: - - /url: "#add-browser-logs-to-a-resource" - - img [ref=e325] - - generic [ref=e327]: Section titled “Add browser logs to a resource” - - paragraph [ref=e328]: "Add browser logs to any resource that exposes an HTTP or HTTPS endpoint:" - - generic [ref=e329]: - - tablist [ref=e331]: - - tab "C#" [selected] [ref=e332] [cursor=pointer] - - tab "TypeScript" [ref=e333] [cursor=pointer] - - tabpanel "C#" [ref=e334]: - - figure "C# — AppHost.cs" [ref=e336]: - - generic [ref=e338]: C# — AppHost.cs - - generic "C# — AppHost.cs in Add browser logs to a resource" [ref=e339]: - - code [ref=e340]: - - generic [ref=e342]: "#pragma warning disable ASPIREBROWSERLOGS001" - - generic [ref=e346]: var builder = DistributedApplication.CreateBuilder(args); - - generic [ref=e350]: - - text: builder.AddViteApp( - - generic [ref=e351]: "\"web\"" - - generic [ref=e352]: "," - - generic [ref=e353]: "\"../web\"" - - text: ) - - generic [ref=e355]: .WithBrowserLogs(); - - generic [ref=e360]: - - text: builder.Build - - generic [ref=e361]: (). - - text: Run(); - - 'button "Copied #pragma warning disable ASPIREBROWSERLOGS001var builder = DistributedApplication.CreateBuilder(args);builder.AddViteApp(\"web\", \"../web\") .WithBrowserLogs();builder.Build().Run(); to clipboard" [ref=e363] [cursor=pointer]' - - paragraph [ref=e365]: - - text: This registers a child resource named - - code [ref=e366]: -browser-logs - - text: (for the example above, - - code [ref=e367]: web-browser-logs - - text: ) of resource type - - code [ref=e368]: BrowserLogs - - text: "beneath the parent. The child resource appears in the Aspire dashboard and exposes the following commands:" - - table [ref=e369]: - - rowgroup [ref=e370]: - - row "Display name Command ID Description" [ref=e371]: - - columnheader "Display name" [ref=e372] - - columnheader "Command ID" [ref=e373] - - columnheader "Description" [ref=e374] - - rowgroup [ref=e375]: - - row "Open tracked browser open-tracked-browser Launches a Chromium browser attached to the resource’s primary URL. Console output streams to the resource’s log view." [ref=e376]: - - cell "Open tracked browser" [ref=e377]: - - strong [ref=e378]: Open tracked browser - - cell "open-tracked-browser" [ref=e379]: - - code [ref=e380]: open-tracked-browser - - cell "Launches a Chromium browser attached to the resource’s primary URL. Console output streams to the resource’s log view." [ref=e381] - - row "Configure tracked browser configure-tracked-browser Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see Configure browser logs)." [ref=e382]: - - cell "Configure tracked browser" [ref=e383]: - - strong [ref=e384]: Configure tracked browser - - cell "configure-tracked-browser" [ref=e385]: - - code [ref=e386]: configure-tracked-browser - - cell "Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see Configure browser logs)." [ref=e387]: - - text: Opens a settings dialog to change the browser, scope, user data mode, and profile at runtime (see - - link "Configure browser logs" [ref=e388] [cursor=pointer]: - - /url: "#configure-browser-logs" - - text: ). - - row "Capture screenshot capture-screenshot Captures a screenshot of the active browser session and attaches it as a command artifact." [ref=e389]: - - cell "Capture screenshot" [ref=e390]: - - strong [ref=e391]: Capture screenshot - - cell "capture-screenshot" [ref=e392]: - - code [ref=e393]: capture-screenshot - - cell "Captures a screenshot of the active browser session and attaches it as a command artifact." [ref=e394] - - paragraph [ref=e395]: The display names are the labels shown on the dashboard; the command IDs are the stable identifiers used when invoking commands programmatically. - - generic [ref=e396]: - - heading "Optional parameters" [level=2] [ref=e397] - - link "Section titled “Optional parameters”" [ref=e398] [cursor=pointer]: - - /url: "#optional-parameters" - - img [ref=e400] - - generic [ref=e402]: Section titled “Optional parameters” - - paragraph [ref=e403]: "Pin the browser, profile, or user data mode at design time:" - - generic [ref=e404]: - - tablist [ref=e406]: - - tab "C#" [selected] [ref=e407] [cursor=pointer] - - tab "TypeScript" [ref=e408] [cursor=pointer] - - tabpanel "C#" [ref=e409]: - - figure "C# — AppHost.cs" [ref=e411]: - - generic [ref=e413]: C# — AppHost.cs - - generic "C# — AppHost.cs in Optional parameters" [ref=e414]: - - code [ref=e415]: - - generic [ref=e417]: - - text: builder.AddViteApp( - - generic [ref=e418]: "\"web\"" - - generic [ref=e419]: "," - - generic [ref=e420]: "\"../web\"" - - text: ) - - generic [ref=e422]: .WithBrowserLogs( - - generic [ref=e425]: - - text: "browser:" - - generic [ref=e427]: "\"msedge\"" - - text: "," - - generic [ref=e429]: "userDataMode: BrowserUserDataMode.Isolated);" - - 'button "Copied builder.AddViteApp(\"web\", \"../web\") .WithBrowserLogs( browser: \"msedge\", userDataMode: BrowserUserDataMode.Isolated); to clipboard" [ref=e432] [cursor=pointer]' - - table [ref=e434]: - - rowgroup [ref=e435]: - - row "Parameter Description" [ref=e436]: - - columnheader "Parameter" [ref=e437] - - columnheader "Description" [ref=e438] - - rowgroup [ref=e439]: - - row "browser Logical browser name (\"msedge\", \"chrome\") or an explicit executable path. Defaults to an installed Edge in Shared user data mode and an installed Chrome in Isolated user data mode, falling back to the other Chromium browser if the preferred one is missing, or to \"chrome\" if neither is detected." [ref=e440]: - - cell "browser" [ref=e441]: - - code [ref=e442]: browser - - cell "Logical browser name (\"msedge\", \"chrome\") or an explicit executable path. Defaults to an installed Edge in Shared user data mode and an installed Chrome in Isolated user data mode, falling back to the other Chromium browser if the preferred one is missing, or to \"chrome\" if neither is detected." [ref=e443]: - - text: Logical browser name ( - - code [ref=e444]: "\"msedge\"" - - text: "," - - code [ref=e445]: "\"chrome\"" - - text: ) or an explicit executable path. Defaults to an installed Edge in - - code [ref=e446]: Shared - - text: user data mode and an installed Chrome in - - code [ref=e447]: Isolated - - text: user data mode, falling back to the other Chromium browser if the preferred one is missing, or to - - code [ref=e448]: "\"chrome\"" - - text: if neither is detected. - - row "profile Chromium profile name or directory name. Only valid when the effective user data mode is Shared." [ref=e449]: - - cell "profile" [ref=e450]: - - code [ref=e451]: profile - - cell "Chromium profile name or directory name. Only valid when the effective user data mode is Shared." [ref=e452]: - - text: Chromium profile name or directory name. Only valid when the effective user data mode is - - code [ref=e453]: Shared - - text: . - - row "userDataMode Shared (default) — a persistent user data directory shared across all AppHosts on the machine. Isolated — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified." [ref=e454]: - - cell "userDataMode" [ref=e455]: - - code [ref=e456]: userDataMode - - cell "Shared (default) — a persistent user data directory shared across all AppHosts on the machine. Isolated — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified." [ref=e457]: - - code [ref=e458]: Shared - - text: (default) — a persistent user data directory shared across all AppHosts on the machine. - - code [ref=e459]: Isolated - - text: — a per-AppHost persistent user data directory. Both modes use Aspire-managed paths; the user’s normal browser profile is never modified. - - generic [ref=e460]: - - heading "Configure via app settings" [level=2] [ref=e461] - - link "Section titled “Configure via app settings”" [ref=e462] [cursor=pointer]: - - /url: "#configure-via-app-settings" - - img [ref=e464] - - generic [ref=e466]: Section titled “Configure via app settings” - - paragraph [ref=e467]: - - text: Browser, profile, and user data mode can be supplied from configuration instead of code. Use these keys in - - emphasis [ref=e468]: appsettings.json - - text: "or environment variables:" - - table [ref=e469]: - - rowgroup [ref=e470]: - - row "Scope Configuration key Accepted values" [ref=e471]: - - columnheader "Scope" [ref=e472] - - columnheader "Configuration key" [ref=e473] - - columnheader "Accepted values" [ref=e474] - - rowgroup [ref=e475]: - - row "Global (all resources) Aspire:Hosting:BrowserLogs:Browser Logical name (msedge, chrome) or executable path" [ref=e476]: - - cell "Global (all resources)" [ref=e477] - - cell "Aspire:Hosting:BrowserLogs:Browser" [ref=e478]: - - code [ref=e479]: Aspire:Hosting:BrowserLogs:Browser - - cell "Logical name (msedge, chrome) or executable path" [ref=e480]: - - text: Logical name ( - - code [ref=e481]: msedge - - text: "," - - code [ref=e482]: chrome - - text: ) or executable path - - row "Global Aspire:Hosting:BrowserLogs:Profile Chromium profile name or directory name" [ref=e483]: - - cell "Global" [ref=e484] - - cell "Aspire:Hosting:BrowserLogs:Profile" [ref=e485]: - - code [ref=e486]: Aspire:Hosting:BrowserLogs:Profile - - cell "Chromium profile name or directory name" [ref=e487] - - row "Global Aspire:Hosting:BrowserLogs:UserDataMode Shared or Isolated (case-insensitive)" [ref=e488]: - - cell "Global" [ref=e489] - - cell "Aspire:Hosting:BrowserLogs:UserDataMode" [ref=e490]: - - code [ref=e491]: Aspire:Hosting:BrowserLogs:UserDataMode - - cell "Shared or Isolated (case-insensitive)" [ref=e492]: - - code [ref=e493]: Shared - - text: or - - code [ref=e494]: Isolated - - text: (case-insensitive) - - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:Browser Same as global Browser" [ref=e495]': - - cell "Per-resource" [ref=e496] - - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:Browser" [ref=e497]': - - code [ref=e498]: "Aspire:Hosting:BrowserLogs:{ResourceName}:Browser" - - cell "Same as global Browser" [ref=e499]: - - text: Same as global - - code [ref=e500]: Browser - - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:Profile Same as global Profile" [ref=e501]': - - cell "Per-resource" [ref=e502] - - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:Profile" [ref=e503]': - - code [ref=e504]: "Aspire:Hosting:BrowserLogs:{ResourceName}:Profile" - - cell "Same as global Profile" [ref=e505]: - - text: Same as global - - code [ref=e506]: Profile - - 'row "Per-resource Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode Same as global UserDataMode" [ref=e507]': - - cell "Per-resource" [ref=e508] - - 'cell "Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode" [ref=e509]': - - code [ref=e510]: "Aspire:Hosting:BrowserLogs:{ResourceName}:UserDataMode" - - cell "Same as global UserDataMode" [ref=e511]: - - text: Same as global - - code [ref=e512]: UserDataMode - - paragraph [ref=e513]: - - text: Explicit method arguments to - - code [ref=e514]: WithBrowserLogs - - text: take precedence over configuration. Per-resource keys take precedence over global keys. - - generic [ref=e515]: - - heading "Configure browser logs" [level=2] [ref=e516] - - link "Section titled “Configure browser logs”" [ref=e517] [cursor=pointer]: - - /url: "#configure-browser-logs" - - img [ref=e519] - - generic [ref=e521]: Section titled “Configure browser logs” - - paragraph [ref=e522]: - - text: The - - strong [ref=e523]: Configure tracked browser - - text: command opens an interactive settings dialog directly in the Aspire dashboard. Use it to adjust the browser session at runtime without restarting the AppHost. - - paragraph [ref=e524]: "The dialog presents the following options:" - - list [ref=e525]: - - listitem [ref=e526]: - - strong [ref=e527]: Scope - - text: — Apply changes to the current resource only, or globally to all browser log resources in the AppHost. - - listitem [ref=e528]: - - strong [ref=e529]: Browser - - text: — Choose a detected Chromium browser (Edge or Chrome) or specify a custom executable path. - - listitem [ref=e530]: - - strong [ref=e531]: User data mode - - text: — - - code [ref=e532]: Shared - - text: (cross-AppHost persistent data directory) or - - code [ref=e533]: Isolated - - text: (per-AppHost persistent data directory). - - listitem [ref=e534]: - - strong [ref=e535]: Profile - - text: — Select a discovered Chromium profile from the Aspire-managed browser hive (available in - - code [ref=e536]: Shared - - text: mode only). - - listitem [ref=e537]: - - strong [ref=e538]: Save to user secrets - - text: — Persist the selected settings to the AppHost’s user secrets so they are restored on the next run. This option is only shown when the AppHost project has a user secrets ID configured (run - - code [ref=e539]: aspire secret set - - text: once in the AppHost project to initialize and store a secret). - - complementary "Note" [ref=e540]: - - paragraph [ref=e541]: - - img [ref=e542] - - text: Note - - paragraph [ref=e545]: - - text: The - - strong [ref=e546]: Configure tracked browser - - text: command is only available when the Aspire dashboard’s interaction service is active (that is, when the dashboard is connected to the AppHost). It is disabled in standalone dashboard mode. - - paragraph [ref=e547]: "After confirming the dialog, the new configuration takes effect immediately: the current browser session restarts with the updated settings." - - generic [ref=e548]: - - heading "Browser sessions, tabs, and process sharing" [level=2] [ref=e549] - - link "Section titled “Browser sessions, tabs, and process sharing”" [ref=e550] [cursor=pointer]: - - /url: "#browser-sessions-tabs-and-process-sharing" - - img [ref=e552] - - generic [ref=e554]: Section titled “Browser sessions, tabs, and process sharing” - - paragraph [ref=e555]: - - text: Aspire shares one Chromium process across every tracked browser session that targets the same browser executable and user data directory. Each call to - - strong [ref=e556]: Open tracked browser - - text: opens a - - strong [ref=e557]: new tab - - text: (Chrome DevTools Protocol page target) inside that shared browser, not a new window or process. - - paragraph [ref=e558]: "This means:" - - list [ref=e559]: - - listitem [ref=e560]: Multiple resources that all use the default settings share a single browser window with one tab per resource. - - listitem [ref=e561]: - - text: Switching - - code [ref=e562]: userDataMode - - text: from - - code [ref=e563]: Shared - - text: to - - code [ref=e564]: Isolated - - text: ", choosing a different" - - code [ref=e565]: browser - - text: ", or selecting a different" - - code [ref=e566]: profile - - text: produces a different identity, which spins up a separate browser process. - - listitem [ref=e567]: - - text: Within the same user data directory, requesting a named - - code [ref=e568]: profile - - text: while another session is already running with a different profile fails with a conflict error rather than silently mixing profiles. - - listitem [ref=e569]: The tracked browser persists across AppHost runs. When you stop the AppHost, the browser stays open; the next AppHost run adopts the existing browser via the Chrome DevTools Protocol endpoint and adds new tabs to it. - - generic [ref=e570]: - - heading "How browser logs are captured" [level=2] [ref=e571] - - link "Section titled “How browser logs are captured”" [ref=e572] [cursor=pointer]: - - /url: "#how-browser-logs-are-captured" - - img [ref=e574] - - generic [ref=e576]: Section titled “How browser logs are captured” - - paragraph [ref=e577]: - - text: The tracked browser connects to the Aspire AppHost over the - - link "Chrome DevTools Protocol (CDP)" [ref=e578] [cursor=pointer]: - - /url: https://chromedevtools.github.io/devtools-protocol/ - - text: ". Aspire subscribes to the following CDP domains and forwards events to the resource’s console log stream:" - - list [ref=e579]: - - listitem [ref=e580]: - - strong [ref=e581]: Runtime - - text: — JavaScript console messages - - listitem [ref=e582]: - - strong [ref=e583]: Log - - text: — browser-level log entries - - listitem [ref=e584]: - - strong [ref=e585]: Page - - text: — page lifecycle events - - listitem [ref=e586]: - - strong [ref=e587]: Network - - text: — network requests and failures - - complementary "Tip" [ref=e588]: - - paragraph [ref=e589]: - - img [ref=e590] - - text: Tip - - paragraph [ref=e594]: - - text: Browser logs are a complement to - - link "browser telemetry" [ref=e595] [cursor=pointer]: - - /url: /dashboard/enable-browser-telemetry/ - - text: ", which uses the OpenTelemetry JavaScript SDK to send traces and metrics from within the browser app itself. The two features can be used together." - - generic [ref=e596]: - - heading "See also" [level=2] [ref=e597] - - link "Section titled “See also”" [ref=e598] [cursor=pointer]: - - /url: "#see-also" - - img [ref=e600] - - generic [ref=e602]: Section titled “See also” - - list [ref=e603]: - - listitem [ref=e604]: - - link "Browser sessions, tabs, and process sharing" [ref=e605] [cursor=pointer]: - - /url: "#browser-sessions-tabs-and-process-sharing" - - listitem [ref=e606]: - - link "Enable browser telemetry" [ref=e607] [cursor=pointer]: - - /url: /dashboard/enable-browser-telemetry/ - - listitem [ref=e608]: - - link "Explore Aspire dashboard features" [ref=e609] [cursor=pointer]: - - /url: /dashboard/explore/ - - listitem [ref=e610]: - - link "AppHost configuration" [ref=e611] [cursor=pointer]: - - /url: /app-host/configuration/ - - generic [ref=e613]: - - generic [ref=e614]: - - generic [ref=e616]: - - link "Edit page" [ref=e618] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire.dev/edit/main/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx - - img [ref=e619] - - text: Edit page - - link "Translate this page" [ref=e621] [cursor=pointer]: - - /url: /i18n/ - - img [ref=e622] - - text: Translate this page - - link "Next Data API Builder" [ref=e625] [cursor=pointer]: - - /url: /integrations/devtools/dab/ - - img [ref=e626] - - generic [ref=e628]: - - text: Next - - text: Data API Builder - - generic [ref=e629]: - - generic [ref=e630]: Connect with us - - generic [ref=e631]: - - link "RSS feed (opens in new tab)" [ref=e632] [cursor=pointer]: - - /url: /rss.xml - - img [ref=e633] - - link "GitHub (opens in new tab)" [ref=e635] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire - - img [ref=e636] - - link "Discord (opens in new tab)" [ref=e638] [cursor=pointer]: - - /url: https://discord.com/invite/raNPcaaSj8 - - img [ref=e639] - - link "X (opens in new tab)" [ref=e641] [cursor=pointer]: - - /url: https://x.com/aspiredotdev - - img [ref=e642] - - link "BlueSky (opens in new tab)" [ref=e644] [cursor=pointer]: - - /url: https://bsky.app/profile/aspire.dev - - img [ref=e645] - - link "YouTube (opens in new tab)" [ref=e647] [cursor=pointer]: - - /url: https://www.youtube.com/@aspiredotdev - - img [ref=e648] - - link "Twitch (opens in new tab)" [ref=e650] [cursor=pointer]: - - /url: https://www.twitch.tv/aspiredotdev - - img [ref=e651] - - link "Blog (opens in new tab)" [ref=e653] [cursor=pointer]: - - /url: https://devblogs.microsoft.com/aspire - - img [ref=e654] - - generic [ref=e656]: - - navigation "Legal" [ref=e657]: - - paragraph [ref=e658]: Legal - - list [ref=e659]: - - listitem [ref=e660]: - - link "Your Privacy Choices Opt-Out Icon Your Privacy Choices" [ref=e661] [cursor=pointer]: - - /url: https://aka.ms/yourcaliforniaprivacychoices - - img "Your Privacy Choices Opt-Out Icon" [ref=e662] - - text: Your Privacy Choices - - listitem [ref=e667]: - - link "Privacy & Cookies" [ref=e668] [cursor=pointer]: - - /url: https://go.microsoft.com/fwlink/?LinkId=521839 - - listitem [ref=e669]: - - link "Terms of Use" [ref=e670] [cursor=pointer]: - - /url: https://go.microsoft.com/fwlink/?LinkID=206977 - - listitem [ref=e671]: - - link "Trademarks" [ref=e672] [cursor=pointer]: - - /url: https://go.microsoft.com/fwlink/?linkid=2196228 - - listitem [ref=e673]: - - link "Support" [ref=e674] [cursor=pointer]: - - /url: /support/ - - generic [ref=e675]: - - paragraph [ref=e676]: Community - - list [ref=e677]: - - listitem [ref=e678]: - - link "Follow" [ref=e679] [cursor=pointer]: - - /url: https://x.com/aspiredotdev - - img [ref=e680] - - text: Follow - - listitem [ref=e682]: - - link "Collaborate" [ref=e683] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire - - img [ref=e684] - - text: Collaborate - - listitem [ref=e686]: - - link "Discord" [ref=e687] [cursor=pointer]: - - /url: https://discord.com/invite/raNPcaaSj8 - - img [ref=e688] - - text: Discord - - listitem [ref=e690]: - - link "Discuss" [ref=e691] [cursor=pointer]: - - /url: https://www.reddit.com/r/aspiredotdev - - img [ref=e692] - - text: Discuss - - listitem [ref=e694]: - - link "Watch" [ref=e695] [cursor=pointer]: - - /url: https://www.youtube.com/@aspiredotdev - - img [ref=e696] - - text: Watch - - navigation "Resources" [ref=e698]: - - paragraph [ref=e699]: Resources - - list [ref=e700]: - - listitem [ref=e701]: - - link "Reference" [ref=e702] [cursor=pointer]: - - /url: /reference/overview/ - - listitem [ref=e703]: - - link "Contributor guide" [ref=e704] [cursor=pointer]: - - /url: /community/contributor-guide/ - - listitem [ref=e705]: - - link "Releases" [ref=e706] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire/releases - - listitem [ref=e707]: - - link "Aspire brand" [ref=e708] [cursor=pointer]: - - /url: https://microsoft.github.io/aspire-brand/ - - listitem [ref=e709]: - - link "Contact" [ref=e710] [cursor=pointer]: - - /url: https://support.microsoft.com/en-US/contactus/ - - region "Preferences" [ref=e711]: - - paragraph [ref=e712]: Preferences - - generic [ref=e713]: - - generic [ref=e715]: - - img - - combobox "Select theme" [ref=e716] [cursor=pointer]: - - option "Auto" [selected] - - option "Dark" - - option "Light" - - img - - generic [ref=e718]: - - img - - combobox "Select language" [ref=e719] [cursor=pointer]: - - option "English" [selected] - - option "Deutsch" - - option "Español" - - option "日本語" - - option "Français" - - option "Italiano" - - option "Bahasa Indonesia" - - option "简体中文" - - option "Português do Brasil" - - option "한국어" - - option "Türkçe" - - option "Русский" - - option "हिंदी" - - option "Dansk" - - option "Українська" - - img - - generic [ref=e721]: - - img - - combobox "Select keyboard shortcuts style" [ref=e722] [cursor=pointer]: - - option "macOS" [selected] - - option "Windows" - - option "Linux" - - img - - generic [ref=e723]: - - link "SHA — ff27819" [ref=e724] [cursor=pointer]: - - /url: https://github.com/microsoft/aspire.dev/commit/ff2781961f972c1690c1d2db2f812a81a0ea2615 - - generic [ref=e725]: © Microsoft 2026 - - generic [ref=e728]: - - button "Menu" [ref=e729]: - - img [ref=e731] - - generic: Menu - - button "Inspect" [ref=e735]: - - img [ref=e737] - - generic: Inspect - - button "Audit" [ref=e739]: - - generic [ref=e740]: - - img [ref=e741] - - img [ref=e744] - - generic: Audit - - button "Settings" [ref=e747]: - - img [ref=e749] - - generic: Settings \ No newline at end of file From 633aec5ed277ccc542fcf51dd4a43149203499d8 Mon Sep 17 00:00:00 2001 From: David Fowler Date: Fri, 1 May 2026 00:03:32 -0700 Subject: [PATCH 7/8] Link to JavaScript integration page instead of NuGet Per docs convention, link to the in-site integration page for Aspire.Hosting.JavaScript (where the Vite resource is documented) rather than the NuGet listing. Drop the NuGet emoji link from the Aspire.Hosting.Browsers package mention as well. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../src/content/docs/integrations/devtools/browser-logs.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 3853bf392..7db243fdb 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -19,7 +19,7 @@ The browser logs API is experimental. In C#, `WithBrowserLogs` is gated behind t ## Install the package -The browser logs feature ships in the [📦 Aspire.Hosting.Browsers](https://www.nuget.org/packages/Aspire.Hosting.Browsers) hosting package. Install it in your AppHost project: +The browser logs feature ships in the `Aspire.Hosting.Browsers` hosting package. Install it in your AppHost project: @@ -68,7 +68,7 @@ This updates your `aspire.config.json` with the browser logs hosting integration ## Add browser logs to a resource -Browser logs work with **any resource that exposes an HTTP or HTTPS endpoint that can be rendered in a browser** — projects, containers, executables, or custom resources. The examples below use [Vite](https://vite.dev/) (from the [📦 Aspire.Hosting.JavaScript](https://www.nuget.org/packages/Aspire.Hosting.JavaScript) package) for illustration, but the same `WithBrowserLogs()` call applies to any browseable resource: +Browser logs work with **any resource that exposes an HTTP or HTTPS endpoint that can be rendered in a browser** — projects, containers, executables, or custom resources. The examples below use [Vite](https://vite.dev/) (from the [JavaScript integration](/integrations/frameworks/javascript/)) for illustration, but the same `WithBrowserLogs()` call applies to any browseable resource: From 6128f9fcd78d3f7f7c866ef4b64e7ba82c76fd8d Mon Sep 17 00:00:00 2001 From: David Fowler Date: Fri, 1 May 2026 07:49:25 -0700 Subject: [PATCH 8/8] Address PR feedback: add ASPIREBROWSERLOGS001 article, use InstallPackage - Create /diagnostics/aspirebrowserlogs001/ article and link the diagnostic ID mention in the browser-logs page to it. - Add the new diagnostic to the diagnostics overview table. - Replace the hand-rolled C# install tab with the shared component for consistency with other integration pages. The TypeScript tab keeps its hand-rolled aspire.config.json snippet. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> --- .../docs/diagnostics/aspirebrowserlogs001.mdx | 74 +++++++++++++++++++ .../src/content/docs/diagnostics/overview.mdx | 1 + .../integrations/devtools/browser-logs.mdx | 21 +----- 3 files changed, 78 insertions(+), 18 deletions(-) create mode 100644 src/frontend/src/content/docs/diagnostics/aspirebrowserlogs001.mdx diff --git a/src/frontend/src/content/docs/diagnostics/aspirebrowserlogs001.mdx b/src/frontend/src/content/docs/diagnostics/aspirebrowserlogs001.mdx new file mode 100644 index 000000000..c53a6d2a5 --- /dev/null +++ b/src/frontend/src/content/docs/diagnostics/aspirebrowserlogs001.mdx @@ -0,0 +1,74 @@ +--- +title: Compiler Error ASPIREBROWSERLOGS001 +description: Learn more about compiler Error ASPIREBROWSERLOGS001. Browser logs types and members are for evaluation purposes only and are subject to change or removal in future updates. +--- + +import { Badge } from '@astrojs/starlight/components'; + + + +> Browser logs types and members are for evaluation purposes only and are subject to change or removal in future updates. Suppress this diagnostic to proceed. + +This diagnostic error is reported when using experimental browser logs APIs in Aspire from the `Aspire.Hosting.Browsers` package, including: + +- `WithBrowserLogs` extension method +- `BrowserUserDataMode` enum +- Other types and members that configure the tracked browser session + +These APIs let you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost so that browser console output flows into the resource's console log stream in the Aspire dashboard. For more information, see [Browser logs](/integrations/devtools/browser-logs/). + +## Example + +The following code generates `ASPIREBROWSERLOGS001`: + +```csharp title="C# — AppHost.cs" +var builder = DistributedApplication.CreateBuilder(args); + +builder.AddViteApp("web", "../web") + .WithBrowserLogs(); + +builder.Build().Run(); +``` + +## To correct this error + +Suppress the error with either of the following methods: + +- Set the severity of the rule in the _.editorconfig_ file. + + ```ini title=".editorconfig" + [*.{cs,vb}] + dotnet_diagnostic.ASPIREBROWSERLOGS001.severity = none + ``` + + For more information about editor config files, see [Configuration files for code analysis rules](/diagnostics/overview/#suppress-in-the-editorconfig-file). + +- Add the following `PropertyGroup` to your project file: + + ```xml title="C# project file" + + $(NoWarn);ASPIREBROWSERLOGS001 + + ``` + +- Suppress in code with the `#pragma warning disable ASPIREBROWSERLOGS001` directive: + + ```csharp title="C# — Suppressing the error" + #pragma warning disable ASPIREBROWSERLOGS001 + + var builder = DistributedApplication.CreateBuilder(args); + + builder.AddViteApp("web", "../web") + .WithBrowserLogs(); + + builder.Build().Run(); + ``` + +## See also + +- [Browser logs](/integrations/devtools/browser-logs/) diff --git a/src/frontend/src/content/docs/diagnostics/overview.mdx b/src/frontend/src/content/docs/diagnostics/overview.mdx index efa369cf9..1198bc7b8 100644 --- a/src/frontend/src/content/docs/diagnostics/overview.mdx +++ b/src/frontend/src/content/docs/diagnostics/overview.mdx @@ -29,6 +29,7 @@ The following table lists the possible MSBuild and analyzer warnings and errors | [ASPIREAZURE001](/diagnostics/aspireazure001/) | (Experimental) Error | Publishers are for evaluation purposes only and are subject to change or removal in future updates. | | [ASPIREAZURE002](/diagnostics/aspireazure002/) | (Experimental) Error | Azure Container App Jobs are for evaluation purposes only and are subject to change or removal in future updates. | | [ASPIREAZURE003](/diagnostics/aspireazure003/) | (Experimental) Error | Azure Virtual Network types and members are for evaluation purposes only and are subject to change or removal in future updates. | +| [ASPIREBROWSERLOGS001](/diagnostics/aspirebrowserlogs001/) | (Experimental) Error | Browser logs types and members are for evaluation purposes only and are subject to change or removal in future updates. | | [ASPIRECERTIFICATES001](/diagnostics/aspirecertificates001/) | (Experimental) Warning | Certificate configuration types and members are for evaluation purposes only and are subject to change or removal in future updates. | | [ASPIRECOMPUTE001](/diagnostics/aspirecompute001/) | (Experimental) Error | Compute related types and members are for evaluation purposes only and is subject to change or removal in future updates. | | [ASPIRECOMPUTE002](/diagnostics/aspirecompute002/) | (Experimental) Warning | The GetHostAddressExpression method is for evaluation purposes only and is subject to change or removal in future updates. | diff --git a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx index 7db243fdb..814c42720 100644 --- a/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx +++ b/src/frontend/src/content/docs/integrations/devtools/browser-logs.mdx @@ -4,12 +4,13 @@ description: Learn how to capture and configure browser console logs in Aspire u --- import { Tabs, TabItem } from '@astrojs/starlight/components'; +import InstallPackage from '@components/InstallPackage.astro'; import LearnMore from '@components/LearnMore.astro'; The browser logs feature in Aspire lets you attach a tracked Chromium browser session to any HTTP/HTTPS resource in your AppHost. When the session is active, browser console output (logs, errors, exceptions, and network events) flows into the resource's console log stream in the Aspire dashboard, and you can capture screenshots as command artifacts — all without leaving the dashboard. :::caution[Experimental API] -The browser logs API is experimental. In C#, `WithBrowserLogs` is gated behind the `ASPIREBROWSERLOGS001` diagnostic ID, which you must suppress to use the API. +The browser logs API is experimental. In C#, `WithBrowserLogs` is gated behind the [`ASPIREBROWSERLOGS001`](/diagnostics/aspirebrowserlogs001/) diagnostic ID, which you must suppress to use the API. ::: ## Prerequisites @@ -24,23 +25,7 @@ The browser logs feature ships in the `Aspire.Hosting.Browsers` hosting package. -```bash title="Terminal" -aspire add browsers -``` - - - Learn more about [`aspire add`](/reference/cli/commands/aspire-add/) in the command reference. - - -Or, choose a manual installation approach: - -```csharp title="C# — AppHost.cs" -#:package Aspire.Hosting.Browsers@* -``` - -```xml title="XML — AppHost.csproj" - -``` +