How can one debug embedded code in razor pages? - debugging

I am looking at Blazor client side with asp.net hosting. So I am going through the template project and Visual Studio Preview does not seem to support breakpoints in razor pages, more specifically the code block:
#code {
private WeatherForecast[] forecasts;
protected override async Task OnInitializedAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>("WeatherForecast"); //breakpoint here
}
}
Is there a workaround or maybe something I am missing?
Thank you!

Blazor Webassembly debugging is currently available only using Chrome browser debugging proxy. The steps are described in Blazor docs:
Run a Blazor WebAssembly app in Debug configuration.
Pass the --configuration Debug option to the dotnet run command: dotnet run --configuration Debug
Access the app in the browser.
Place the keyboard focus on the app, not the developer tools panel. The developer tools panel can be closed when debugging is initiated.
Select the following Blazor-specific keyboard shortcut:
Shift+Alt+D on Windows/Linux
Shift+Cmd+D on macOS
Follow the steps listed on the screen to restart the browser with remote debugging enabled.
Select the following Blazor-specific keyboard shortcut once again to start the debug session:
Shift+Alt+D on Windows/Linux
Shift+Cmd+D on macOS
The "Hit F5 in Visual studio" debugging experience is not ready yet. Bits of it have been demonstrated by Daniel Roth in the .NET community standup video. Basically, Visual studio can attach to the browser's debugging proxy. Currently, in the preview versions, you have to do a series of steps manually, while in the future, those should be streamlined and done by the Visual studio.
Update March 26, 2020
Microsoft released a new preview of WASM Blazor and an improved support for debugging in Visual studio. Details here.

Related

Stop visual studio from reloading swagger UI

I have updated my visual studio to version 16.10.2 (enterprise).
Now when I run my Asp.net Core 5 Web API, every time I modify something in my code, visual studio runs a task in the background, and with that, chrome refresh my swagger UI, and all my data get lost.
How can I stop this behavior?
I have always used swagger UI to test my APIs, but this behavior of visual studio is really annoying!
See the video for better understanding: video
There is an option in visual studio which will refresh chrome every time you save something.
you can disable this behavior by selecting none.
Go to: Tools > Options > Projects & Solutions > ASP.NET Core > Auto build and refresh options = and put it to none

Debugging Electron renderer process through Visual Studio

I have an Electron app that I'm debugging in VSCode. In my app, I create a BrowserView and load one of my websites: browserView.webContents.loadURL(myUrl);
Sometimes, I want to debug this website that's loaded in my BrowserView.
How I've been doing that is I open devtools in Electron and set breakpoints in the Chrome devtools that appears.
However, I wonder if I can spin up the localhost server from Visual Studio that hosts my website, and then debug my site directly from Visual Studio instead of through the devtools.
Is there a way to do this?
It seems like that won't work since the Visual Studio debugger is already attached and attaching it to the BrowserView's renderer process didn't work, but I wanted to check.
Is there a way to do this? It seems like that won't work since the
Visual Studio debugger is already attached and attaching it to the
BrowserView's renderer process didn't work, but I wanted to check.
I am afraid that you cannot get what you want.
Actually in Visual Studio, you cannot debug the renderer process. It does not support that. You have to use the Chrome devtools.
Besides, if you want this feature, you can suggest a feature on our User Voice Forum and hope the team will give you a satisfactory reply.

Console of Dev Tools in Excel for Windows 7

I have built an add-in which works fine in Excel online, whereas it does not work in Excel 2016 for Windows.
I know that in Windows 10, we could use this tool to debug the add-in, however I am using Windows 7.
I just installed Visual Studio 2017, right clicking on the add-in shows a menu where Attach Debugger is. But clicking on Attach Debugger fires nothing.
Does anyone know how to debug in this case?
Two potential options:
You can use Volorn.js to remotely debug your add-in. You can use the Debug Office Add-ins on iPad and Mac article as a starting point. Although this article is targeting Mac and iPad, the concepts are the same for Windows.
You can also use Visual Studio by creating a new Excel Web Add-in. Simply replace the default manifest with your own. Note that you still need to retain the default web site, Visual Studio still this for some library references. It will use your manifest's URL for the source location however.
Office applications use Internet Explorer for the web browser, so all settings from IE should carry over. I have found that if you disable (uncheck) both the Disable script debugging (Internet Explorer) and Disable script debugging (Other) options, your debugger breakpoints will be hit (I tested this in Outlook 2016).
You will need add debugger; statements to the source code to add breakpoints. When these statements are hit, a dialog like this should appear:
Simply select 'Yes' and a new instance of visual studio should open, with the debugger attached to your script.

Enable extensions when debugging website in Chrome from Visual Studio 2017

Switching from Visual Studio 2015 to 2017 I find that launching a Web API project now starts a clean, separate Chrome window. For the most part I like that, and I certainly like the idea, however: this also means extensions are missing in Chrome.
Is there a way to start a Web API project from Visual Studio 2017 and have Chrome launch with extensions enabled?
Or, failing that, could I revert back to the old behavior where my project is opened as a fresh tab in my existing Chrome window?
I've tried Googling but found nothing. I checked the dropdown in Visual Studio with browsers (and checked the "Browse With..." dialog) but found no solution there either.
All you need to do is to sign-in to the instance of Chrome that VS2017 launches as the user you have all your usual extensions installed under (i.e. sign-in as the same user you usually sign-in as).
This sign-in "sticks", so extensions will load in the current - and all subsequent - debugging sessions.
You can revert back to the old behavior by
Debug > Options > Debugging > General > (uncheck) Enable JavaScript debugging for ASP.Net (Chrome and IE).
Is there a way to start a Web API project from Visual Studio 2017 and have Chrome launch with extensions enabled?
Yes, but it works for one project only, mean you need to re-install extensions when you launch a brand new project. I tried Sync in Chrome (not work).
In my opinion, there are something to do with Chrome remote debugging protocol profile. I hope someone knows about Chrome can give a final solution for this.
you can study more here: remote debugging protocol
There is a way that you no need to change anything. But it annoying.
Because Visual Studio 2017 use an instance of Chrome for debug mode when you hit F5, so you can leave that debug mode instance with remote debugging protocol open, and use your default Chrome instance with full extensions. Just copy and paste the link into your favorite Chrome instance.
Cheer! hope it help.

Debug typescript source file in ionic 2 with visual studio 2015

I am in the process on selecting suitable cross-platform development tools for my next mobile project (react-native or ionic 2). I like ionic because of its out-of-the-box use of typescript. I have setup a simple project following basic tutorial and I am able to launch the application via the Ripple emulator.
Now I am asking: is it possible to hit breakpoints in the typescript files?
So far I have been unsuccessful. There is a app.bundle.js (and a corresponding sourcemap) generated after compilation and placed in the .www/build/js folder.
I added this line in my tsconfig.json:
"sourceMap": true
When I place a breakpoint in the app.ts for example, it is not hit.
How is debugging done? through Chrome browser dev tools or directly from within visual studio? Most of the solutions I have found apply to Visual Studio Code. I am using Visual Studio 2015 Enterprise edition
Thanks in advance for any help, suggestion and direction
You can set breakpoints in .ts files and debug using Chrome remote debugging on an android device. Just issue ionic run android to build and deploy on the real android device, open Chrome and use chrome://inspect to view the sources and set breakpoints.
Note that you may need to configure to add the source maps inline - see Ionic 2: Application running on the android device can't be debugged

Resources