Step by step debugging third-party component package, you can use it

Hello everyone, I am the laboratory researcher of this issue-Zhang Guangpo. Today I will show you how to use Source Link to debug Bootstrap Blazor open source component library through experiments and a complete operation process. Next, let us go to the laboratory to find out!

Microsoft MVP Lab Researcher

Analysis of Thinking

When we use third-party component packages, especially when we encounter minor problems, we especially want to step into a method through step-by-step debugging to see its specific logic. This will bring us great convenience, and then The reality is very cruel. It is impossible for us to achieve step-by-step debugging with no source code and no PDB. So how can we debug third-party component packages step by step?

Through this implementation, we take the third-party Bootstrap Blazor component package as an example, and use Source Link to debug this component package step by step.

Friends who like the Bootstrap Blazor component library often encounter some problems in the daily development process, and want to debug the code of the Bootstrap Blazor component library. Is there a simple way to let us do not need the project to reference Bootstrap Blazor? Can it be debugged statement by statement? The answer is Source Link.

What is Source Link

Source Link is a productivity feature for developers, which allows the unique information about the original source code of the assembly to be embedded into a set of software packages and specifications in the PDB during the compilation process. The metadata added to the PDB file through SourceLink establishes a mapping relationship with the local source code file and the code file in the warehouse. Therefore, Visual Studio can download files when needed when debugging, and provide users with source code debugging. Microsoft libraries (such as .NET Core and Roslyn) have already enabled Source Link.

Open source address:
https://github.com/dotnet/sourcelink

In our local development, the traditional debugging mode is to debug code by quoting source code, which makes it difficult for us to debug third-party component libraries without source code. We can get an excellent debugging experience through Source Link without source code.

Configure Visual Studio IDE tools

Step 1-Configure NuGet.org Symbol Source

By default, the NuGet.org symbol source is not enabled. In order for SourceLink to work properly, Visual Studio needs to be able to download these source codes, so we must first set it up.

In Visual Studio, go to Tools -> Options -> Debugging -> Symbols:

Make sure the "NuGet.org Symbol Server" option is selected.

Step 2-Disable "Only My Code"

Next, we need to go to Tools -> Options -> Debugging -> General Settings window and disable the "My Code Only" option:

Step 3-enable source server and source link support

By default, SourceLink support is enabled in Visual Studio, but source server support is not enabled.

Again, go to Tools -> Options -> Debugging -> General Settings window and make the following changes:

After the configuration is completed, we begin to enter the debugging journey.

Debug component

The new project references the Bootstrap Blazor component package, and then starts debugging.

After hitting the break point, press the Ctrl + Alt + U shortcut key to bring up the Modules window.

After sorting by Name from the Modules window, you can see that the Bootstrap Blazor component package we want to debug does not load the PDB file. At this time, we right-click as shown in the figure and select Load Symbols. There will be some delay according to each person’s network situation. Visual Studio will download the PDB file required by the component package from Nuget.org. After the download is complete, we press F11 (line by line debugging) to pop up a dialog box as follows:

At this time, because there is only the PDB file just downloaded locally, the source code must be sourced to debug line by line, so a dialog box pops up to request to download the source code and debug, that is, you can enter the component package.

Set hit breakpoint

More often in our daily debugging, we breakpoint the source code. When the program is running, we hit the breakpoint and we debug. Can we set source code breakpoints after using Source Link? Of course it is possible. The above method is to download which source code is needed, which is actually very inconvenient. We can download all the source code at once, open the source file to set breakpoints according to the needs, and unzip all the source code if the operation is shown.

Set the solution to display other items.

Source Link support

• Azure Repos / DevOps
• GitLab
• BitBucker
• Github

Summarize

This article uses Bootstrap Blazor component library as an example to explain how to debug third-party packages through Source Link. Other third-party component packages that have been released snupkg can also be debugged, including Microsoft's asp.net core framework related code.

*Bootstrap Blazor：

• https://github.com/dotnetcore/BootstrapBlazor

*Source Link：

• https://docs.microsoft.com/en-us/dotnet/standard/library-guidance/sourcelink?WT.mc_id=DT-MVP-5004174&ocid=AID3039170
• https://devblogs.microsoft.com/dotnet/producing-packages-with-source-link/?WT.mc_id=DT-MVP-5004174

*Github：

• https://github.com/dotnet/sourcelink/
  Microsoft's Most Valuable Expert

Microsoft's Most Valuable Expert is a global award granted by Microsoft to third-party technology professionals. For 28 years, technology community leaders around the world have won this award for sharing their expertise and experience in online and offline technology communities.

MVP is a rigorously selected team of experts. They represent the most skilled and intelligent people. They are experts who have a great passion for the community and are willing to help others. MVP is committed to helping others through speeches, forum questions and answers, creating websites, writing blogs, sharing videos, open source projects, organizing conferences, etc., and to help users in the Microsoft technology community use Microsoft technology to the greatest extent.
For more details, please visit the official website:
https://mvp.microsoft.com/zh-cn

---

Scan the QR code to follow Microsoft China MSDN to get more first-hand technical information and official learning materials from Microsoft!