[英]How to debug Blazor WASM inside iframe?
當 Blazor WASM 由 ASP.NET Core 托管並駐留在 iframe 內部時,調試器不起作用。 例如,我的 Page1 具有以下 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>
和 Page2,它將 Page1 放入 iframe:
<iframe src="/Page1" width="800" height="600">
</iframe>
在這種情況下:
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.
[ {
"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"
} ]
具有最少重現代碼的存儲庫: https://github.com/GTmAster/blazor-iframe-debug
如何調試托管在 iframe 內部的 Blazor WASM?
我不太了解底層的東西,也不太了解 Microsoft/Blazor 團隊可能做了什么更改,但就目前而言,您不需要對 launchSettings.json 進行任何其他更改,在 Chrome 中,只需啟動您的blazor url,然后按 Shift+Cmd+D(在 Mac 中),將打開一個標簽頁,自動打開開發工具,在那里你可以找到你所有的 C# 組件/代碼進行調試。
享受。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.