From 81d348ab4ef1f1586d6ac499c7f4b685a3759e4d Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 6 Jan 2026 11:50:19 +0000 Subject: [PATCH 1/5] Add browser-devtools-debugging sample for DevToolsPlugin Co-authored-by: waldekmastykarz <11164679+waldekmastykarz@users.noreply.github.com> --- .../.devproxy/devproxyrc-chrome.json | 18 +++ .../.devproxy/devproxyrc.json | 18 +++ samples/browser-devtools-debugging/README.md | 124 ++++++++++++++++++ .../assets/sample.json | 72 ++++++++++ .../assets/screenshot.png | Bin 0 -> 70 bytes 5 files changed, 232 insertions(+) create mode 100644 samples/browser-devtools-debugging/.devproxy/devproxyrc-chrome.json create mode 100644 samples/browser-devtools-debugging/.devproxy/devproxyrc.json create mode 100644 samples/browser-devtools-debugging/README.md create mode 100644 samples/browser-devtools-debugging/assets/sample.json create mode 100644 samples/browser-devtools-debugging/assets/screenshot.png diff --git a/samples/browser-devtools-debugging/.devproxy/devproxyrc-chrome.json b/samples/browser-devtools-debugging/.devproxy/devproxyrc-chrome.json new file mode 100644 index 0000000..855fc74 --- /dev/null +++ b/samples/browser-devtools-debugging/.devproxy/devproxyrc-chrome.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", + "plugins": [ + { + "name": "DevToolsPlugin", + "enabled": true, + "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", + "configSection": "devTools" + } + ], + "urlsToWatch": [ + "https://jsonplaceholder.typicode.com/*" + ], + "devTools": { + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json", + "preferredBrowser": "Chrome" + } +} diff --git a/samples/browser-devtools-debugging/.devproxy/devproxyrc.json b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json new file mode 100644 index 0000000..b3e34e4 --- /dev/null +++ b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json @@ -0,0 +1,18 @@ +{ + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", + "plugins": [ + { + "name": "DevToolsPlugin", + "enabled": true, + "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", + "configSection": "devTools" + } + ], + "urlsToWatch": [ + "https://jsonplaceholder.typicode.com/*" + ], + "devTools": { + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json", + "preferredBrowser": "Edge" + } +} diff --git a/samples/browser-devtools-debugging/README.md b/samples/browser-devtools-debugging/README.md new file mode 100644 index 0000000..72ba1d3 --- /dev/null +++ b/samples/browser-devtools-debugging/README.md @@ -0,0 +1,124 @@ +# Inspect API traffic in Chrome DevTools + +## Summary + +This sample demonstrates how to use Chrome DevTools to inspect API traffic intercepted by Dev Proxy. Using the DevToolsPlugin, you can view all requests and responses in the familiar Chrome DevTools Network tab, making it easy to debug and analyze API calls. + +![Dev Proxy messages and requests shown in Chrome DevTools](assets/screenshot.png) + +## Compatibility + +![Dev Proxy v2.0.0](https://aka.ms/devproxy/badge/v2.0.0) + +## Contributors + +- [Copilot](https://github.com/copilot) + +## Version history + +Version|Date|Comments +-------|----|-------- +1.0|January 6, 2026|Initial release + +## Prerequisites + +- [Dev Proxy](https://aka.ms/devproxy) + +## Minimal path to awesome + +- Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/proxy-samples/tree/main/samples/browser-devtools-debugging) and unzip it) +- Navigate to the sample folder: `cd samples/browser-devtools-debugging` +- Start Dev Proxy: `devproxy --config-file .devproxy/devproxyrc.json` +- Dev Proxy automatically opens a browser window with Chrome DevTools +- Send a request through Dev Proxy: `curl -ikx http://127.0.0.1:8000 https://jsonplaceholder.typicode.com/posts/1` +- View the request in the Chrome DevTools **Network** tab +- View Dev Proxy messages in the **Console** tab + +### Using Chrome instead of Edge + +To use Google Chrome instead of Microsoft Edge: + +- Start Dev Proxy with the Chrome configuration: `devproxy --config-file .devproxy/devproxyrc-chrome.json` + +## Features + +This sample illustrates the following concepts: + +- **View intercepted requests in Network tab**: See all API requests and responses intercepted by Dev Proxy, including headers, bodies, and timing information +- **Filter requests by URL**: Use the Network tab's filter to find specific API calls +- **Inspect request/response headers**: View detailed header information for each request +- **View request/response bodies**: Examine the payload of API requests and responses +- **See Dev Proxy messages in Console**: View plugin messages, errors, and status information in the Console tab +- **Choose your browser**: Configure Dev Proxy to use Microsoft Edge, Microsoft Edge Dev, or Google Chrome + +## Configuration + +The sample includes two configuration files: + +### Default (Microsoft Edge) + +`.devproxy/devproxyrc.json` - Uses Microsoft Edge to display DevTools + +```json +{ + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/rc.schema.json", + "plugins": [ + { + "name": "DevToolsPlugin", + "enabled": true, + "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", + "configSection": "devTools" + } + ], + "urlsToWatch": [ + "https://jsonplaceholder.typicode.com/*" + ], + "devTools": { + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json", + "preferredBrowser": "Edge" + } +} +``` + +### Google Chrome + +`.devproxy/devproxyrc-chrome.json` - Uses Google Chrome to display DevTools + +Change `preferredBrowser` to `"Chrome"` to use Google Chrome. + +## Supported browsers + +The DevToolsPlugin supports the following browsers: + +- `Edge` - Microsoft Edge +- `EdgeDev` - Microsoft Edge Dev channel +- `Chrome` - Google Chrome + +## Known issues + +### DevTools don't open in Microsoft Edge on Windows + +If DevTools don't open or open empty when using Microsoft Edge on Windows: + +1. Open Microsoft Edge +1. Go to **Settings** +1. Open **System and performance** +1. Disable **Startup boost** +1. Close all Microsoft Edge windows and processes +1. Start Dev Proxy + +## Help + +We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues. + +You can try looking at [issues related to this sample](https://github.com/pnp/proxy-samples/issues?q=label%3A%22sample%3A%20browser-devtools-debugging%22) to see if anybody else is having the same issues. + +If you encounter any issues using this sample, [create a new issue](https://github.com/pnp/proxy-samples/issues/new). + +Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/proxy-samples/issues/new). + +## Disclaimer + +**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.** + +![](https://m365-visitor-stats.azurewebsites.net/SamplesGallery/pnp-devproxy-browser-devtools-debugging) diff --git a/samples/browser-devtools-debugging/assets/sample.json b/samples/browser-devtools-debugging/assets/sample.json new file mode 100644 index 0000000..fe40540 --- /dev/null +++ b/samples/browser-devtools-debugging/assets/sample.json @@ -0,0 +1,72 @@ +[ + { + "name": "pnp-devproxy-browser-devtools-debugging", + "source": "pnp", + "title": "Inspect API traffic in Chrome DevTools", + "shortDescription": "Use Chrome DevTools to inspect API traffic intercepted by Dev Proxy, viewing requests, responses, headers, and timing in the familiar Network tab.", + "url": "https://github.com/pnp/proxy-samples/tree/main/samples/browser-devtools-debugging", + "downloadUrl": "https://pnp.github.io/download-partial/?url=https://github.com/pnp/proxy-samples/tree/main/samples/browser-devtools-debugging", + "longDescription": [ + "Use Chrome DevTools to inspect API traffic intercepted by Dev Proxy, viewing requests, responses, headers, and timing in the familiar Network tab." + ], + "creationDateTime": "2026-01-06", + "updateDateTime": "2026-01-06", + "products": [ + "Dev Proxy" + ], + "metadata": [ + { + "key": "SAMPLE ID", + "value": "browser-devtools-debugging" + }, + { + "key": "PRESET", + "value": "Yes" + }, + { + "key": "MOCKS", + "value": "No" + }, + { + "key": "PLUGIN", + "value": "No" + }, + { + "key": "PROXY VERSION", + "value": "v2.0.0" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/pnp/proxy-samples/raw/main/samples/browser-devtools-debugging/assets/screenshot.png", + "alt": "Dev Proxy messages and requests shown in Chrome DevTools" + } + ], + "authors": [ + { + "gitHubAccount": "copilot", + "pictureUrl": "https://github.com/copilot.png", + "name": "Copilot" + } + ], + "references": [ + { + "name": "Get started with the Dev Proxy", + "description": "The tutorial will introduce you to the Dev Proxy and show you how to use its features.", + "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/get-started" + }, + { + "name": "DevToolsPlugin documentation", + "description": "Technical reference for the DevToolsPlugin in Dev Proxy.", + "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/technical-reference/devtoolsplugin" + }, + { + "name": "Inspect requests and responses using Chrome DevTools", + "description": "How-to guide for using Chrome DevTools with Dev Proxy.", + "url": "https://learn.microsoft.com/microsoft-cloud/dev/dev-proxy/how-to/inspect-requests-responses-chrome-devtools" + } + ] + } +] diff --git a/samples/browser-devtools-debugging/assets/screenshot.png b/samples/browser-devtools-debugging/assets/screenshot.png new file mode 100644 index 0000000000000000000000000000000000000000..b762bc48ecc6f34e6cd6ebadbe36c15a45e26ab3 GIT binary patch literal 70 zcmeAS@N?(olHy`uVBq!ia0vp^j3CUx1|;Q0k92}1TpU9xZY8Ju_`hF{f#pBr`#F`z R4*(??JYD@<);T3K0RZaU5)1$U literal 0 HcmV?d00001 From c277499ed23096fefc59793caf89c60dacb760b6 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 10:16:57 +0000 Subject: [PATCH 2/5] Update sample author to waldekmastykarz and dates to 2026-01-10 Co-authored-by: waldekmastykarz <11164679+waldekmastykarz@users.noreply.github.com> --- samples/browser-devtools-debugging/README.md | 4 ++-- samples/browser-devtools-debugging/assets/sample.json | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/samples/browser-devtools-debugging/README.md b/samples/browser-devtools-debugging/README.md index 72ba1d3..e094e31 100644 --- a/samples/browser-devtools-debugging/README.md +++ b/samples/browser-devtools-debugging/README.md @@ -12,13 +12,13 @@ This sample demonstrates how to use Chrome DevTools to inspect API traffic inter ## Contributors -- [Copilot](https://github.com/copilot) +- [Waldek Mastykarz](https://github.com/waldekmastykarz) ## Version history Version|Date|Comments -------|----|-------- -1.0|January 6, 2026|Initial release +1.0|January 10, 2026|Initial release ## Prerequisites diff --git a/samples/browser-devtools-debugging/assets/sample.json b/samples/browser-devtools-debugging/assets/sample.json index fe40540..b0b6373 100644 --- a/samples/browser-devtools-debugging/assets/sample.json +++ b/samples/browser-devtools-debugging/assets/sample.json @@ -9,8 +9,8 @@ "longDescription": [ "Use Chrome DevTools to inspect API traffic intercepted by Dev Proxy, viewing requests, responses, headers, and timing in the familiar Network tab." ], - "creationDateTime": "2026-01-06", - "updateDateTime": "2026-01-06", + "creationDateTime": "2026-01-10", + "updateDateTime": "2026-01-10", "products": [ "Dev Proxy" ], @@ -46,9 +46,9 @@ ], "authors": [ { - "gitHubAccount": "copilot", - "pictureUrl": "https://github.com/copilot.png", - "name": "Copilot" + "gitHubAccount": "waldekmastykarz", + "pictureUrl": "https://github.com/waldekmastykarz.png", + "name": "Waldek Mastykarz" } ], "references": [ From 520da3800abb2edd37a4186a2a3d18b8e3229b91 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 10 Jan 2026 14:59:01 +0000 Subject: [PATCH 3/5] Remove default preferredBrowser value from devproxyrc.json Co-authored-by: waldekmastykarz <11164679+waldekmastykarz@users.noreply.github.com> --- samples/browser-devtools-debugging/.devproxy/devproxyrc.json | 3 +-- samples/browser-devtools-debugging/README.md | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/samples/browser-devtools-debugging/.devproxy/devproxyrc.json b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json index b3e34e4..b4baad8 100644 --- a/samples/browser-devtools-debugging/.devproxy/devproxyrc.json +++ b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json @@ -12,7 +12,6 @@ "https://jsonplaceholder.typicode.com/*" ], "devTools": { - "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json", - "preferredBrowser": "Edge" + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json" } } diff --git a/samples/browser-devtools-debugging/README.md b/samples/browser-devtools-debugging/README.md index e094e31..d455ae9 100644 --- a/samples/browser-devtools-debugging/README.md +++ b/samples/browser-devtools-debugging/README.md @@ -57,7 +57,7 @@ The sample includes two configuration files: ### Default (Microsoft Edge) -`.devproxy/devproxyrc.json` - Uses Microsoft Edge to display DevTools +`.devproxy/devproxyrc.json` - Uses Microsoft Edge (default) to display DevTools ```json { @@ -74,8 +74,7 @@ The sample includes two configuration files: "https://jsonplaceholder.typicode.com/*" ], "devTools": { - "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json", - "preferredBrowser": "Edge" + "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json" } } ``` From 220386ad703ed29e336bc78605e175a67a5aeca5 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sat, 17 Jan 2026 11:15:05 +0000 Subject: [PATCH 4/5] Remove empty devTools section and simplify devproxy command Co-authored-by: waldekmastykarz <11164679+waldekmastykarz@users.noreply.github.com> --- .../.devproxy/devproxyrc.json | 8 ++------ samples/browser-devtools-debugging/README.md | 10 +++------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/samples/browser-devtools-debugging/.devproxy/devproxyrc.json b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json index b4baad8..16c1076 100644 --- a/samples/browser-devtools-debugging/.devproxy/devproxyrc.json +++ b/samples/browser-devtools-debugging/.devproxy/devproxyrc.json @@ -4,14 +4,10 @@ { "name": "DevToolsPlugin", "enabled": true, - "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", - "configSection": "devTools" + "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll" } ], "urlsToWatch": [ "https://jsonplaceholder.typicode.com/*" - ], - "devTools": { - "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json" - } + ] } diff --git a/samples/browser-devtools-debugging/README.md b/samples/browser-devtools-debugging/README.md index d455ae9..967bae2 100644 --- a/samples/browser-devtools-debugging/README.md +++ b/samples/browser-devtools-debugging/README.md @@ -28,7 +28,7 @@ Version|Date|Comments - Clone this repository (or [download this solution as a .ZIP file](https://pnp.github.io/download-partial/?url=https://github.com/pnp/proxy-samples/tree/main/samples/browser-devtools-debugging) and unzip it) - Navigate to the sample folder: `cd samples/browser-devtools-debugging` -- Start Dev Proxy: `devproxy --config-file .devproxy/devproxyrc.json` +- Start Dev Proxy: `devproxy` - Dev Proxy automatically opens a browser window with Chrome DevTools - Send a request through Dev Proxy: `curl -ikx http://127.0.0.1:8000 https://jsonplaceholder.typicode.com/posts/1` - View the request in the Chrome DevTools **Network** tab @@ -66,16 +66,12 @@ The sample includes two configuration files: { "name": "DevToolsPlugin", "enabled": true, - "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll", - "configSection": "devTools" + "pluginPath": "~appFolder/plugins/DevProxy.Plugins.dll" } ], "urlsToWatch": [ "https://jsonplaceholder.typicode.com/*" - ], - "devTools": { - "$schema": "https://raw.githubusercontent.com/dotnet/dev-proxy/main/schemas/v2.0.0/devtoolsplugin.schema.json" - } + ] } ``` From 52ef65712752c79f2c0a33f55e42d4ef4b69e56f Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Sun, 18 Jan 2026 15:09:33 +0000 Subject: [PATCH 5/5] Fix PRESET metadata value from Yes to No Co-authored-by: waldekmastykarz <11164679+waldekmastykarz@users.noreply.github.com> --- samples/browser-devtools-debugging/assets/sample.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/browser-devtools-debugging/assets/sample.json b/samples/browser-devtools-debugging/assets/sample.json index b0b6373..5ae40ce 100644 --- a/samples/browser-devtools-debugging/assets/sample.json +++ b/samples/browser-devtools-debugging/assets/sample.json @@ -21,7 +21,7 @@ }, { "key": "PRESET", - "value": "Yes" + "value": "No" }, { "key": "MOCKS",