aspnetcore icon indicating copy to clipboard operation
aspnetcore copied to clipboard

Blazor debugging is not possible in iframe

Open GTmAster opened this issue 4 years ago • 5 comments

When Blazor WASM is hosted by ASP.NET Core and resides inside iframe, the debugger doesn't work. For example, I have Page1 with following html:

<app>Loading...</app>
<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>

and Page2, which puts Page1 into iframe:

<iframe src="/Page1" width="800" height="600">
</iframe>

In this case:

  • if Page1 is opened app and debugger work as inspected.
  • If Page2 is opened, app works perfectly, but debugger doesn't: breakpoints are not working. Chromium dev tool debugging doesn't work too with error:
No inspectable pages found
The list of targets returned by http://127.0.0.1:9222/json contains no entries matching the URL https://localhost:44329/.
Make sure your browser is displaying the target application.

http://127.0.0.1:9222/json:

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/8B7C4E90151A1A8A3F9D2D8FD93130D6",
   "id": "8B7C4E90151A1A8A3F9D2D8FD93130D6",
   "title": "New Tab",
   "type": "page",
   "url": "http://127.0.0.1:9222/json",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/8B7C4E90151A1A8A3F9D2D8FD93130D6"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/DD0B85D174E30BF9E688213D52A312BD",
   "id": "DD0B85D174E30BF9E688213D52A312BD",
   "title": "127.0.0.1:52977/?url=https%3A%2F%2Flocalhost%3A44329%2F",
   "type": "page",
   "url": "http://127.0.0.1:52977/?url=https%3A%2F%2Flocalhost%3A44329%2F",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/DD0B85D174E30BF9E688213D52A312BD"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/CD68FDE522F1DCDE6D3B49DF4872CE26",
   "faviconUrl": "https://localhost:44329/favicon.ico",
   "id": "CD68FDE522F1DCDE6D3B49DF4872CE26",
   "title": "BlazorApp",
   "type": "page",
   "url": "https://localhost:44329/Frame",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/CD68FDE522F1DCDE6D3B49DF4872CE26"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=127.0.0.1:9222/devtools/page/6D57386F9C6D65737DF416657993C190",
   "id": "6D57386F9C6D65737DF416657993C190",
   "title": "McAfee DLP Endpoint Chrome Extension",
   "type": "background_page",
   "url": "chrome-extension://hddjhjcbioambdhjejhdlobijkdnbggp/_generated_background_page.html",
   "webSocketDebuggerUrl": "ws://127.0.0.1:9222/devtools/page/6D57386F9C6D65737DF416657993C190"
} ]

To Reproduce

Minimum reproduce repo is https://github.com/GTmAster/blazor-iframe-debug. /Home/Index returns page with WASM app. /Frame/Index returns page with /Home/Index in iframe.

Further technical details

  • ASP.NET Core version: 3.1.402
  • dotnet --info:
.NET Core SDK (reflecting any global.json):
 Version:   3.1.402
 Commit:    9b5de826fd

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.17763
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\3.1.402\

Host (useful for support):
  Version: 3.1.8
  Commit:  9c1330dedd

.NET Core SDKs installed:
  3.1.100-preview3-014645 [C:\Program Files\dotnet\sdk]
  3.1.302 [C:\Program Files\dotnet\sdk]
  3.1.401 [C:\Program Files\dotnet\sdk]
  3.1.402 [C:\Program Files\dotnet\sdk]

.NET Core runtimes installed:
  Microsoft.AspNetCore.All 2.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.All 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.20 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.0-preview3.19555.2 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.20 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 2.1.22 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.0-preview3.19553.2 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.0-preview3.19553.2 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET Core runtimes or SDKs:
  https://aka.ms/dotnet-download
  • The IDE: Visual Studio 2019 16.7.3

GTmAster avatar Sep 16 '20 15:09 GTmAster