Client Side Debugging

  • Make sure the Startup Project is set to MyApp01.Client project. Not the server project.
  • Run debugger and press Shift + Alt + D
  • Error message will pop up saying unable to find debuggable browser tab.
  • Copy the command line code and run in command console.
  • A new browser will be launched in debugging mode.
  • Now press Shift + Alt + D and you will see the browser debugging feature with “file://” as a folder in the “Sources” tab.
  • Set breakpoints in the files of “file://” folder.
  • Navigate back to the first tab to hit the breakpoints.
  • The first browser tab will be in a “Paused in debugger” mode. Go the the second browser tab to view breakpoint.

Error

Unable to find debuggable browser tab

Could not get a list of browser tabs from http://localhost: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 or Run command console and enter the following:

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

If you are using Microsoft Edge (80+) for your development, follow these instructions:

Press Win+R or Run command console and enter the following:

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

This should launch a new browser window with debugging enabled.

Sources:

https://docs.microsoft.com/en-us/aspnet/core/blazor/debug?view=aspnetcore-5.0&tabs=visual-studio

Last modified: November 30, 2020

Author

Comments

Write a Reply or Comment