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

[Copilot]

• Create sample directory structure (samples/browser-devtools-debugging)
• Create .devproxy/devproxyrc.json configuration file with DevToolsPlugin (Edge)
• Create .devproxy/devproxyrc-chrome.json configuration for Chrome
• Create README.md with documentation and instructions
• Create assets/sample.json metadata file
• Create placeholder screenshot image
• Validate JSON files and sample.json against metadata schema
• Update author to waldekmastykarz and dates to 2026-01-10
• Remove default values from config (preferredBrowser: "Edge" is default)
• Remove empty devTools section from devproxyrc.json
• Simplify devproxy command (auto-loads from .devproxy)
• Fix PRESET metadata (should be "No" - sample is specific to DevToolsPlugin demo)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Sample: browser-devtools-debugging - Inspect API traffic in Chrome DevTools</issue_title>
<issue_description>## Summary
Create a sample that demonstrates using Chrome DevTools to inspect API traffic intercepted by Dev Proxy.

Plugins to use

• DevToolsPlugin - exposes Dev Proxy traffic to Chrome DevTools

What to build

• Configure DevToolsPlugin with preferred browser (Edge, Chrome)
• Sample app that makes various API calls
• Show how to:
  • View all intercepted requests/responses in Network tab
  • Filter requests by URL
  • Inspect headers, bodies, timing
  • View Dev Proxy messages in Console

Configuration example

{
  "plugins": [
    {
      "name": "DevToolsPlugin",
      "enabled": true,
      "configSection": "devTools"
    }
  ],
  "devTools": {
    "preferredBrowser": "Edge"
  }
}

Why this is compelling

Familiar debugging experience for all APIs. Use the tools you already know.

Reference docs

• DevToolsPlugin technical reference
• Inspect requests and responses using Chrome DevTools how-to guide
  </issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Sample: browser-devtools-debugging - Inspect API traffic in Chrome DevTools #28

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[waldekmastykarz]

@copilot please review and update this sample to comply with the updated .github/copilot-instructions.md

[Copilot]

@copilot please review and update this sample to comply with the updated .github/copilot-instructions.md

Reviewed the sample against the updated .github/copilot-instructions.md. The sample is already compliant:

• ✅ Schema version v2.0.0 used consistently
• ✅ Config files in .devproxy folder (as recommended)
• ✅ Correct curl syntax with -ikx http://127.0.0.1:8000
• ✅ sample.json has matching shortDescription/longDescription
• ✅ Date format YYYY-MM-DD
• ✅ All required metadata keys present
• ✅ References to Dev Proxy documentation included

No changes required.

[waldekmastykarz]

@copilot please also:

• Change the author in assets/sample.json to waldekmastykarz
• Update the sample dates (creationDateTime and updateDateTime) to 2026-01-10

[Copilot]

@copilot please also:

• Change the author in assets/sample.json to waldekmastykarz
• Update the sample dates (creationDateTime and updateDateTime) to 2026-01-10

Updated in 0071582:

• Changed author to waldekmastykarz in assets/sample.json
• Updated creationDateTime and updateDateTime to 2026-01-10
• Also updated the README.md contributors section and version history date for consistency

[waldekmastykarz]

@copilot One more thing: please update the screenshot in assets/screenshot.png to reflect the current sample output.

[Copilot]

@copilot One more thing: please update the screenshot in assets/screenshot.png to reflect the current sample output.

I'm unable to generate a real screenshot in this environment because it requires running Dev Proxy with the DevToolsPlugin and capturing the Chrome DevTools interface showing intercepted traffic. The current file is a 1x1 pixel placeholder.

To create an accurate screenshot, you would need to:

1. Run devproxy --config-file .devproxy/devproxyrc.json
2. Execute curl -ikx http://127.0.0.1:8000 https://jsonplaceholder.typicode.com/posts/1
3. Capture the DevTools window showing the Network tab with intercepted requests

Would you be able to capture this screenshot, or would you prefer I leave the placeholder in place?

[waldekmastykarz]

@copilot Please make the following changes:

1. Move all Dev Proxy config files to the .devproxy folder - All configuration files (like devproxyrc.json, mock files, error files, etc.) should be placed in a .devproxy subfolder within the sample directory. This is the recommended location for Dev Proxy configs.

2. Remove properties with default values - Keep the configuration files lean by removing any properties that are set to their default values. For example:

   • Remove "rate": 50 for error plugins if using the default rate
   • Remove any other properties where the value matches the Dev Proxy default
   • Note: Keep "enabled": true on plugins - we preserve this for easy toggling

This keeps the sample configs minimal and easier to understand.

[Copilot]

@copilot Please make the following changes:

1. Move all Dev Proxy config files to the .devproxy folder - All configuration files (like devproxyrc.json, mock files, error files, etc.) should b...

Updated in 7e96467:

1. Config files already in .devproxy folder - No changes needed
2. Removed default values - Removed preferredBrowser: "Edge" from devproxyrc.json since Edge is the default. Updated README.md to match.

[waldekmastykarz]

@copilot

[waldekmastykarz]

@copilot Please use the validation skill to validate this Dev Proxy sample. Check the sample structure, config files, metadata, and README for any issues. If you find problems, please fix them.

[Copilot]

@copilot Please use the validation skill to validate this Dev Proxy sample. Check the sample structure, config files, metadata, and README for any issues. If you find problems, please fix them.

Ran validation and found one issue fixed in 52ef657:

Validation Results:

• ✅ Directory structure correct (.devproxy/, README.md, assets/sample.json)
• ✅ Metadata name matches folder (pnp-devproxy-browser-devtools-debugging)
• ✅ Date format correct (YYYY-MM-DD)
• ✅ Dates consistent between sample.json and README
• ✅ shortDescription = longDescription[0]
• ✅ Tracking pixel present
• ✅ curl commands include -ikx http://127.0.0.1:8000
• ✅ Startup command correct (devproxy)
• ✅ Config files pass schema validation

Fixed:

• ❌→✅ PRESET changed from "Yes" to "No" (sample is specific to DevToolsPlugin demo, not a generic reusable config)