Skip to content

Sample: browser-devtools-debugging - Inspect API traffic in Chrome DevTools #45

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 5 commits into
base: main
Choose a base branch
from
Draft

Sample: browser-devtools-debugging - Inspect API traffic in Chrome DevTools #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
81d348a
Add browser-devtools-debugging sample for DevToolsPlugin
Copilot Jan 6, 2026
c277499
Update sample author to waldekmastykarz and dates to 2026-01-10
Copilot Jan 10, 2026
520da38
Remove default preferredBrowser value from devproxyrc.json
Copilot Jan 10, 2026
220386a
Remove empty devTools section and simplify devproxy command
Copilot Jan 17, 2026
52ef657
Fix PRESET metadata value from Yes to No
Copilot Jan 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions samples/browser-devtools-debugging/.devproxy/devproxyrc-chrome.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
13 changes: 13 additions & 0 deletions samples/browser-devtools-debugging/.devproxy/devproxyrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"$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"
}
],
"urlsToWatch": [
"https://jsonplaceholder.typicode.com/*"
]
}
119 changes: 119 additions & 0 deletions samples/browser-devtools-debugging/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
# 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

- [Waldek Mastykarz](https://github.com/waldekmastykarz)

## Version history

Version|Date|Comments
-------|----|--------
1.0|January 10, 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`
- 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 (default) 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"
}
],
"urlsToWatch": [
"https://jsonplaceholder.typicode.com/*"
]
}
```

### 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)
72 changes: 72 additions & 0 deletions samples/browser-devtools-debugging/assets/sample.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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-10",
"updateDateTime": "2026-01-10",
"products": [
"Dev Proxy"
],
"metadata": [
{
"key": "SAMPLE ID",
"value": "browser-devtools-debugging"
},
{
"key": "PRESET",
"value": "No"
},
{
"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": "waldekmastykarz",
"pictureUrl": "https://github.com/waldekmastykarz.png",
"name": "Waldek Mastykarz"
}
],
"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"
}
]
}
]
Binary file added samples/browser-devtools-debugging/assets/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.