Unable to find debuggable browser tab

Question

I am working with a Blazor wasm project. I have been trying to start the debugger browser dev tools with blazor and i keep getting an error

I hit

Debugging hotkey: Shift+Alt+D (when application has focus)

Which gives me

Unable to find debuggable browser tab Could not get a list of browser tabs from http://localhost:9222/json. Ensure Chrome is running with debugging enabled.

Resolution Close all Chrome instances, then press Win+R and enter the following:

"%programfiles(x86)%\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222 http://localhost:52878/

... then use that new tab for debugging.

Underlying exception: System.Net.Http.HttpRequestException: No connection could be made because the target machine actively refused it. ---> System.Net.Sockets.SocketException (10061): No connection could be made because the target machine actively refused it. at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken) --- End of inner exception stack trace --- at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken) at System.Net.Http.HttpConnectionPool.ConnectAsync(HttpRequestMessage request, Boolean allowHttp2, CancellationToken cancellationToken)
at System.Net.Http.HttpConnectionPool.CreateHttp11ConnectionAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.HttpConnectionPool.GetHttpConnectionAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage request, Boolean doRequestAuth, CancellationToken cancellationToken)
at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.DiagnosticsHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken) at System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task1 sendTask, HttpRequestMessage request, CancellationTokenSource cts, Boolean disposeCts) at System.Net.Http.HttpClient.GetStringAsyncCore(Task1 getTask) at Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.GetOpenedBrowserTabs(String debuggerHost) at Microsoft.AspNetCore.Builder.BlazorMonoDebugProxyAppBuilderExtensions.DebugHome(HttpContext context)

I shut down all chome browser and run the command instructed but it doesnt help i get the same error

I suspect the issue is related to the fact that as soon as chrome starts it spawns a large number of other chromes i can see them

I tried killing them all so there was no chrome running then firing off the command that didnt work either because again i ended up with like 10 chromes running.

How do you find the debugged browser tab with blazor?

It really should be that simple - close your browser, run the command it gave you, then once the Blazor app is running again, Shift-Alt-D and a new tab should open. sometimes that new tab says "inactive" - I've found dragging the new tab off into a separate window then activates it. I don't know why yours isn't doing that, but thought you would like to know how it should work. However - there is not much that works in debugging, so it's pretty much a waste of effort to get it going. — Mister Magoo
No dice I tried everything I can think of it can't find it. I want to be able to show the debugger in a conference talk I am doing in a few weeks and as they say it should be possible. Any ideas? — DaImTo
You should copy and paste the content of error on Google Chrome browser, not take a screenshot. — Do Nhu Vy

Do Nhu Vy Do Nhu Vy · Accepted Answer · 2020-07-31T12:32:06

I am using Blazor webassembly, .NET Core 5.0.100-preview.7.20366.6 ; Google Chrome version 84.0.4147.105 (Official Build) (64-bit); Visual Studio 2019 preview Community edition.

You will see message like this

Unable to find debuggable browser tab
Could not get a list of browser tabs from http://127.0.0.1:9222/json. Ensure your browser is running with debugging enabled.

Resolution
If you are using Google Chrome for your development, follow these instructions:
Press Win+R and enter the following:

chrome --remote-debugging-port=9222 --user-data-dir="C:\Users\donhuvy\AppData\Local\Temp\blazor-chrome-debug" https://localhost:44376/

If you are using Microsoft Edge (80+) for your development, follow these instructions:
Press Win+R and enter the following:

msedge --remote-debugging-port=9222 --user-data-dir="C:\Users\donhuvy\AppData\Local\Temp\blazor-edge-debug" --no-first-run https://localhost:44376/

This should launch a new browser window with debugging enabled..

Let's do like the guide.

(1) Copy these text

chrome --remote-debugging-port=9222 --user-data-dir="C:\Users\donhuvy\AppData\Local\Temp\blazor-chrome-debug" https://localhost:44376/

(2) Press Windows+R, paste by Ctrl+V , then, press Enter

(3) Go to http://127.0.0.1:9222/json , you will see

this is debug information.

(4) When you press Shift+Alt+D

Unable to find debuggable browser tab

1 Answers